webview包括前进、后退、刷新以及水平进度条

最新推荐文章于 2024-04-04 18:09:30 发布

浪漫的背后是卑微和辛酸

最新推荐文章于 2024-04-04 18:09:30 发布

阅读量1.5k

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/r_286636693_r/article/details/39519131

版权

Android 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

规则：

1、wap页新增工具栏，包括后退，前进和刷新按钮

2、点击后退，返回到上一页，点击前进按钮，进入之前打开过的页面，如没有打开过的界面，前进和后退按钮不可选。

3、点击刷新，刷新当前页面

4、进度条显示，显示当前加载页面的进度，可参考微信wap页面，当加载完成后，进度条完成且消失

5、调用wap页面时候，控制是否显示该工具条

activity_webview.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/toolbarline"
        android:background="#FFFFFF" >

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:overScrollMode="never" />

        <ProgressBar
            android:id="@+id/progressbar"
            style="@style/progressbar_style"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_gravity="top"
            android:max="100"
            android:progress="0" />
    </FrameLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:id="@+id/toolbarline"
        android:layout_above="@+id/webviewBottom"
        android:background="#dbdbdb" />

    <RelativeLayout
        android:id="@+id/webviewBottom"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:background="#eeeff1" >

        <ImageButton
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="32dp"
            android:background="@null"
            android:padding="10dp"
            android:src="@drawable/back_normal" />

        <ImageButton
            android:id="@+id/forward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="70dp"
            android:layout_toRightOf="@+id/back"
            android:background="@null"
            android:padding="10dp"
            android:src="@drawable/forward_normal" />

        <ImageButton
            android:id="@+id/refresh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="32dp"
            android:background="@null"
            android:padding="10dp"
            android:src="@drawable/refresh" />
    </RelativeLayout>

</RelativeLayout>

WebviewActivity：

package com.webview.ui;


import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageButton;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;


