309      阿裏雲  技術社區[雲棲]

Android自定義標題欄：顯示網頁加載進度

這陣子在做Lephone的適配，測試組提交一個bug：標題欄的文字較長時沒有顯示完全，其實這並不能算個bug，並且這個問題在以前其他機器也沒有出現，隻是說在Lephone的這個平台上顯示得不怎麼美觀，因為聯想將原生的標題欄UI進行了修改。修改的過程中遇到了一個難題，係統自帶的那個標題欄進度總能夠到達100%後漸退，但是我每次最後到100%那一段顯示不全，嚐試了用線程程序死了卡主了不說，還是一樣的效果，後來同事一句話提醒了我用動畫。確實是這樣我猜係統的也是這樣實現的，等進度到達100%後，用動畫改變它的透明度就ok了。

實現的效果：標題欄顯示網頁標題並且滾動，並且用進度條顯示網頁的加載進度(重新自定義標題欄，lephone修改後的都帶有一個返回按鈕，並且標題文本和進度條是Frame布局的不怎麼好看)。

1、首先定義一個RelativeLayout布局文件 broser_custom_title.xml (AlwaysMarqueeTextView這個類重寫了TextView，實現一個跑馬燈的效果，網上能夠找到)

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout  
3.   xmlns:android="https://schemas.android.com/apk/res/android" 
4.   android:layout_width="fill_parent" 
5.   android:layout_height="fill_parent">  
6.       <com.android.CustomTitleTest  
7.             android:id="@+id/tvtitle" 
8.             android:layout_width="fill_parent" 
9.             android:layout_height="wrap_content" 
10.  android:focusableInTouchMode="true" 
11.             android:singleLine="true" 
12.  android:ellipsize="marquee" 
13.             android:focusable="false" 
14.  android:marqueeRepeatLimit="marquee_forever" 
15.             android:textSize="20sp" 
16.  android:layout_centerVertical="true"/>  
17.     <ProgressBar android:id="@+id/pb" 
18.          android:layout_width="fill_parent" 
19.  android:layout_height="wrap_content" 
20.         style="?android:attr/progressBarStyleHorizontal" 
21.         android:visibility="gone" 
22.  android:layout_alignParentBottom="true" 
23.  
24.                 ></ProgressBar>  
25. </RelativeLayout> 

.android.customtitletest>

2、繼承WebChromeClient,重寫onProgressChanged和onReceivedTitle事件(進度條加載完成後使用動畫漸退)

1. public class MyWebChromeClient extends WebChromeClient {  
2.     private Activity activity;  
3.     private ProgressBar pb;  
4.     private TextView tvtitle;  
5.     public MyWebChromeClient(Activity activity) {  
6.         this.activity = activity;  
7.     }  
8.     Animation animation;  
9.       @Override 
10.     public void onProgressChanged(WebView view, int newProgress) {  
11.         pb=(ProgressBar)activity.findViewById(R.id.pb);  
12.         pb.setMax(100);  
13.         if(newProgress<100){  
14.             if(pb.getVisibility()==View.GONE)  
15.                 pb.setVisibility(View.VISIBLE);  
16.             pb.setProgress(newProgress);  
17.         }else{  
18.             pb.setProgress(100);  
19.             animation=AnimationUtils.loadAnimation(activity, R.anim.animation);  
20.             // 運行動畫 animation  
21.               pb.startAnimation(animation);  
22.               // 將 spinner 的可見性設置為不可見狀態  
23.               pb.setVisibility(View.INVISIBLE);  
24.          }  
25.                 super.onProgressChanged(view, newProgress);  
26.     }  
27.     @Override 
28.     public void onReceivedTitle(WebView view, String title) {  
29.         tvtitle=(TextView)activity.findViewById(R.id.tvtitle);  
30.         tvtitle.setText(title);  
31.         super.onReceivedTitle(view, title);  
32.     }  
33. } 

3、進度條的動畫樣式 res/anim/animation.xml

1. <?xml version="1.0" encoding="utf-8"?> 
2.     <set xmlns:android="https://schemas.android.com/apk/res/android"> 
3.          <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="700"/> 
4.    </set> 

4、碼設置自定義的標題欄

1. private WebView browser;  
2. @Override 
3. public void onCreate(Bundle savedInstanceState)  
4.       super.onCreate(savedInstanceState);  
5.     getWindow().requestFeature(Window.FEATURE_CUSTOM_TITLE);  
6.     setContentView(R.layout.main);  
7.     getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.broser_custom_title);  
8.     browser = (WebView) findViewById(R.id.my_browser);  
9.     // currentWebView=browser;  
10.     browser.setWebChromeClient(new MyWebChromeClient(Main.this));  
11.     browser.loadUrl("https://www.163.com");  
12. } 

最後更新：2017-04-02 06:51:45

  上一篇： android中的圖形圖像-訪問圖片drawable

  下一篇： 單態設計模式