menu

وب ویو (WebView) در اندروید

نحوه استفاده از وب ویو و ایجاد یک مرورگر در اندروید را فرا بگیرید


با استفاده از وب ویو اندروید می توان صفحات وب و اچ تی ام ال را بارگذاری نمود و یا برنامه را به یک وب اپلیکیشن تبدیل کرد.

برای استفاده از وب ویو در برنامه، از تگ "<WebView>" درون فایل XML استفاده می کنیم.

          
   <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView" />       
          

برای تعریف و معرفی وب ویو به اشاره گر جاوا همانند سایر عناصر گرافیکی عمل می کنیم:

          
  WebView web = (WebView) findViewById(R.id.webView);
          

برای بارگذاری یک آدرس وبسایت از متد "loadUrl(String url)" با ورودی رشته استفاده می کنیم.

        
  web.loadUrl("http://learn.izarebin.com/android");   
          

وب ویو نیازمند دسترسی اینترنت می باشد که برای کار کردن وب ویو حتما باید این دسترسی به اندروید منیفست برنامه اضافه گردد.

        
  <uses-permission android:name="android.permission.INTERNET"></uses-permission>   
          

پروژه نمونه : ایجاد یک مرورگر ساده

برای یادگیری و آشنایی بیشتر با وب ویو در اندروید، یک پروژه نمونه مرورگر را به صورت قدم به قدم ایجاد می کنیم. پروژه در محیط اندروید استودیو به شکل زیر خواهد بود:

androidwebview

مراحل انجام کار

  • 1 - ابتدا مطابق با آموزش ساخت اولین پروژه اندرویدی یک پروژه جدید بسازید و نام آن را "Android Browser" قرار دهید.
  • 2 - فونت فارسی موردنظر خود را درون پوشه "assets/fonts" قرار دهید.
  • 3 - کدهای مربوط به لایه طراحی شده در آموزش را جایگزین کدهای لایه پروژه خود کنید.
  • 4 - فایل MainActivity.java را باز کرده و کدهای جدید نوشته شده موجود در آموزش را در آن اضافه نمایید.
  • 5 - پروژه را اجرا نموده و برروی شبیه ساز آن را تست کنید.

1 - لایه گرافیکی activity_main.xml

          
  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    android:background="#fff">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1">

        <EditText
            android:layout_width="2dp"
            android:layout_height="fill_parent"
            android:id="@+id/edturl"
            android:layout_weight="0.8"
            android:background="#e7e7e7"
            android:layout_margin="4dp"
            android:paddingLeft="4dp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="برو"
            android:id="@+id/btngo"
            android:layout_weight="0.2"
            android:textColor="#000"
            android:textSize="16dp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.8"
        android:background="#e7e7e7">

        <WebView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/web"
            android:layout_margin="4dp" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:text="طراحی شده توسط آکادمی مجازی ذره بین"
            android:id="@+id/txtcopyright"
            android:layout_below="@+id/web"
            android:gravity="center"
            android:textColor="#000"
            android:textStyle="bold"
            android:textSize="18dp" />
    </LinearLayout>

  </LinearLayout>
         

2 - MainActivity.java

      
  package com.izarebin.webview;

  import android.graphics.Typeface;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.webkit.WebView;
  import android.webkit.WebViewClient;
  import android.widget.Button;
  import android.widget.EditText;
  import android.widget.TextView;

  public class MainActivity extends AppCompatActivity {
    EditText edturl;
    Button btngo;
    WebView web;
    TextView txtcopyright;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        edturl = (EditText) findViewById(R.id.edturl);
        btngo = (Button) findViewById(R.id.btngo);
        web = (WebView) findViewById(R.id.web);
        txtcopyright = (TextView) findViewById(R.id.txtcopyright);

        Typeface font = Typeface.createFromAsset(getAssets(), "fonts/koodak.ttf");

        btngo.setTypeface(font);
        txtcopyright.setTypeface(font);
        
        // استفاده از کلاس وب ویو ساخته شده
        web.setWebViewClient(new MyWebView());

        btngo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                 // دریافت آدرس وبسایت از کاربر
                String url = edturl.getText().toString();
              
                // اضافه کردن تنظیمات کاربردی برای وب ویو  
                web.getSettings().setJavaScriptEnabled(true);
                web.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
                web.getSettings().setLoadsImagesAutomatically(true);
                web.getSettings().setPluginsEnabled(true);
                web.getSettings().setRenderPriority(RenderPriority.HIGH);
                web.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
                // بارگذاری وبسایت 
                web.loadUrl("http://" + url);
            }
        });
    }

    // ایجاد یک کلاس وب ویو برای نمایش صفحات وب با آدرس های وارد شده توسط کاربر
    private class MyWebView extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
  }
           

3 - AndroidManifest.xml

این برنامه نیاز به دسترسی اینترنت دارد که باید به منیفست برنامه اضافه شود.

          
  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.izarebin.webview" >

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

  </manifest>
          

4 - اجرای برنامه برروی شبیه ساز

شما می توانید به صورت آنلاین برنامه طراحی شده را از این لینک مشاهده نمایید.

شکل پروژه طراحی شده به صورت زیر خواهد بود:

androidwebview1
سورس پروژه مرورگر اندروید (WebView) برای محیط اندروید استودیو را می توانید از این لینک دریافت نمایید.