摘要:
当我们使用浏览器浏览网页时,总会看到下图页面的样子,上面是一个地址栏,地址栏下面显示加载进度,加载完成后进入页面内容,带颜色的进度条总是少不了的,那样子看起来也舒服,如何实现自定义手机浏览器功能呢?
上面是360浏览器加载过程的截图,看起来也不算复杂,在做安卓开发中,经常要用到浏览器加载HTML的页面,于是想做一个demo,避免每次重复写的麻烦,效果图如下:
第一步:自定义WebView,命名ProgressWebView,在自定义ProgressWebView中添加进度条效果,代码如下:
- 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文件中,代码如下:
- <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,代码如下:
- 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,代码如下:
- <?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
- 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,实现带进度条加载指定页面的功能。
- Bundle bundle = new Bundle();
- bundle.putString("url", "https://www.teachcourse.cn");
- bundle.putString("title", "源码分享网站");
- Intent intent = new Intent(getContext(), ProgressWebActivity.class);
- intent.putExtras(bundle);
- startActivity(intent);
到这里,我们使用ProgressBar+WebView自定义浏览器器的功能基本完成!
你可能感兴趣的文章
转载请注明出处: https://www.teachcourse.cn/634.html ,谢谢支持!