Android realizes the sliding effect of the imitation micro-letter tab highlighting the stick of the icon _android

Micro-letter Homepage is divided into 3 tab, selected tab Tabwidget below will have a highlighted long icon, and when the tab page is switched, this icon is not wait until the tab switch is complete and then appear in the currently selected tab of the Tabwidget below, Instead, it will slide as the Viewpager slide the page, once a tabwidget slide to the currently selected Tabwidget, like Viewpager has a sticky effect on your hand, and the experience is amazing. Last diagram:

This article analyzes how to achieve this effect.

First of all, the basic knowledge is that the implementation of different tabs can be sliding between the need to use Tabpageindicator + Viewpager, where Tabpageindicator is an open source control, Viewpager is the control inside the Android SUPPORT.V4 package. This implementation is not described here, there are many examples on the web. This article mainly realizes the sticky hand effect of the highlight icon.

First look at the layout:

  <relativelayout
    android:layout_width= "match_parent"
    android:layout_height= "@dimen/height_56" >

    <com.widget.tabpageindicator
      android:id= "@+id/indicator"
      android:layout_width= "Fill_parent"
      android:layout_height= "@dimen/height_56"
      android:background= "@drawable/base_action_bar_bg"/>
    <imageview
      android:id= "@+id/highlight_tab_iv"
      android:layout_height= "Wrap_content"
      android: Layout_width= "90DP"
      android:background= "@drawable/base_tabpager_indicator_selected"
      android:layout_ Alignparentbottom= "true"/>

  </RelativeLayout>

As the above code, highlighting the icon with a imageview to achieve this imageview is the highlight of the long icon.

And then, for this imageview, we need to initialize it to calculate its width, to ensure that it is as wide as the width of a single tabwidget:

     Mhltabiv = (ImageView) Findviewbyid (R.ID.HIGHLIGHT_TAB_IV);
    Relativelayout.layoutparams mparams =
        (relativelayout.layoutparams) mhltabiv.getlayoutparams ();
    Mparams.width = Getscreenwidth ()/tabcount;
    Mtabviewwidth = Mparams.width;
    Mhltabiv.setlayoutparams (Mparams);

Then, to do this imageview sticky hand effect, how to do it, In fact, the API added after android3.0 can be very simple to implement, 3.0 before the need to use the nineoldandroids of this third party open source framework, the purpose of this framework is to allow 3.0 of the Android version to implement android3.0 after the property animation. The usage of this framework is similar to the API usage after 3.0, so this article uses the API after 3.0 directly.

Manimator = Mhltabiv.animate ();

The following is the implementation code for the animation:

    Mtabpageindicator.setonpagechangelistener (New Onpagechangelistener () {@Override public void Onpageselec
        Ted (int index) {} @Override public void onpagescrolled (int currentpos, float percent, int delta) { if (!misscrolling) Manimator.translationx (mtabviewwidth * currentpos + Delta/tabcou
                NT). Setduration. Setlistener (New Animator.animatorlistener () {@Override
                public void Onanimationstart (animator animation) {misscrolling = true;

                @Override public void Onanimationrepeat (animator animation) {} @Override public void Onanimationend (animator animation) {misscrolling = Fals
                E @Override public void Onanimationcancel (animator animation) {Misscro
    Lling = false;            }). Start (); 

 @Override public void onpagescrollstatechanged (int arg0) {}});

As on the code, just a few lines of code can achieve this smooth animation effect.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.