Android-模仿FB WebView 瀏覽網頁介面

更改日期 : 20160310_WebView_JavaScript

各位大大是否有注意到 FB 瀏覽網頁的介面有更改了
好久之前是直接幫您開網頁連結
但現在是直接在WebView瀏覽

(  FB 版本 )

今天的範例就來模擬 FB 瀏覽網頁的 Activity

首先我們先設定介面位置

<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"
    tools:context="${relativePackage}.${activityClass}" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <Button
            android:id="@+id/button1"
            android:layout_width="60dip"
            android:layout_height="50dip"
            android:text="返回" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="50dip"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/button2"
            android:layout_toRightOf="@+id/button1"
            android:gravity="center"
            android:text="TextView"
            android:textSize="18sp" />

        <Button
            android:id="@+id/button2"
            android:layout_width="60dip"
            android:layout_height="50dip"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:text="刷新" />
    </RelativeLayout>

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/relativeLayout1" />

</RelativeLayout>

接下來就是要來真的 WebView 做監聽與設定

public class MainActivity extends Activity implements OnClickListener{

    WebView webView;
    private Button backBtn;
    private Button refreshBtn;
    private TextView titleView;

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

        backBtn = (Button) findViewById(R.id.button1);
        refreshBtn = (Button) findViewById(R.id.button2);
        titleView = (TextView) findViewById(R.id.textView1);
        webView = (WebView) findViewById(R.id.webView1);

        webView.loadUrl("http://www.yahoo.com.tw");

        // 是否資源 JavaScript 資源
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        
        webView.setWebChromeClient(new WebChromeClient(){

            //將網頁Title顯示到Acitity Title
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                
                titleView.setText(title);
            }
            
        });

        
        webView.setWebViewClient(new WebViewClient(){

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //複寫網頁視窗
                view.loadUrl(url);

                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public void onReceivedError(WebView view, int errorCode,
                    String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
                //如果收到Error則顯示哪頁面
                view.loadUrl("file:///android_asset/error.html");
                
            }

        });

        //設置下載監聽器
        webView.setDownloadListener(new DownloadListener(){

            @Override
            public void onDownloadStart(String url, String userAgent,
                    String contentDisposition, String mimetype,
                    long contentLength) {
                //如果連結最後為APK，則執行系統下載功能
                if(url.endsWith(".apk")){
                    Uri uri = Uri.parse(url);
                    Intent intent = new Intent(Intent.ACTION_VIEW, uri);
                    startActivity(intent);
                }

            }});

        backBtn.setOnClickListener(this);
        refreshBtn.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        switch(view.getId()){
        case R.id.button1:
            finish();
            break;

        case R.id.button2:
            webView.reload();
            break;
        }
    }
}

如果要有上一頁、下一頁功能
1 . 先判斷有無存在上、下一頁的暫存
2 . 執行方法
上一頁

if(webView.canGoBack())
{
    webView.goBack();
}

下一頁

if(webView.canGoForward())
{
    webView.goForward();
}

中間有Error.html的更改網路連線錯誤所要顯示的畫面
可以依照User的需求擺放( 位置 : assets/error.html )

注意 : 一定要加上網路連線權限

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

以下是執行出來的畫面，因該有5成相似了吧!!! OTZ

歡迎轉載，請註明出處。