Android仿微信公眾號文章頁面加載進度條

2019-10-22 18:09:54

字體：大中小

供稿：網(wǎng)友

前言：

微信公眾號文章詳情頁面加載的時候，WebView會在頭部顯示一個進度條，這樣做的好處就是用戶可以一邊加載網(wǎng)頁內(nèi)容的同時也可瀏覽網(wǎng)頁內(nèi)容，不需要等完全加載完之后才全部顯示出來。如何實現(xiàn)呢？其實很簡單，自定義一個WebView就可以實現(xiàn)了。

詳細實現(xiàn)步驟如下：

1、自定義一個ProgressWebView 繼續(xù) 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 進度條的顏色值：

<?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" />   <gradient    android:endColor="#c0c0c0"    android:startColor="#c0c0c0" />  </shape> </item> <!-- 設置進度條顏色（綠色） --> <item android:id="@android:id/progress">  <clip>   <shape>    <corners android:radius="0dip" />    <gradient     android:endColor="#a13864"     android:startColor="#a13864" />   </shape>  </clip> </item></layer-list>

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

<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.ProgressWebView  android:id="@+id/progresswebview"  android:layout_width="fill_parent"  android:layout_height="fill_parent"/></RelativeLayout>

4、在Activity中是如何使用和顯示網(wǎng)頁內(nèi)容的：

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/"); // 加載百度首頁網(wǎng)址 }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) {    //調(diào)用撥號程序    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) {  } };}

通過這幾個步驟，就是實現(xiàn)跟微信公眾號文章詳情頁顯示的進度條一致了。

效果圖：

Android,微信公眾號,加載,進度條