finddreams:http://blog.csdn.net/finddreams/article/details/44172639
为了仿微信中加载网页时带进度条的WebView的实现,首先我们来看一下微信中的效果是什么样的:
明确需求之后,我们来开始动手做,首先我们来自定义一个带进度条的WebView,名字为ProgressWebView:
/**
* @Description:带进度条的WebView
* @author http://blog.csdn.net/finddreams
*/
@SuppressWarnings("deprecation")
public class ProgressWebView extends WebView {
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);
}
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);
}
}
从这个类中可以看出,我们在自定义的WebView中加入了一个水平方向的progressbar,然后为这个progressbar设置progressDrawable,这是一个很关键的地方:
Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);
progressbar.setProgressDrawable(drawable);
下面我们来看一下drawable目录下的progress_bar_states.xml是如何写的:
<?xml version="1.0" encoding="utf-8"?>
<!-- 层叠 -->
<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>
<layer-list>这个标签可能我们不是很熟悉,因为我们一般常用的就是<shape>和<selector>这两个,layer-list是将多个图片或上面两种效果按照顺序层叠起来,layer就像photoshop中的图层一样。
其中有个<clip>标签,是可以用来剪载图片显示,例如,可以通过它来做进度度。你可以选择是从水平或垂直方向剪载。
自定义好ProgressWebView之后,我们只需要在xml布局文件中声明就可以使用了:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.finddreams.progresswebview.ProgressWebView
android:id="@+id/baseweb_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
接着我们定义一个BaseWebActivity来显示我们自定义的WebView:
/**
* @Description:WebActivity
* @author http://blog.csdn.net/finddreams
*/
public class BaseWebActivity extends Activity {
// private View mLoadingView;
protected ProgressWebView mWebView;
private ProgressBar web_progressbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.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();
}
private void initData() {
Intent intent = getIntent();
String url = intent.getStringExtra("url");
if(url!=null){
mWebView.loadUrl(url);
}
}
}
然后调用这个Activity即可,例如:
/**
* @Description:
* @author http://blog.csdn.net/finddreams
*/
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void openUrl(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了吧!