码迷，mamicode.com
首页 > Web开发 > 详细

带进度条的webview，支持网页前进和返回、刷新，返回键goBack等.

时间：2016-07-15 20:51:38      阅读：275      评论：0      收藏：0      [点我收藏+]

标签：

1.介绍

一款很简单的webview，头部有进度条，支持网页前进和返回、刷新，返回键goBack等，可定制性强，漂亮简洁大方，集成到软件里很方便，功能还不复杂。

2.截图

技术分享
技术分享

3.代码介绍

因为有标题头，所以这里我是继承LinearLayout。
public class WebViewLayout extends LinearLayout

初始化添加了头部和webview，头部里包含进度条，设置了几个自定义属性，方便调用，如果你需要定制其他的东西，你可以自己加入属性，比如头部颜色，进度条颜色，头部高度，我这里是写死的。
@SuppressLint("SetJavaScriptEnabled")
    private void init(Context context, AttributeSet attrs) {
        setOrientation(LinearLayout.VERTICAL);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WebViewLayout);
        isUpdateTitle = typedArray.getBoolean(R.styleable.WebViewLayout_isUpdateTitle, false);
        isShowIconBack = typedArray.getBoolean(R.styleable.WebViewLayout_isShowIconBack, false);
        isJavaScriptEnabled = typedArray.getBoolean(R.styleable.WebViewLayout_isJavaScriptEnabled, false);
        typedArray.recycle();

        //添加头部
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        titleView = inflater.inflate(R.layout.webview_title_bar, null, false);
        titleView.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, ToolsUtil.dip2px(48)));
        titleLeft = (ImageView) titleView.findViewById(R.id.title_left);
        titleBefore = (ImageView) titleView.findViewById(R.id.title_before);
        titleText = (TextView) titleView.findViewById(R.id.title_text);
        titleNext = (ImageView) titleView.findViewById(R.id.title_next);
        titleRight = (ImageView) titleView.findViewById(R.id.title_right);
        progressbar = (ProgressBar) titleView.findViewById(R.id.progress);
        addView(titleView);

        //添加webview
        webView = new WebView(context);
        webView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        webView.getSettings().setJavaScriptEnabled(isJavaScriptEnabled);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());
        addView(webView);

        setTitleView();//设置标题栏
    }

标题栏退出activity按钮我是用的回调，在你的activity进行finish，下面是头部按钮的调用
/**
     * 设置标题栏
     */
    private void setTitleView() {
        titleLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(callBack != null){callBack.backOnclick();}
            }
        });
        titleBefore.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.goBack();
            }
        });
        titleNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.goForward();
            }
        });
        titleRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.reload();
            }
        });
    }

下面的是设置进度条和设置头部的返回上一些和进入下一页的方法。
public class WebViewClient extends android.webkit.WebViewClient{
        @Override
        public void onPageFinished(WebView view, String url) {
            if (isUpdateTitle)
                titleText.setText(view.getTitle());

            boolean back = view.canGoBack();
            boolean forward = view.canGoForward();
            if (back || forward) {
                titleBefore.setVisibility(isShowIconBack && back ? View.VISIBLE : View.GONE);
                titleNext.setVisibility(isShowIconBack && forward ? View.VISIBLE : View.GONE);
            } else {
                titleBefore.setVisibility(View.GONE);
                titleNext.setVisibility(View.GONE);
            }
        }
    }

    public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                progressbar.setVisibility(GONE);
            } else {
                if (progressbar.getVisibility() == GONE)
                    progressbar.setVisibility(VISIBLE);
                progressbar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }

    }

最后是一个返回键的监听，你可以自己进行修改
@Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        if(event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN && event.getRepeatCount() == 0){
            if(webView.canGoBack()){
                webView.goBack();
                return true;
            }
        }
        return super.dispatchKeyEvent(event);
    }

4.使用方法

