码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!