مشخصات مقاله
-
1989
-
0.0
-
14287
-
0
-
0
آموزش WebView اندروید
دوره آموزش برنامه نویسی اندروید
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
آموزش WebView اندروید
Webview یک ویو می باشد که صفحات وب را داخل برنامه ی شما نمایش می دهد. شما همچنین می توانید رشته ی HTML را مشخص کرده و با استفاده از webview آن را داخل برنامه ی خود نشان دهید. Webview برنامه ی شما را به یک برنامه ی وب تبدیل می کند.
برای افزودن webview به برنامه ی خود باید <WebView> را به لی اوت xml فایل خود اضافه کنید. ترکیب آن به شکل زیر می باشد .
<webview xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
برای استفاده از آن باید یک رفرنس از این ویو در فایل جاوا به دست آورید. برای گرفتن رفرنس یک آبجکت از گروه Webview ایجاد کنید. ترکیب آن مانند زیر می باشد .
WebView browser = (WebView) findViewById(R.id.webview);
برای بارگذاری یک وب url در داخل Webview، باید روش loadUrl(String url) را از گروه WebView فرابخوانید و url مورد نیاز را فرابخوانید. ترکیب آن به شکل زیر می باشد .
browser.loadUrl("http://www.tahlildadeh.com");
علاوه بر بارگذاری url، با استفاده از روش های تعریف شده در گروه WebView می توانید کنترل بیشتری روی Webview خود داشته باشید. لیست این روش ها را در جدول زیر می بینید.
|
ردیف |
متد ها و توضیحات |
|
1 |
canGoBack() این روش مشخص می کند که آیا WebView دارای یک آیتم back history می باشد یا نه. |
|
2 |
canGoForward() این روش مشخص می کند که آیا WebView دارای یک آیتم forward history می باشد یا نه. |
|
3 |
clearHistory() این روش سابقه ی forward و backward مربوط به WebView را واضح می کند. |
|
4 |
destroy() این روش وضعیت داخلی WebView را از بین می برد. |
|
5 |
findAllAsync(String find) این روش همه ی نمونه های رشته را پیدا کرده و آنها را مشخص میکند. |
|
6 |
getProgress() این روش پیشروی صفحه ی فعلی را به دست می آورد. |
|
7 |
getTitle() این روش تیتر صفحه ی فعلی را گزارش می دهد. |
|
8 |
getUrl() این روش url صفحه ی فعلی را گزارش می دهد. |
اگر روی هر لینک از صفحه ی وب در داخل WebView کلیک کنید، آن صفحه در داخل WebView شما بارگذاری نخواهد شد. برای اینکه این کار را انجام دهید لازم است گروه خود را از WebViewClient گسترش دهید و روش آن را انجام دهید. ترکیب آن در زیر ارائه شده است.
private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
مثال
در اینجا مثالی را نی بینید که استفاده از لی اوت WebView را توضیح می دهد. این مثال یک برنامه ی وب پایه ایجاد می کند که از شما در مورد مشخص کردن یک url خواهد پرسید و وب سایت این url را در داخل WebView بارگذاری خواهد کرد.
برای انجام این مثال لازم است آن را روی دستگاهی اجرا کنید که در آن اینترنت در حال اجرا می باشد.
|
مراحل |
توضیحات |
|
1 |
برای ایجاد یک برنامه ی اندروید از Eclipse IDE استفاده خواهید کرد و آن را با عنوان WebView تحت بسته ی com.example.webview نام گذاری کنید. زمان ایجاد این برنامه مطمئن شوید که Target SDK و Compile With در آخرین ورژن Android SDK هستند تا از سطوح بالاتر API استفاده کنید. |
|
2 |
فایل src/MainActivity.java را برای افزودن کد WebView تغییر دهید. |
|
3 |
res/layout/activity_main را برای افزودن مولفه های XML مربوطه تغییر دهید. |
|
4 |
res/values/string.xml را برای افزودن مولفه های رشته ی لازم تغییر دید. |
|
5 |
AndroidManifest.xml را برای افزودن اجازه های لازم تغییر دهید. |
|
6 |
برنامه را اجرا کنید و یک دستگاه اجرایی اندروید انتخاب کرده و برنامه را روی آن نصب کنید و نتایج را بررسی کنید. |
در زیر محتوای فایل تغییریافته فعالیت اصلی را مشاهده می کنید.
src/com.example.webview/MainActivity.java.
package com.example.webview;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
private EditText field;
private WebView browser;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
field = (EditText)findViewById(R.id.urlField);
browser = (WebView)findViewById(R.id.webView1);
browser.setWebViewClient(new MyBrowser());
}
public void open(View view){
String url = field.getText().toString();
browser.getSettings().setLoadsImagesAutomatically(true);
browser.getSettings().setJavaScriptEnabled(true);
browser.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
browser.loadUrl(url);
}
private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
در ادامه محتوای تغییریافته ی xml مربوط به res/layout/activity_main.xml را مشاهده می کنید.
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingbottom="@dimen/activity_vertical_margin"
android:paddingleft="@dimen/activity_horizontal_margin"
android:paddingright="@dimen/activity_horizontal_margin"
android:paddingtop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<textview android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<edittext android:id="@+id/urlField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_aligntop="@+id/textView1"
android:layout_centerhorizontal="true"
android:ems="10" />
<button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/urlField"
android:layout_centerhorizontal="true"
android:onclick="open"
android:text="@string/browse" />
<webview android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignleft="@+id/textView1"
android:layout_alignparentbottom="true"
android:layout_below="@+id/button1" />
</relativelayout>
در ادامه محتوای res/values/string.xml می باشد.
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<string name="app_name">WebView</string>
<string name="action_settings">Settings</string>
<string name="hello_world">URL:</string>
<string name="browse">Browse</string>
</resources>
در ادامه محتوای فایل AndroidManifest.xml را می بینید.
<?xml version="1.0" encoding="utf-8" ?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.webview"
android:versioncode="1"
android:versionname="1.0">
<uses-sdk android:minsdkversion="8"
android:targetsdkversion="17" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:allowbackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">
<activity android:name="com.example.webview.MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
اجازه بدهید برنامه ی WebView شما را اجرا کنیم. فرض می کنیم که دستگاه موبایل اندروید خود را به کامپیوتر متصل کرده اید. برای اجرای برنامه از Eclipse، یکی ازفایل های فعالیت پروژه را باز کرده و روی آیکن Run از تولبار کلیک کنید. قبل از شروع برنامه ی شما، Eclipse پنجره ی زیر را برای انتخاب گزینه ی محل اجرای برنامه ی اندرویدتان، نمایش خواهد داد.
دستکاه موبایل خود را به عنوان یک گزینه انتخاب کرده و سپس آن را چک کنید که صفحه ی پیش فرض شما را نمایش خواهد داد.
اکنون یک url در فیلد url مشخص کنید و دکمه ی Browse را فشار دهید که ظاهرا وب سایت آغاز به کار می کند. اما قبل از آن لطفا مطمئن شوید که به اینترنت متصل هستید. پس از فشار دادن دکمه صفحه ی زیر ظاهر خواهد شد.
توجه داشته باشید که تنها با تغییر url در فیلد url، WebView وب سایت مورد نظر شما را باز خواهد کرد.