当我们使用浏览器浏览网页时，总会看到下图页面的样子，上面是一个地址栏，地址栏下面显示加载进度，加载完成后进入页面内容，带颜色的进度条总是少不了的，那样子看起来也舒服，如何实现自定义手机浏览器功能呢？
上面是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:andro > <item android:>
<shape>
<corners android:radius="2dp" />
<gradient
android:angle="270"
android:centerColor="#E3E3E3"
android:endColor="#E6E6E6"
android:startColor="#C8C8C8" />
</shape>
</item>
<item android:>
<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:andro android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<include
android:
layout="@layout/head_re" />
<com.sinolvc.zspg.view.ProgressWebView
android:
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自定义浏览器器的功能基本完成！