"Interface optimization" using Viewpagerindicator to add underline to slide animation

Open source code Viewpagerindicator inside does not implement the tab underline in the process of moving animation, are very abrupt switching between multiple fragement, resulting in a slightly poor user experience, Google the related issues, found a blog:

The http://blog.csdn.net/lancees/article/details/9164421 focus is the following code:

 Public classUnderlinepageindicatorexextendsunderlinepageindicator{ PublicUnderlinepageindicatorex (Context context) {Super(Context,NULL); }         PublicUnderlinepageindicatorex (Context context, AttributeSet attrs) {Super(context, attrs, R.attr.vpiunderlinepageindicatorstyle); }         PublicUnderlinepageindicatorex (context context, AttributeSet attrs,intDefstyle) {            Super(context, attrs, Defstyle); } @Override Public voidSetviewpager (Viewpager viewpager) {if(Mviewpager = =Viewpager) {                return; }//if (Mviewpager! = null) {//                //Clear US from the old pager.//mviewpager.setonpagechangelistener (null);//            }            if(Viewpager.getadapter () = =NULL) {                Throw NewIllegalStateException ("Viewpager does not has adapter instance."); } Mviewpager=Viewpager;//Mviewpager.setonpagechangelistener (this);invalidate (); Post (NewRunnable () {@Override Public voidrun () {if(Mfades) {post (mfaderunnable);        }                }            }); }}

Underlinepageindicator isViewpagerindicator inside the Open source code:

/** * Draws a line for each page. The current page is colored differently* than the unselected page lines. */

 Draw a line for each page so that the line color differs from the other page that is not selected. Here are some of the steps I've modified in my project and the points to note: 1 Modifying the style file: You must have the following style in the activity of the control that you use this open source Library

1.  android:theme="@style/StyledIndicators"，对应styles文件下面：

1. <!--below the style with the Horizontal tab -    <stylename= "Styledindicators"Parent= "@android: Style/theme.light">        <Itemname= "Vpitabpageindicatorstyle">@style/customtabpageindicator</Item>    </style>    <stylename= "Customtabpageindicator"Parent= "Widget.tabpageindicator">        <!--<item name= "Android:background" > @drawable/tab_indicator</item> -        <Itemname= "Android:background">#00000000</Item>        <Itemname= "Android:textappearance">@style/customtabpageindicator.text</Item>        <Itemname= "Android:textsize">14sp</Item>        <Itemname= "Android:textcolor">@drawable/viewpager_title_textcolor</Item>        <Itemname= "Android:dividerpadding">8dp</Item>        <Itemname= "Android:showdividers">Middle</Item>        <Itemname= "Android:paddingleft">10dp</Item>        <Itemname= "Android:paddingright">10dp</Item>        <Itemname= "Android:fadingedge">Horizontal</Item>        <Itemname= "Android:fadingedgelength">8dp</Item>    </style>

   


The original background primarily defines the tab switch when the slide

2. <name= "Android:background">@drawable/tab_indicator</  Item>

   The XML code to switch in the corresponding drawable:

3. <selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_selected= "false"android:state_pressed= "false"android:drawable= "@android: Color/transparent" />    <Itemandroid:state_selected= "false"android:state_pressed= "true"android:drawable= "@android: Color/transparent" />         <Itemandroid:state_selected= "true"android:state_pressed= "false"android:drawable= "@drawable/base_tabpager_indicator_selected" />    <Itemandroid:state_selected= "true"android:state_pressed= "true"android:drawable= "@drawable/base_tabpager_indicator_selected" /></selector>

whichThe base_tabpager_indicator_selected is underlined. 9 PicsNow change the background inside the style file to:

< ItemName = "Android:background" >#00000000</item>

Then the main is to modify the layout, mainly to addUnderlinepageindicatorex Layout:

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:tools= "Http://schemas.android.com/tools"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:orientation= "vertical" >    <Com.soyoungboy.view.viewpagerindicator.TabPageIndicatorAndroid:id= "@+id/indicator"Android:layout_width= "Fill_parent"Android:layout_height= "45DP"Android:background= "@color/white" />    <com.soyoungboy.view.viewpagerindicator.UnderlinePageIndicatorExAndroid:id= "@+id/underline_indicator"Android:layout_width= "Fill_parent"Android:layout_height= "3DP"         />    <Android.support.v4.view.ViewPagerAndroid:id= "@+id/viewpager"Android:layout_width= "Match_parent"Android:layout_height= "0DP"Android:layout_weight= "1" /></LinearLayout>

And then there is the code inside the changes:

1. private Underlinepageindicatorex munderlinepageindicator;   // 2, the Code implementation part Munderlinepageindicator = (Underlinepageindicatorex) Findviewbyid (r.id.underline_indicator);        Munderlinepageindicator.setviewpager (Viewpager);        Munderlinepageindicator.setfades (false);        Indicator.setonpagechangelistener (munderlinepageindicator);

So, OK, perfect solution, tab underline to achieve the effect of sliding with the switch

"Interface optimization" using Viewpagerindicator to add underline to slide animation