码迷,mamicode.com
首页 > 移动开发 > 详细

【Android】检测是否处于Wifi环境,利用WebView实现浏览器app

时间:2015-07-15 19:24:11      阅读:2652      评论:0      收藏:0      [点我收藏+]

标签:android   浏览器   webview   wifi   app   

由于安卓自带的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

版权声明:本文为博主原创文章,未经博主允许不得转载。

【Android】检测是否处于Wifi环境,利用WebView实现浏览器app

标签:android   浏览器   webview   wifi   app   

原文地址:http://blog.csdn.net/yongh701/article/details/46895439

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!