仿微信中加载网页时带线行进度条的WebView的实现

finddreams: 为了仿微信中加载网页时带进度条的WebView的实现,首先我们来看一下微信中的效果是什么样的:

明确需求之后,我们来开始动手做,首先我们来自定义一个带进度条的WebView,名字为ProgressWebView: /** * @Description:带进度条的WebView * @author */ @SuppressWarnings(“deprecation”){private ProgressBar progressbar;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);}.(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);}}(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);}} 从这个类中可以看出,我们在自定义的WebView中加入了一个水平方向的progressbar,,然后为这个progressbar设置progressDrawable,这是一个很关键的地方: Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states); progressbar.setProgressDrawable(drawable);下面我们来看一下drawable目录下的progress_bar_states.xml是如何写的: ===”2dp” /><gradient=>=><corners android:radius=”2dp” /><gradient=></item></layer-list><layer-list>这个标签可能我们不是很熟悉,因为我们一般常用的就是<shape>和<selector>这两个,layer-list是将多个图片或上面两种效果按照顺序层叠起来,layer就像photoshop中的图层一样。其中有个<clip>标签,是可以用来剪载图片显示,例如,可以通过它来做进度度。你可以选择是从水平或垂直方向剪载。自定义好ProgressWebView之后,我们只需要在xml布局文件中声明就可以使用了: ==”match_parent”android:orientation=”vertical” ><com.finddreams.progresswebview.ProgressWebView=”match_parent”/></LinearLayout> 接着我们定义一个BaseWebActivity来显示我们自定义的WebView:/** * @Description:WebActivity * @author */ {// private View mLoadingView;protected ProgressWebView mWebView;private ProgressBar web_progressbar;(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.activity_baseweb);// mLoadingView = findViewById(R.id.baseweb_loading_indicator);mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);mWebView.getSettings().setJavaScriptEnabled(true);initData();}() {Intent intent = getIntent();String url = intent.getStringExtra(“url”);if(url!=null){mWebView.loadUrl(url);}}}然后调用这个Activity即可,例如:/** * @Description: * @author */ {(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}(View v){Intent intent =new Intent(this,BaseWebActivity.class);intent.putExtra(“url”, “http://blog.csdn.net/finddreams/article/details/43486527”);// intent.putExtra(“url”, “http://www.baidu.com”);startActivity(intent);}}

好吧,到这里你应该学会怎么做带线行进度条的WebView了吧!

孤单不是与生俱来,而是由你爱上一个人的那一刻开始。

仿微信中加载网页时带线行进度条的WebView的实现

相关文章:

你感兴趣的文章:

标签云: