Android custom title bar: displays the webpage loading progress

This time, we were working on Lephone adaptation. The test group submitted a bug: the text in the title bar was not completely displayed for a long time. In fact, this was not a bug, this problem has not appeared on other machines in the past, but it is said that the Lephone platform is not very beautiful, because Lenovo modified the native title bar UI. The modification process encountered a difficult problem. The progress of the title bar that comes with the system can always reach 100% and then gradually recede, but each time I finally reach 100%, the Section is not shown completely, after trying to use a thread program to die and stick to the master, the effect was the same. Later, my colleague reminded me to use an animation. This is indeed the case. I guess this is also true for the system. After the Progress reaches 100%, it will be okay to change its transparency with an animation.

Effect: The title bar displays the webpage title and scrolls, And the webpage loading progress is displayed with a progress bar (the modified lephone includes a return button after the title bar is customized, and the title text and progress bar are not very nice in the Frame layout ).

1. First define a RelativeLayout layout file broser_custom_title.xml (the AlwaysMarqueeTextView class overwrites TextView to achieve a running horse lamp effect, which can be found online)

 
 

  
  
<?xml version="1.0" encoding="utf-8"?>  
  
  
<RelativeLayout  
  
  
  xmlns:android="http://schemas.android.com/apk/res/android" 
  
  
  android:layout_width="fill_parent" 
  
  
  android:layout_height="fill_parent">  
  
  
      <com.android.CustomTitleTest  
  
  
            android:id="@+id/tvtitle" 
  
  
            android:layout_width="fill_parent" 
  
  
            android:layout_height="wrap_content" 
  
  
 android:focusableInTouchMode="true" 
  
  
            android:singleLine="true" 
  
  
 android:ellipsize="marquee" 
  
  
            android:focusable="false" 
  
  
 android:marqueeRepeatLimit="marquee_forever" 
  
  
            android:textSize="20sp" 
  
  
 android:layout_centerVertical="true"/>  
  
  
    <ProgressBar android:id="@+id/pb" 
  
  
         android:layout_width="fill_parent" 
  
  
 android:layout_height="wrap_content" 
  
  
        style="?android:attr/progressBarStyleHorizontal" 
  
  
        android:visibility="gone" 
  
  
 android:layout_alignParentBottom="true" 
  
  
 
  
  
                ></ProgressBar>  
  
  
</RelativeLayout> 
 
 

2. inherit from WebChromeClient, and rewrite the onProgressChanged and onReceivedTitle events (use the animation to fade away after the progress bar is loaded)

 
 

  
  
Public class MyWebChromeClient extends WebChromeClient {
  
  
Private Activity;
  
  
Private ProgressBar pb;
  
  
Private TextView tvtitle;
  
  
Public MyWebChromeClient (Activity activity ){
  
  
This. activity = activity;
  
  
}
  
  
Animation animation;
  
  
@ Override
  
  
Public void onProgressChanged (WebView view, int newProgress ){
  
  
Pb = (ProgressBar) activity. findViewById (R. id. pb );
  
  
Pb. setMax (100 );
  
  
If (newProgress <100 ){
  
  
If (pb. getVisibility () = View. GONE)
  
  
Pb. setVisibility (View. VISIBLE );
  
  
Pb. setProgress (newProgress );
  
  
} Else {
  
  
Pb. setProgress (100 );
  
  
Animation = AnimationUtils. loadAnimation (activity, R. anim. animation );
  
  
// Run the animation
  
  
Pb. startAnimation (animation );
  
  
// Sets the visibility of the spinner to invisible.
  
  
Pb. setVisibility (View. INVISIBLE );
  
  
}
  
  
Super. onProgressChanged (view, newProgress );
  
  
}
  
  
@ Override
  
  
Public void onReceivedTitle (WebView view, String title ){
  
  
Tvtitle = (TextView) activity. findViewById (R. id. tvtitle );
  
  
Tvtitle. setText (title );
  
  
Super. onReceivedTitle (view, title );
  
  
}
  
  
}
 
 

3. animation style res/anim/animation. xml of the progress bar

 
 

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

4. Set the custom title bar with codes

 
 

  
  
private WebView browser;  
  
  
@Override 
  
  
public void onCreate(Bundle savedInstanceState)  
  
  
      super.onCreate(savedInstanceState);  
  
  
    getWindow().requestFeature(Window.FEATURE_CUSTOM_TITLE);  
  
  
    setContentView(R.layout.main);  
  
  
    getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.broser_custom_title);  
  
  
    browser = (WebView) findViewById(R.id.my_browser);  
  
  
    // currentWebView=browser;  
  
  
    browser.setWebChromeClient(new MyWebChromeClient(Main.this));  
  
  
    browser.loadUrl("http://www.163.com");  
  
  
}