Android,위 챗 tab 하 이 라이트 icon 접착 미끄럼 효과 구현

위 챗 의 홈 페이지 는 3 개의 tab 로 나 뉘 어 있 습 니 다.선 택 된 tab 의 tabwidget 아래 에 하 이 라이트 의 긴 아이콘 이 있 습 니 다.tab 페이지 를 전환 할 때 이 icon 은 tab 전환 이 끝 난 후에 현재 선 택 된 tab 의 tabwidget 아래 에 나타 나 는 것 이 아니 라 viewpager 가 페이지 를 미 끄 러 지 는 동작 에 따라 미 끄 러 집 니 다.이전 tabwidget 은 현재 선 택 된 tabwidget 으로 미 끄 러 집 니 다.viewpager 처럼 손 에 붙 는 효과 가 있어 서 좋 습 니 다.이전 그림: 

이 편 은 어떻게 이 효 과 를 실현 할 것 인 가 를 분석한다. 
우선 기본 지식 은 서로 다른 tab 페이지 간 에 미끄럼 전환 을 실현 하려 면 TabPageIndicator+ViewPager 를 사용 해 야 한 다 는 것 입 니 다.그 중에서 TabPageIndicator 는 오픈 소스 컨트롤 이 고 ViewPager 는 안 드 로 이 드 의 슈퍼 port.v4 가방 안의 컨트롤 입 니 다.이것 은 여기에서 묘사 하지 않 고 인터넷 에 많은 예 가 있다.이 편 은 주로 하 이 라이트 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 은 하나의 ImageView 로 이 루어 집 니 다.이 ImageView 는 바로 하 이 라이트 의 긴 아이콘 입 니 다.
그리고 이 ImageView 에 대해 초기 화 할 때 폭 을 계산 하여 너비 가 단독 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);

그 다음 에 이 ImageView 가 손 에 붙 는 효 과 를 얻 으 려 면 어떻게 해 야 합 니까?사실은 안 드 로 이 드 3.0 이후 에 추 가 된 api 는 쉽게 실현 할 수 있 습 니 다.3.0 이전 에는 나 인 올 드 안 드 로 이 드 라 는 제3자 의 오픈 소스 프레임 워 크 를 사용 해 야 합 니 다.이 프레임 워 크 의 목적 은 3.0 이전의 안 드 로 이 드 버 전 으로 안 드 로 이 드 3.0 이후 의 속성 애니메이션 을 실현 하 는 것 입 니 다.이 프레임 워 크 의 용법 은 3.0 이후 의 api 용법 과 차이 가 많 지 않 기 때문에 본 편 은 3.0 이후 의 api 를 직접 사용 합 니 다. 
mAnimator = mHlTabIv.animate();
 다음은 애니메이션 의 실현 코드 입 니 다.

    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) {
      }
    }); 

위의 코드 와 같이 간단 한 몇 줄 의 코드 만 있 으 면 이 매 끄 러 운 애니메이션 의 효 과 를 실현 할 수 있다.
 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.