1. 程式人生 > >Android自定義標題欄:顯示網頁載入進度

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="http://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.                 ></ProgressBar>  
  24. </RelativeLayout> 

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

  1. publicclass 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. publicvoid 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. publicvoid onReceivedTitle(WebView view, String title) {  
  29.         tvtitle=(TextView)activity.findViewById(R.id.tvtitle);  
  30.         tvtitle.setText(title);  
  31. super.onReceivedTitle(view, title);  
  32.     }  

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

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns:android="http://schemas.android.com/apk/res/android">
  3. <alphaandroid:fromAlpha="1.0"android:toAlpha="0.0"android:duration="700"/>
  4. </set>

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

  1. private WebView browser;  
  2. @Override
  3. publicvoid 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("http://www.163.com");