欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android實(shí)現(xiàn)仿微信tab高亮icon粘著手的滑動(dòng)效果

 更新時(shí)間:2016年08月31日 11:28:27   作者:ly513782705  
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)仿微信tab高亮icon粘著手的滑動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

微信的主頁分為3個(gè)tab,被選中的tab的tabwidget下面會(huì)有一個(gè)高亮的長(zhǎng)條icon,而當(dāng)切換tab頁面的時(shí)候,這個(gè)icon不是等到tab切換完成后再出現(xiàn)在當(dāng)前被選中的tab的tabwidget的下面,而是會(huì)隨著viewpager滑動(dòng)頁面的動(dòng)作也進(jìn)行滑動(dòng),從前一個(gè)tabwidget滑到當(dāng)前被選中的tabwidget,像viewpager一樣有一種粘著你的手的效果,體驗(yàn)很贊。上個(gè)圖: 

本篇分析如何實(shí)現(xiàn)這個(gè)效果。 

首先基本知識(shí)是,實(shí)現(xiàn)不同tab頁之間可以滑動(dòng)切換需要用到TabPageIndicator + ViewPager,其中TabPageIndicator是一個(gè)開源控件,ViewPager是android的support.v4包里面的控件。這個(gè)實(shí)現(xiàn)這里不進(jìn)行描述,網(wǎng)上有很多的例子。本篇主要實(shí)現(xiàn)高亮icon的粘手效果。 

先看布局: 

  <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>

如上面的代碼,高亮icon用一個(gè)ImageView實(shí)現(xiàn),這個(gè)ImageView就是那個(gè)高亮的長(zhǎng)條icon。

然后針對(duì)這個(gè)ImageView我們需要初始化的時(shí)候計(jì)算其寬度,保證它的寬度和一個(gè)單獨(dú)的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);

然后,要做到這個(gè)ImageView粘手的效果,要怎么做呢,其實(shí)android3.0之后添加的api就能很簡(jiǎn)單的實(shí)現(xiàn),3.0之前的就需要用到nineoldandroids這個(gè)第三方的開源框架,這個(gè)框架的目的就是讓3.0之前的android版本實(shí)現(xiàn)android3.0之后的屬性動(dòng)畫。這個(gè)框架的用法和3.0之后的api用法差不多,所以本篇直接用3.0之后的api。 

mAnimator = mHlTabIv.animate();

 下面是動(dòng)畫的實(shí)現(xiàn)代碼:

    mTabPageIndicator.setOnPageChangeListener(new OnPageChangeListener() {

      @Override
      public void onPageSelected(int index) {
      }

      @Override
      public void onPageScrolled(int currentPos, float percent, int delta) {
        if (!mIsScrolling)
          mAnimator.translationX(mTabViewWidth * currentPos + delta
                      / tabCount).setDuration(50)
              .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 = false;
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                  mIsScrolling = false;
                }
              }).start();
      }

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

如上代碼,只需簡(jiǎn)單的幾行代碼就能實(shí)現(xiàn)這個(gè)順滑的動(dòng)畫的效果。

 以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論