The implementation of the WebView with line progress bar when loading Web pages on WeChat, And the progress bar webview

Simulate the implementation of the WebView with line progress bar when loading a webpage, And the progress bar webview

Finddreams: http://blog.csdn.net/finddreams/article/details/44172639
To simulate the implementation of the WebView with a progress bar when loading a webpage, Let's first look at the effect:

After clarifying the requirements, let's start with the manual work. First, we will define a WebView with a progress bar, named ProgressWebView:

/*** @ Description: WebView with progress bar * @ 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 (); // whether getSettings () can be scaled (). setsuppzoom zoom (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 );}}

From this class, we can see that we add a horizontal ssssbar to the custom WebView, and then set progressDrawable for this progressbar, which is a key point:

 Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);         progressbar.setProgressDrawable(drawable);

Let's take a look at how progress_bar_states.xml in the drawable directory is written:

<? Xml version = "1.0" encoding = "UTF-8"?> <! -- Cascade --> <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> this label may not be very familiar to us, because we generally use the <shape> and <selector> labels, layer-list is to combine multiple images or the two effects above in order, the layer is just like the layers in photoshop. There is a <clip> label, which can be used to cut and display images. For example, it can be used for progress. You can select to load data horizontally or vertically. After you define ProgressWebView, you only need to declare it in the xml layout file:

   <?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> 

Then we define a BaseWebActivity to display our custom 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);        }    }}

Then you can call this Activity, for example:

/** * @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);    }}

Well, here you should learn how to make the WebView with the line progress bar!