當我們使用瀏覽器瀏覽網頁時，總會看到下圖頁面的樣子，上面是一個地址欄，地址欄下面顯示加載進度，加載完成后進入頁面內容，帶顏色的進度條總是少不了的，那樣子看起來也舒服，如何實現自定義手機瀏覽器功能呢？
上面是360瀏覽器加載過程的截圖，看起來也不算復雜，在做安卓開發中，經常要用到瀏覽器加載HTML的頁面，於是想做一個demo，避免每次重復寫的麻煩，效果圖如下：
第一步：自定義WebView，命名ProgressWebView，在自定義ProgressWebView中添加進度條效果，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
public
ProgressWebView(Context context, AttributeSet attrs) {
super
(context, attrs);
progressbar =
new
ProgressBar(context,
null
,
android.R.attr.progressBarStyleHorizontal);
progressbar.setLayoutParams(
new
LayoutParams(LayoutParams.FILL_PARENT,
10
,
0
,
0
));
Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);
progressbar.setProgressDrawable(drawable);
addView(progressbar);
// setWebViewClient(new WebViewClient(){});
setWebChromeClient(
new
WebChromeClient());
//是否支持縮放
getSettings().setSupportZoom(
true
);
getSettings().setBuiltInZoomControls(
true
);
}
|
在這個構造方法里面，自定義進度條屬性，設置為水平進度條，進度條的高度，同時定義進度條狀態顏色，寫在progress_bar_states.xml文件中，代碼如下：
|
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
|
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background">
<shape>
<corners android:radius="2dp" />
<gradient
android:angle="270"
android:centerColor="#E3E3E3"
android:endColor="#E6E6E6"
android:startColor="#C8C8C8" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="2dp" />
<gradient
android:centerColor="#4AEA2F"
android:endColor="#31CE15"
android:startColor="#5FEC46" />
</shape>
</clip>
</item>
</layer-list>
|
在這個xml文件中，可以按照自己喜好設置加載顏色，然后把進度條視圖添加到WebView視圖中，在使用ProgressWebView加載 HTML網頁，可以像360瀏覽器一樣顯示加載進度。setWebChromeClient(new WebChromeClient())用於加載請求的網頁，支持進度條、js等效果，這里定義一個內部類WebChromeClient，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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);
}
}
|
這兩個getSettings().setSupportZoom(true)和getSettings().setBuiltInZoomControls(true)設置是否支持縮放。
第二步：定義顯示類，命名ProgressWebActivity.java，布局文件命名main_web.xml，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<include
android:id="@+id/head_views_main"
layout="@layout/head_re" />
<com.sinolvc.zspg.view.ProgressWebView
android:id="@+id/baseweb_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fadeScrollbars="true"
android:scrollbarStyle="insideOverlay" />
</LinearLayout>
|
ProgressWebActivity.java代碼：
|
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
|
public
class
ProgressWebActivity
extends
BaseActivity {
protected
ProgressWebView mWebView;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_baseweb);
mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);
mWebView.getSettings().setJavaScriptEnabled(
true
);
initData();
initTitleView(getWindow().getDecorView(),R.string.load_news_detail_info,ProgressWebActivity .
this
);
finishMySelf();
}
private
void
finishMySelf(){
backll.setOnClickListener(
new
OnClickListener() {
@Override
public
void
onClick(View v) {
ProgressWebActivity .
this
.finish();
}
});
}
protected
void
initData() {
Intent intent = getIntent();
Bundle bundle = intent.getExtras();
String url = bundle.getString(
"url"
);
if
(!TextUtils.isEmpty(url)&&!TextUtils.isEmpty(title)){
mWebView.loadUrl(url);
}
}
@Override
protected
void
onDestroy() {
// TODO Auto-generated method stub
super
.onDestroy();
mWebView =
null
;
}
}
|
initData方法獲取上一個Activity傳遞過來的Intent數據，取出網頁URL，判斷連接是否為空，如果不為空，則使用自定義的ProgressWebView的loadUrl()方法加載，這個時候我們將會在APP端看到如下效果：
initTitleView用於設置瀏覽器頂部導航條，顯示返回按鈕和瀏覽新聞文字。
第三步：在需要使用自定義瀏覽器這個類ProgressWebActivity的地方，我們只需要設置Intent的數據，然后啟動ProgressWebActivity加載之定義URL，實現帶進度條加載指定頁面的功能。
|
1
2
3
4
5
6
7
8
|
Bundle bundle = new Bundle();
bundle.putString("url", "http://www.teachcourse.cn");
bundle.putString("title", "做最好的源碼分享網站");
Intent intent = new Intent(getContext(), ProgressWebActivity.class);
intent.putExtras(bundle);
startActivity(intent);
|
到這里，我們使用ProgressBar+WebView自定義瀏覽器器的功能基本完成！