Android开发:仿照微信6的内置WebView控件

本文介绍了一款仿微信6内置WebView控件的实现,具备顶部进度条展示加载进度、网页只在控件内显示、手势缩放、双击缩放以及后退功能。提供源代码下载链接,适配Android Studio。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在工作当中,需要实现在APP里面打开网页,于是仿照微信的浏览网页的页面,写出了这个Webview控件,有以下功能:


1、在加载网页的时候,顶部有一个进度条,显示当前加载进度;

2、设置了所有的页面都在该控件中显示,不调用其他的浏览器;

3、支持手势放大缩小;

4、支持双击屏幕放大缩小;

5、按后退按钮,回到上一个网页;




现在开始代码:

1、自定义一个webview,并在里面做好相关的设置:

public class MyWebView extends WebView {
    private ProgressBar progressbar;
    private Context mContext;

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
//        progressbar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
        progressbar = (ProgressBar) LayoutInflater.from(context).inflate(R.layout.progressbar, null);
        progressbar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 6, 0, 0));
        addView(progressbar);
        //        setWebViewClient(new WebViewClient(){});
        setWebChromeClient(new WebChromeClient());
        setWebViewClient(new WebViewClient(){
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(mContext, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });
        this.getSettings().setBuiltInZoomControls(true);
        this.getSettings().setUseWideViewPort(true);
    }

    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
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        LayoutParams lp = (LayoutParams) progressbar.getLayoutParams();
        lp.x = l;
        lp.y = t;
        progressbar.setLayoutParams(lp);
        super.onScrollChanged(l, t, oldl, oldt);
    }
}

2、期中的progressBar的xml文件如下:

<?xml version="1.0" encoding="utf-8"?>

<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="50"
android:progressDrawable="@drawable/greenprogress" />

3、在activity中引用MyWebView控件:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity"
    tools:ignore="MergeRootFrame" >
    <com.weidongjian.weigan.webviewdemo.MyWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.weidongjian.weigan.webviewdemo.MyWebView>
    </FrameLayout>

4、activity的设置:

private MyWebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        webView = (MyWebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://www.baidu.com/");
    }

 @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

其中的onKeyDown的目的就是为了实现按后退按钮,返回到之前的页面


最后,附上源代码,欢迎参阅(源代码用android studio写的,请注意)。

源码下载链接


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值