Android仿微信公众号文章页面加载进度条

本文主要是介绍Android仿微信公众号文章页面加载进度条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：

微信公众号文章详情页面加载的时候，WebView会在头部显示一个进度条，这样做的好处就是用户可以一边加载网页内容的同时也可浏览网页内容，不需要等完全加载完之后才全部显示出来。如何实现呢？其实很简单，自定义一个WebView就可以实现了。

详细实现步骤如下：

1、自定义一个ProgressWebView 继续 Webview

代码语言：javascript

复制

@SuppressWarnings("deprecation")
public class ProgressWebView extends WebView {private ProgressBar progressbar;public ProgressWebView(Context context) {super(context);init(context);}private void init(Context context) {progressbar = new ProgressBar(context, null,android.R.attr.progressBarStyleHorizontal);progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,6, 0, 0));progressbar.setProgressDrawable(this.getResources().getDrawable(R.drawable.btn_progress_webview));addView(progressbar);setWebChromeClient(new WebChromeClient());}public ProgressWebView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public class WebChromeClient extends android.webkit.WebChromeClient {@Overridepublic 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);}}@Overrideprotected 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、设置R.drawable.btn_progress_webview 进度条的颜色值：

代码语言：javascript

复制

<?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 <!-- 进度条的四个棱角大小 0 为都是直角 随着值的增大角越圆滑 -- <corners android:radius="0dip" / <gradientandroid:endColor="#c0c0c0"android:startColor="#c0c0c0" / </shape </item <!-- 设置进度条颜色（绿色） -- <item android:id="@android:id/progress" <clip <shape <corners android:radius="0dip" / <gradientandroid:endColor="#a13864"android:startColor="#a13864" / </shape </clip </item </layer-list

3、在布局文件是如何使用呢？

代码语言：javascript

复制

<RelativeLayout 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"tools:context="com.summer.progresswebview.MainActivity"  <com.summer.progresswebview.ProgressWebViewandroid:id="@+id/progresswebview"android:layout_width="fill_parent"android:layout_height="fill_parent"/ </RelativeLayout

4、在Activity中是如何使用和显示网页内容的：

代码语言：javascript

复制

public class MainActivity extends Activity {private ProgressWebView progresswebview;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {progresswebview = (ProgressWebView) findViewById(R.id.progresswebview);progresswebview.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);progresswebview.getSettings().setJavaScriptEnabled(true);progresswebview.getSettings().setSupportZoom(true);progresswebview.getSettings().setLoadWithOverviewMode(true);progresswebview.getSettings().setUseWideViewPort(true);progresswebview.setVerticalScrollBarEnabled(false);progresswebview.setHorizontalScrollBarEnabled(false);// 水平不显示progresswebview.getSettings().setBuiltInZoomControls(true); // 支持页面放大缩小按钮progresswebview.setWebViewClient(client);progresswebview.loadUrl("https://www.baidu.com/"); // 加载百度首页网址}private WebViewClient client = new WebViewClient() {@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);progresswebview.getSettings().setLoadsImagesAutomatically(true);}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);}public boolean shouldOverrideUrlLoading(WebView view, String url) {//调用拨号程序 if (url.startsWith("mailto:") || url.startsWith("geo:") ||url.startsWith("tel:")) { Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); startActivity(intent); }elseview.loadUrl(url);return true;}public void onReceivedError(WebView view, int errorCode,String description, String failingUrl) {}};}