前言：
微信公眾號(hào)文章詳情頁(yè)面加載的時(shí)候，WebView會(huì)在頭部顯示一個(gè)進(jìn)度條，這樣做的好處就是用戶可以一邊加載網(wǎng)頁(yè)內(nèi)容的同時(shí)也可瀏覽網(wǎng)頁(yè)內(nèi)容，不需要等完全加載完之后才全部顯示出來(lái)。如何實(shí)現(xiàn)呢？ 其實(shí)很簡(jiǎn)單，自定義一個(gè)WebView就可以實(shí)現(xiàn)了。
詳細(xì)實(shí)現(xiàn)步驟如下 ：
1、自定義一個(gè)ProgressWebView 繼續(xù) Webview
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
@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、設(shè)置R.drawable.btn_progress_webview 進(jìn)度條的顏色值：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 設(shè)置背景色（黑色） --> <item android:id="@android:id/background"> <shape> <!-- 進(jìn)度條的四個(gè)棱角大小 0 為都是直角 隨著值的增大角越圓滑 --> <corners android:radius="0dip" /> <gradient android:endColor="#c0c0c0" android:startColor="#c0c0c0" /> </shape> </item> <!-- 設(shè)置進(jìn)度條顏色（綠色） --> <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、在布局文件是如何使用呢？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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)頁(yè)內(nèi)容的 ：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
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); // 支持頁(yè)面放大縮小按鈕 progresswebview.setWebViewClient(client); progresswebview.loadUrl("https://www.baidu.com/"); // 加載百度首頁(yè)網(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)用撥號(hà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) { } };} |
通過(guò)這幾個(gè)步驟，就是實(shí)現(xiàn)跟微信公眾號(hào)文章詳情頁(yè)顯示的進(jìn)度條一致了。
效果圖：
源碼下載：Android微信頁(yè)面加載進(jìn)度條
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/zouzhigang96/article/details/50548792
