带进度条的webview，支持网页前进和返回、刷新，返回键goBack等. - Go语言中文社区

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

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页面和主布局页面都在上面。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/sinat_25689603/article/details/51917294
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2020-04-19 10:07:49
  • 阅读 ( 1194 )
  • 分类：Go

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！