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

时间：2018-06-14 编辑：猪哥来源：一聚教程网

前言：

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

详细实现步骤如下：

1、自定义一个ProgressWebView 继续 Webview

@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 {
  @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、设置R.drawable.btn_progress_webview 进度条的颜色值：

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

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

public class MainActivity extends Activity {
 private ProgressWebView progresswebview;

 @Override
 protected 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() {

  @Override
  public void onPageFinished(WebView view, String url) {
   super.onPageFinished(view, url);
   progresswebview.getSettings().setLoadsImagesAutomatically(true);
  }

  @Override
  public 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); 
   }else
    view.loadUrl(url);


   return true;
  }

  public void onReceivedError(WebView view, int errorCode,
    String description, String failingUrl) {

  }

 };

}

通过这几个步骤，就是实现跟微信公众号文章详情页显示的进度条一致了。

效果图：