布局，共有三个自定义属性
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".ui.UsingHelpActivity">

    <com.zzsoft.app.widget.WebViewLayout
        android:id="@+id/webviewlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:isUpdateTitle="true"
        app:isShowIconBack="true"
        app:isJavaScriptEnabled="true"/>

</LinearLayout>

private boolean isUpdateTitle;//是否根据网页改变title
private boolean isShowIconBack;//是否显示上一页下一页图标
private boolean isJavaScriptEnabled;//是否允许JavaScript
我这里就写了这三个接口，你需要什么你加上什么属性就行

下面这个是activity里的调用方法，有三个方法，setTitleText()：如果你设置了自动更新标题，这个方法无效。剩下两个一个是是否显示头部，一般用不到，另一个是退出activity的回调调用，记得加上。
private void initView() {
        webViewLayout.setTitleText(R.string.my_using_help);
        webViewLayout.setTitleVisibility(true);
        webViewLayout.setWebViewCallBack(new WebViewLayout.WebViewCallBack() {
            @Override
            public void backOnclick() {
                activity.this.finish();
            }
        });
        webViewLayout.loadUrl("http://www.baidu.com");
    }

5.全部源码

webview_title_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/title_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp48"
    android:background="@color/AppThemeBackground"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/title_left"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingLeft="@dimen/dp12"
            android:paddingRight="@dimen/dp12"
            android:src="@mipmap/ic_arrow_back_white_24dp"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/title_before"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingLeft="@dimen/dp12"
            android:paddingRight="@dimen/dp12"
            android:src="@mipmap/ic_navigate_before_white_24dp"
            android:visibility="gone" />

        <TextView
            android:id="@+id/title_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:singleLine="true"
            android:text="@string/app_name"
            android:textColor="@color/AppThemeTextColor"
            android:textSize="@dimen/sp18" />

        <ImageView
            android:id="@+id/title_next"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingLeft="@dimen/dp12"
            android:paddingRight="@dimen/dp12"
            android:src="@mipmap/ic_navigate_next_white_24dp"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/title_right"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingLeft="@dimen/dp12"
            android:paddingRight="@dimen/dp12"
            android:src="@mipmap/ic_refresh_white_24dp"
            android:visibility="visible" />
    </LinearLayout>

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp4"
        android:layout_alignParentBottom="true"
        android:progressDrawable="@drawable/webviewlayout_progressbar"
        style="@android:style/Widget.ProgressBar.Horizontal" />
</RelativeLayout>

progressbar的颜色Drawable
<?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="0dp" />
            <solid android:color="@color/AppThemeBackground" />
        </shape>
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="0dp" />
                <solid android:color="@color/webview_progress" />
            </shape>
        </clip>
    </item>

</layer-list>
<color name="AppThemeBackground">#1E8BF2</color>
<color name="webview_progress">#A7CEF2</color>

自定义属性放入attrs.xml里面
<declare-styleable name="WebViewLayout">
     <attr name="isUpdateTitle" format="boolean" />
     <attr name="isShowIconBack" format="boolean" />
     <attr name="isJavaScriptEnabled" format="boolean" />
</declare-styleable>>

WebViewLayout.java
/**
 * 自定义Webview页面
 * 我的博客：http://blog.csdn.net/sinat_25689603
 * 作者：yedongyang
 * created by ydy on 2016/7/15 9:32
 */
public class WebViewLayout extends LinearLayout {

    private LayoutInflater inflater;
    private View titleView;//头部
    private ProgressBar progressbar;//进度条
    private WebView webView;//网页

    private ImageView titleLeft;//返回
    private ImageView titleBefore;//返回前一个网页
    private TextView titleText;//标题
    private ImageView titleNext;//进入下一个网页
    private ImageView titleRight;//刷新

    private boolean isUpdateTitle;//是否根据网页改变title
    private boolean isShowIconBack;//是否显示上一页下一页图标
    private boolean isJavaScriptEnabled;//是否允许JavaScript
    private int titleHeight;//头部高度

    private WebViewCallBack callBack;//回调

