简易网页浏览器的实现

简单网页浏览器的实现

 

　　这几天学习了Android关于网页访问及浏览器实现方面的知识，今天简单总结一下。

　　Android中提供了一个组件——WebView，使得浏览器的实现变得非常简单，当然这里指的是比较初级的。

　　下面先贴上代码吧。

1、布局文件

　　布局文件为activity_main.xml，由一个网址输入框AutoCompleteTextView、一个网页播放页WebView及三个按钮组成（完成的功能分别为上一页、下一页及刷新）

<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" >

    <AutoCompleteTextView
        android:id="@+id/url"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/url"
        android:inputType="textUri"
        android:completionHint="@string/url"
        android:completionThreshold="1" />

    <WebView
        android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btnLayout"
        android:layout_below="@+id/url" />

    <LinearLayout
        android:id="@+id/btnLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:text="@string/back" />

        <Button
            android:id="@+id/forward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:text="@string/forward" />

        <Button
            android:id="@+id/refresh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:text="@string/refresh" />

    </LinearLayout>

</RelativeLayout>

　　

2、字串定义

　　组件中所需要的文本字串定义在文件strings.xml，定义了上述四个组件（不包括WebView）的显示文本

<resources>
    
    <string name="app_name">WebView</string>

    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

    <string name="url">请输入网址</string>
    <string name="back">上一页</string>
    <string name="forward">下一页</string>
    <string name="refresh">刷新</string>

</resources>

　　

3、java实现

　　主文件MainActivity.java，实现了各个组件所应该完成的功能

package com.xxx.webview;

import java.util.Timer;

import java.util.Timer;
import java.util.TimerTask;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

    AutoCompleteTextView url;
    WebView show;

    String[] urlArray = new String[]
        {
            "www.baidu.com", "www.bing.com"
        };

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

        final Activity activity = this;

        show = (WebView)findViewById(R.id.show);
        show.getSettings().setJavaScriptEnabled(true);
        show.getSettings().setBuiltInZoomControls(true);
        show.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String strUrl) {
                view.loadUrl(strUrl);
                url.setText(strUrl);
                return false;
            }

            public void onPageStarted(WebView view, String strUrl, Bitmap favicon) {
                super.onPageStarted(view, strUrl, favicon);
                url.setText(strUrl);
            }

            public void onPageFinished(WebView view, String strUrl) {
            }

            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(activity, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });


        url = (AutoCompleteTextView)findViewById(R.id.url);
        ArrayAdapter<String> urlAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, urlArray);
        url.setAdapter(urlAdapter);
        url.setOnKeyListener(new View.OnKeyListener()
        {
            public boolean onKey(View v, int keyCode, KeyEvent ev)
            {
                if (keyCode == KeyEvent.KEYCODE_ENTER)
                {
                    String strUrl = url.getText().toString();

                    Pattern p = Pattern.compile("http://([\w-]+\.)+[\w-]+(/[\w-\./?%=]*)?");
                    Matcher m = p.matcher(strUrl);
                    if (!m.find())
                    {
                        strUrl = "http://" + strUrl;
                    }

                    show.loadUrl(strUrl);

                    return true;
                }

                return false;
            }
        });

        // button
        final Button backBtn = (Button)findViewById(R.id.back);
        final Button forwardBtn = (Button)findViewById(R.id.forward);
        Button refreshBtn = (Button)findViewById(R.id.refresh);
        backBtn.setEnabled(false);
        forwardBtn.setEnabled(false);

        backBtn.setOnClickListener(new OnClickListener()
        {
            public void onClick(View v)
            {
                show.goBack();
            }
        });

        forwardBtn.setOnClickListener(new OnClickListener()
        {
            public void onClick(View v)
            {
                // TODO
                show.goForward();
            }
        });

        refreshBtn.setOnClickListener(new OnClickListener()
        {
            public void onClick(View v)
            {
                // TODO
                String strUrl = url.getText().toString();
                show.loadUrl(strUrl);
            }
        });

        final Handler handler = new Handler()
        {
            @Override
            public void handleMessage(Message msg)
            {
                if (msg.what == 0x1111)
                {
                    // whether can go back
                    if (show.canGoBack())
                    {
                        backBtn.setEnabled(true);
                    }
                    else
                    {
                        backBtn.setEnabled(false);
                    }

                    // whether can go forward
                    if (show.canGoForward())
                    {
                        forwardBtn.setEnabled(true);
                    }
                    else
                    {
                        forwardBtn.setEnabled(false);
                    }
                }

                super.handleMessage(msg);
            }
        };

        // create thread to change button states
        new Timer().schedule(new TimerTask()
        {
            public void run()
            {
                Message msg = new Message();
                msg.what = 0x1111;
                handler.sendMessage(msg);
            }
        }, 0, 100);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if ((keyCode == KeyEvent.KEYCODE_BACK) && show.canGoBack())
        {
            show.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}

4、权限添加

　　千万不能少了网页访问等操作所需要的权限，在AndroidManifest.xml文件中加入以下代码

<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" ></uses-permission>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" ></uses-permission>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" ></uses-permission>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" ></uses-permission>
<uses-permission android:name="android.permission.INTERNET" ></uses-permission>
<uses-permission android:name="android.permission.WAKE_LOCK" ></uses-permission>

　　当然仅仅对于网页访问来说，上面列出的几个不都是必须的，这里主要是为以后进一步的功能实现做准备。

　　

5、代码分析

　　这里，主要介绍一下主文件MainActivity.java中几个值得注意并且比较有用的知识点。

　　a) 定义了一个网址数组urlArray，利用它的值生成一个ArrayAdapter赋给了AutoCompleteTextView，然后为网址编辑框添加OnKeyListener，并设置了匹配及自动弹出匹配结果的响应代码；代码从68行开始；

　　b) 定义了一个定时、消息发送与处理模块，使得程序每个0.1秒检查一次当前网页浏览情况，相应地对上一页及下一页的按钮状态进行改变；代码从128行开始；Timer类的schedule()方法第二个参数表述执行run()函数的延迟时间，这里设置为0（无延迟）；

　　c) 网页的上一页、下一页及资源导入方法也是现成的，分别为goBack()、goForward()及loadUrl()，至于刷新操作，其实就是重新导入一次资源（获取最新的）；

　　d) 最后还实现了手机返回键的响应（这里主要是针对返回上一页，所以需判断是否可以返回，否则交给父类去处理）；可以看到，在之前也进行了上一页、下一页的操作判断，方法分别为canGoBack()、canGoForward()；

　　其他的代码实现都是一些常规的，就不一一描述了。

 

6、结果图

　　初始界面：

　　

　　输入网址：

　　

　　网页访问：