public class WebviewActivity extends Activity implements OnClickListener {


<span style="white-space:pre">	</span>/** 后退 */
<span style="white-space:pre">	</span>private ImageButton back;
<span style="white-space:pre">	</span>/** 前进 */
<span style="white-space:pre">	</span>private ImageButton forward;
<span style="white-space:pre">	</span>/** 刷新 */
<span style="white-space:pre">	</span>private ImageButton refresh;
<span style="white-space:pre">	</span>/** 进度条 */
<span style="white-space:pre">	</span>private ProgressBar progressBar;
<span style="white-space:pre">	</span>/** 工具栏顶部横线 */
<span style="white-space:pre">	</span>private View toolbarline;
<span style="white-space:pre">	</span>/** 按钮标志位，代表按下哪个按钮 */
<span style="white-space:pre">	</span>private String btFlag = null;
<span style="white-space:pre">	</span>/** 是否点击刷新按钮 */
<span style="white-space:pre">	</span>private boolean isRefersh = false;
<span style="white-space:pre">	</span>private RelativeLayout webviewBottom;
<span style="white-space:pre">	</span>/** 网页 */
<span style="white-space:pre">	</span>private WebView webView;
<span style="white-space:pre">	</span>private WebSettings settings;


<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>protected void onCreate(Bundle savedInstanceState) {
<span style="white-space:pre">		</span>super.onCreate(savedInstanceState);
<span style="white-space:pre">		</span>setContentView(R.layout.activity_webview);
<span style="white-space:pre">		</span>findById();
<span style="white-space:pre">		</span>setListener();
<span style="white-space:pre">		</span>initView();
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span> * 初始化界面
<span style="white-space:pre">	</span> */
<span style="white-space:pre">	</span>private void initView() {
<span style="white-space:pre">		</span>webView.loadUrl("http://www.baidu.com");
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span> * 设置监听
<span style="white-space:pre">	</span> */
<span style="white-space:pre">	</span>private void setListener() {
<span style="white-space:pre">		</span>back.setOnClickListener(this);
<span style="white-space:pre">		</span>forward.setOnClickListener(this);
<span style="white-space:pre">		</span>refresh.setOnClickListener(this);
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span> * 初始化ui
<span style="white-space:pre">	</span> */
<span style="white-space:pre">	</span>private void findById() {
<span style="white-space:pre">		</span>back = (ImageButton) findViewById(R.id.back);
<span style="white-space:pre">		</span>forward = (ImageButton) findViewById(R.id.forward);
<span style="white-space:pre">		</span>refresh = (ImageButton) findViewById(R.id.refresh);
<span style="white-space:pre">		</span>toolbarline = findViewById(R.id.toolbarline);
<span style="white-space:pre">		</span>webviewBottom = (RelativeLayout) findViewById(R.id.webviewBottom);
<span style="white-space:pre">		</span>progressBar = (ProgressBar) findViewById(R.id.progressbar);
<span style="white-space:pre">		</span>webView = (WebView) findViewById(R.id.webview);
<span style="white-space:pre">		</span>settings = webView.getSettings();
<span style="white-space:pre">		</span>// 设置WebView属性，能够执行Javascript脚本
<span style="white-space:pre">		</span>settings.setJavaScriptEnabled(true);
<span style="white-space:pre">		</span>// js与android调用接口
<span style="white-space:pre">		</span>webView.addJavascriptInterface(new MyJavascriptInterface(), "android");
<span style="white-space:pre">		</span>// 设置Web视图
<span style="white-space:pre">		</span>webView.setWebViewClient(new MyWebViewClient());
<span style="white-space:pre">		</span>// 处理Javascript的对话框、网站图标、网站title、加载进度等
<span style="white-space:pre">		</span>webView.setWebChromeClient(new MyWebChromeClient());
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>class MyJavascriptInterface {
<span style="white-space:pre">		</span>public MyJavascriptInterface() {


<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span> * 工具栏显示
<span style="white-space:pre">		</span> */
<span style="white-space:pre">		</span>public void setVisibility() {
<span style="white-space:pre">			</span>toolbarline.setVisibility(View.VISIBLE);
<span style="white-space:pre">			</span>webviewBottom.setVisibility(View.VISIBLE);
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span> * 工具栏消失
<span style="white-space:pre">		</span> */
<span style="white-space:pre">		</span>public void setGone() {
<span style="white-space:pre">			</span>toolbarline.setVisibility(View.GONE);
<span style="white-space:pre">			</span>webviewBottom.setVisibility(View.GONE);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>class MyWebChromeClient extends WebChromeClient {


<span style="white-space:pre">		</span>@Override
<span style="white-space:pre">		</span>public void onReceivedTitle(WebView view, String title) {
<span style="white-space:pre">			</span>super.onReceivedTitle(view, title);
<span style="white-space:pre">			</span>setTitle(title);
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>@Override
<span style="white-space:pre">		</span>public void onProgressChanged(WebView view, int newProgress) {
<span style="white-space:pre">			</span>if (newProgress == 100) {
<span style="white-space:pre">				</span>progressBar.setProgress(newProgress);
<span style="white-space:pre">				</span>progressBar.setVisibility(View.GONE);
<span style="white-space:pre">				</span>isRefersh = false;
<span style="white-space:pre">				</span>refresh.setImageDrawable(getResources().getDrawable(
<span style="white-space:pre">						</span>R.drawable.refresh));
<span style="white-space:pre">			</span>} else {
<span style="white-space:pre">				</span>if (progressBar.getVisibility() == View.GONE)
<span style="white-space:pre">					</span>progressBar.setVisibility(View.VISIBLE);
<span style="white-space:pre">				</span>progressBar.setProgress(newProgress);
<span style="white-space:pre">			</span>}


<span style="white-space:pre">			</span>super.onProgressChanged(view, newProgress);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>class MyWebViewClient extends WebViewClient {
<span style="white-space:pre">		</span>@Override
<span style="white-space:pre">		</span>public void onPageStarted(WebView view, String url, Bitmap favicon) {
<span style="white-space:pre">			</span>super.onPageStarted(view, url, favicon);
<span style="white-space:pre">			</span>if ("refresh".equals(btFlag)) {// 判断是否是刷新按钮
<span style="white-space:pre">				</span>if (isRefersh) {
<span style="white-space:pre">					</span>refresh.setImageDrawable(getResources().getDrawable(
<span style="white-space:pre">							</span>R.drawable.stop));
<span style="white-space:pre">				</span>}
<span style="white-space:pre">			</span>}


<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>@Override
<span style="white-space:pre">		</span>public void onPageFinished(WebView view, String url) {
<span style="white-space:pre">			</span>super.onPageFinished(view, url);
<span style="white-space:pre">			</span>if (webView.canGoBack()) {// 如果能后退，则更新图像状态
<span style="white-space:pre">				</span>back.setImageDrawable(getResources().getDrawable(
<span style="white-space:pre">						</span>R.drawable.back_selected));
<span style="white-space:pre">			</span>} else {
<span style="white-space:pre">				</span>back.setImageDrawable(getResources().getDrawable(
<span style="white-space:pre">						</span>R.drawable.back_normal));
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>if (webView.canGoForward()) {// 如果能前期，则更新图像状态
<span style="white-space:pre">				</span>forward.setImageDrawable(getResources().getDrawable(
<span style="white-space:pre">						</span>R.drawable.forward_selected));
<span style="white-space:pre">			</span>} else {
<span style="white-space:pre">				</span>forward.setImageDrawable(getResources().getDrawable(
<span style="white-space:pre">						</span>R.drawable.forward_normal));
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>@Override
<span style="white-space:pre">		</span>public boolean shouldOverrideUrlLoading(WebView view, String url) {
<span style="white-space:pre">			</span>view.loadUrl(url);
<span style="white-space:pre">			</span>return true;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>public boolean onCreateOptionsMenu(Menu menu) {
<span style="white-space:pre">		</span>getMenuInflater().inflate(R.menu.main, menu);
<span style="white-space:pre">		</span>return true;
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>public void onClick(View v) {
<span style="white-space:pre">		</span>switch (v.getId()) {
<span style="white-space:pre">		</span>case R.id.back:// 后退
<span style="white-space:pre">			</span>btFlag = "back";// 代表按下的是后退按钮
<span style="white-space:pre">			</span>if (webView.canGoBack()) {// 如果能返回
<span style="white-space:pre">				</span>webView.goBack();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case R.id.forward:// 前进
<span style="white-space:pre">			</span>btFlag = "forward";// 代表按下的是前进按钮
<span style="white-space:pre">			</span>if (webView.canGoForward()) {// 如果能前进
<span style="white-space:pre">				</span>webView.goForward();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case R.id.refresh:// 刷新
<span style="white-space:pre">			</span>btFlag = "refresh";// 代表按下的是刷新按钮
<span style="white-space:pre">			</span>if (isRefersh) {// 当正在刷新中，再次点击刷新按钮时，刷新结束
<span style="white-space:pre">				</span>isRefersh = false;
<span style="white-space:pre">				</span>// webview停止加载
<span style="white-space:pre">				</span>webView.stopLoading();
<span style="white-space:pre">				</span>refresh.setImageDrawable(getResources().getDrawable(
<span style="white-space:pre">						</span>R.drawable.refresh));
<span style="white-space:pre">			</span>} else {
<span style="white-space:pre">				</span>isRefersh = true;
<span style="white-space:pre">				</span>webView.reload();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>break;


<span style="white-space:pre">		</span>default:
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>public boolean onKeyDown(int keyCode, KeyEvent event) {
<span style="white-space:pre">		</span>if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
<span style="white-space:pre">			</span>btFlag = "back";// 代表按下的是后退按钮
<span style="white-space:pre">			</span>webView.goBack();
<span style="white-space:pre">			</span>return true;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>return super.onKeyDown(keyCode, event);
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>protected void onDestroy() {
<span style="white-space:pre">		</span>super.onDestroy();
<span style="white-space:pre">		</span>webView.clearHistory();
<span style="white-space:pre">	</span>}
}

自定义progressbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />

            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#F5F5F5"
                android:startColor="#BEBEBE" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="0dip" />

                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#165CBC"
                    android:startColor="#85B0E9" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#6fb40d"
                    android:startColor="#9cdd3f" />
            </shape>
        </clip>
    </item>

</layer-list>

自定义水平进度条样式 progressbar_style

<style name="progressbar_style" parent="@android:style/Widget.ProgressBar.Horizontal">
        <item name="android:maxHeight">50dip</item>
        <item name="android:minHeight">8dip</item>
        <item name="android:indeterminateOnly">false</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:progressDrawable">@drawable/progressbar</item>
    </style>

项目清单文件：

<activity
            android:name="com.webview.ui.WebviewActivity"
            android:windowSoftInputMode="stateHidden|adjustPan" >
        </activity>