由于安卓自带的WebView封装了很多方法,因此浏览器app实现起来算是比较简单的。
唯一的难处就是需要自己在补充加载进度条与一些按钮,同时判断用户输入的是否是网址,
如下图所示,
在打开的时候,如果不是处于Wifi环境给出警告
利用WebView实现了一个简易的浏览器,在用户没有输入网址的时候给出提示,具有前进、后退、刷新、停止、跳转的功能。
在加载网页的时候,有进度条。基本上就是一个简单的浏览器。
制作过程如下:
1、首先在res\values\strings.xml中设置各个组件的字符,app的名称,如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">浏览器</string>
<string name="action_settings">Settings</string>
<string name="button1">前进</string>
<string name="button2">后退</string>
<string name="button3">刷新</string>
<string name="button4">停止</string>
<string name="button5">Go!</string>
</resources>
2、然后修改res\values\styles.xml,在里面设置一个无标题栏的app样式,app的样式设置在《【Android】app透明与字体颜色更变、上下文菜单》(点击打开链接)中已经说过了,这里不再赘述。
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="NoTitle">
<item name="android:windowNoTitle">true</item>
</style>
</resources>
3、之后在AndroidManifest.xml申请检测设备网络环境与使用网络的权限,同时修改app的样式为我们刚刚定义的NoTitle,修改如下:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.browser"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="18" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <!-- 要求获取设备当前网络状态 -->
<uses-permission android:name="android.permission.INTERNET" /> <!-- 要求连接网络 -->
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/NoTitle" > <!-- 使用style中的noTitle样式 -->
<activity
android:name="com.browser.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>
4、随后在res\layout\activity_main.xml修改MainActivity的布局。在里面放置一个自上而下的垂直线性布局,在其中放置:一个在《【Android】进度条与线程之间的消息处理》(
点击打开链接)已经提到过的进度条组件,一个水平的线性布局,里面的五个按钮可以用《【Android】利用相对布局布置更新软件的style为主题对话框的Activity,利用layout_weight属性对表格布局的行划分》(
点击打开链接)实现其等分,从而得到更好的效果,这里没有这样放置,在真机的效果就是所有的按钮左对齐了,一个输入框供用户输入网址,最后就是一个覆盖整个画面的浏览器组件WebView,代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button3" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button5" />
</LinearLayout>
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
5、最后就是MainActivity.java的修改,逻辑非常简单,获取各个组件之后,分别设置其实现方法,具体的实现方法在代码已经标注了。在Java中判断用户输入是否为网址,在《【Java】利用正则表达式判断是否为网址》(点击打开链接)中已经说过了这里不再赘述。
package com.browser;
import java.util.regex.Pattern;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.Toast;
public class MainActivity extends Activity {
private ProgressBar progressBar1;
private Button button1;
private Button button2;
private Button button3;
private Button button4;
private Button button5;
private EditText editText1;
private WebView webView1;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 判断是否处于wifi环境
ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(CONNECTIVITY_SERVICE);
NetworkInfo networkInfo = connectivityManager
.getNetworkInfo(ConnectivityManager.TYPE_WIFI);
if (!networkInfo.isConnected()) {
Toast.makeText(MainActivity.this, "当前不处于Wifi环境,请自行注意你的流量!",
Toast.LENGTH_SHORT).show();
}
// 获取组件
progressBar1 = (ProgressBar) findViewById(R.id.progressBar1);
button1 = (Button) findViewById(R.id.button1);
button2 = (Button) findViewById(R.id.button2);
button3 = (Button) findViewById(R.id.button3);
button4 = (Button) findViewById(R.id.button4);
button5 = (Button) findViewById(R.id.button5);
editText1 = (EditText) findViewById(R.id.editText1);
webView1 = (WebView) findViewById(R.id.webView1);
// 设置JavaScript可用,并且处理JavaScript的弹出框
// 在方法开头没有@SuppressLint("SetJavaScriptEnabled"),词句会出现有可能会出现跨站攻击XXS的警告
webView1.getSettings().setJavaScriptEnabled(true);
// 设置加载进度条
webView1.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
if (newProgress == 100) {
progressBar1.setVisibility(View.INVISIBLE);
} else {
if (View.INVISIBLE == progressBar1.getVisibility()) {
progressBar1.setVisibility(View.VISIBLE);
}
progressBar1.setProgress(newProgress);
}
}
});
webView1.setWebViewClient(new WebViewClient());// 不使用内置浏览器
// 前进按钮
button1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
webView1.stopLoading();// 停止加载当前网址
webView1.goForward();// 调用封装好的前进方法
String url = webView1.getUrl();// 获取加载之后网页的Url
editText1.setText(url);// 填充的地址栏
}
});
// 后退按钮
button2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
webView1.stopLoading();// 停止加载当前网址
webView1.goBack();// 调用封装好的后退方法
String url = webView1.getUrl();// 获取加载之后网页的Url
editText1.setText(url);// 填充的地址栏
}
});
// 刷新按钮
button3.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
webView1.stopLoading();
webView1.reload();
}
});
// 停止按钮
button4.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
webView1.stopLoading();
}
});
// 输入的时候按下Enter键
editText1.setOnKeyListener(new OnKeyListener() {
@Override
public boolean onKey(View arg0, int keyCode, KeyEvent arg2) {
if (keyCode == KeyEvent.KEYCODE_ENTER) {
String url = editText1.getText().toString();
Pattern pattern = Pattern
.compile("^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\\/])+$");
if (!pattern.matcher(url).matches()) {
url = "http://" + url;
}
if (pattern.matcher(url).matches()) {
webView1.loadUrl(url);
} else {
new AlertDialog.Builder(MainActivity.this)
.setMessage("请输入网址!")
.setNegativeButton("确定", null).show();
}
}
return false;
}
});
// 转到按钮
button5.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
String url = editText1.getText().toString();
Pattern pattern = Pattern
.compile("^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\\/])+$");
if (!pattern.matcher(url).matches()) {
url = "http://" + url;
}
if (pattern.matcher(url).matches()) {
webView1.loadUrl(url);
} else {
new AlertDialog.Builder(MainActivity.this)
.setIcon(R.drawable.ic_launcher)
.setTitle(R.string.app_name).setMessage("请输入网址!")
.setNegativeButton("确定", null).show();
}
}
});
}
}
至此,整个app的编写结束,我上传了一份代码,大家有兴趣可以看看: http://download.csdn.net/detail/yongh701/8902617