    public WebViewLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public WebViewLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    @SuppressLint("SetJavaScriptEnabled")
    private void init(Context context, AttributeSet attrs) {
        setOrientation(LinearLayout.VERTICAL);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WebViewLayout);
        isUpdateTitle = typedArray.getBoolean(R.styleable.WebViewLayout_isUpdateTitle, false);
        isShowIconBack = typedArray.getBoolean(R.styleable.WebViewLayout_isShowIconBack, false);
        isJavaScriptEnabled = typedArray.getBoolean(R.styleable.WebViewLayout_isJavaScriptEnabled, false);
        typedArray.recycle();

        //添加头部
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        titleView = inflater.inflate(R.layout.webview_title_bar, null, false);
        titleView.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, ToolsUtil.dip2px(48)));
        titleLeft = (ImageView) titleView.findViewById(R.id.title_left);
        titleBefore = (ImageView) titleView.findViewById(R.id.title_before);
        titleText = (TextView) titleView.findViewById(R.id.title_text);
        titleNext = (ImageView) titleView.findViewById(R.id.title_next);
        titleRight = (ImageView) titleView.findViewById(R.id.title_right);
        progressbar = (ProgressBar) titleView.findViewById(R.id.progress);
        addView(titleView);

        //添加webview
        webView = new WebView(context);
        webView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        webView.getSettings().setJavaScriptEnabled(isJavaScriptEnabled);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());
        addView(webView);

        setTitleView();//设置标题栏
    }

    /**
     * 设置标题栏
     */
    private void setTitleView() {
        titleLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(callBack != null){callBack.backOnclick();}
            }
        });
        titleBefore.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.goBack();
            }
        });
        titleNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.goForward();
            }
        });
        titleRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.reload();
            }
        });
    }

    public class WebViewClient extends android.webkit.WebViewClient{
        @Override
        public void onPageFinished(WebView view, String url) {
            if (isUpdateTitle)
                titleText.setText(view.getTitle());

            boolean back = view.canGoBack();
            boolean forward = view.canGoForward();
            if (back || forward) {
                titleBefore.setVisibility(isShowIconBack && back ? View.VISIBLE : View.GONE);
                titleNext.setVisibility(isShowIconBack && forward ? View.VISIBLE : View.GONE);
            } else {
                titleBefore.setVisibility(View.GONE);
                titleNext.setVisibility(View.GONE);
            }
        }
    }

    public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                progressbar.setVisibility(GONE);
            } else {
                if (progressbar.getVisibility() == GONE)
                    progressbar.setVisibility(VISIBLE);
                progressbar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }

    }

    /**
     * 设置标题栏文字，只有在isUpdateTitle为false时有用
     */
    public void setTitleText(String text){
        if(!isUpdateTitle){
            titleText.setText(text);
        }
    }
    /**
     * 设置标题栏文字，只有在isUpdateTitle为false时有用
     */
    public void setTitleText(int textRes){
        if(!isUpdateTitle){
            titleText.setText(textRes);
        }
    }

    /**
     * 设置标题栏是否隐藏
     */
    public void setTitleVisibility(boolean isVisible){
        if(isVisible){
            titleView.setVisibility(View.VISIBLE);
        }else{
            titleView.setVisibility(View.GONE);
        }
    }

    /**
     * 加载网页
     * created by ydy on 2016/7/15 10:14
     */
    public void loadUrl(String url){
        webView.loadUrl(url);
    }

    public void setWebViewCallBack(WebViewCallBack callBack){
        this.callBack = callBack;
    }

    public interface WebViewCallBack{
        void backOnclick();
    }

    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        if(event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN && event.getRepeatCount() == 0){
            if(webView.canGoBack()){
                webView.goBack();
                return true;
            }
        }
        return super.dispatchKeyEvent(event);
    }
}

至于Activity页面和主布局页面都在上面。

带进度条的webview，支持网页前进和返回、刷新，返回键goBack等.

标签：

原文地址：http://blog.csdn.net/sinat_25689603/article/details/51917294
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！