Android 사용자 정의 View Flyme 6 뷰 페이지 표시 기

최근 에 업 데 이 트 된 Flyme 6 의 전체적인 효과 가 좋 습 니 다.애니메이션 효과 가 많이 증가 하 였 습 니 다.flyme 6 의 Viewpager 표시 기 를 보고 재 미 있 으 면 모방 하여 썼 습 니 다.전체적인 효 과 는 다음 과 같 습 니 다.

Gradle
JitPack v1.0.2

allprojects {
 repositories {
  maven { url 'https://jitpack.io' }
 }
}

dependencies {
 compile 'com.github.Dawish:FlymeTabStrip:v1.0.2'
}

Attrs

 <declare-styleable name="FlymeTabStrip">
  <!--       -->
  <attr name="indicatorHeight" format="dimension" />
  <!--          -->
  <attr name="indicatorColor" format="color" />
  <!--         -->
  <attr name="indicatorMargin" format="dimension" />
  <!--         -->
  <attr name="indicatorTextColor" format="color" />
  <!--         -->
  <attr name="indicatorTextSize" format="dimension" />
  <!--              -->
  <attr name="selectedIndicatorTextSize" format="dimension" />
 </declare-styleable>

Sample
데모 주소:https://github.com/Dawish/FlymeTabStrip/tree/master/samples
코드 해석
인디케이터 의 애니메이션 효 과 는 주로 Viewpager 의 미끄럼 모니터 에 의존 합 니 다.Viewpager 가 미 끄 러 지 는 과정 에서 컨트롤 만 다시 그리 면 인디케이터 의 변위 와 애니메이션 크기 조정 효 과 를 실현 할 수 있 습 니 다.우선 ViewPager 의 세 가지 스크롤 감청 방법 을 설명해 드 리 겠 습 니 다.

 /**
  * viewPager      
  *
  */
 private class PagerStateChangeListener implements OnPageChangeListener {

  /**
   * viewpager    
   * @param state
   */
  @Override
  public void onPageScrollStateChanged(int state) {
   if (state == ViewPager.SCROLL_STATE_IDLE) { // 0      pager      
    scrollToChild(viewPager.getCurrentItem(), 0);
   }else if(state == ViewPager.SCROLL_STATE_SETTLING){ // 2       ，      ，pager       pager   

   }else if(state == ViewPager.SCROLL_STATE_DRAGGING){ // 1 viewpager     ,       

   }
  }

  /**
   * viewpager    ，        
   *    ，              
   * @param position     
   * @param positionOffset           
   * @param positionOffsetPixels           
   */
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   currentPosition = position;
   currentPositionOffset = positionOffset;
   //             ,scrollToChild     ondraw  ，        ，         
   scrollToChild(position, (int) (positionOffset * container.getChildAt(position).getWidth()));
   invalidate();
  }

  /**
   * page    
   * @param position           
   */
  @Override
  public void onPageSelected(int position) {
   //         
   selectedPosition = position;
   //        
   updateTabStyle();
  }

 }

그 중에서 가장 중요 한 방법 은:

  /**
   * viewpager    ，        
   *    ，              
   * @param position     
   * @param positionOffset           
   * @param positionOffsetPixels           
   */
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   currentPosition = position;
   currentPositionOffset = positionOffset;
   //             ,scrollToChild     ondraw  ，        ，         
   scrollToChild(position, (int) (positionOffset * container.getChildAt(position).getWidth()));
   invalidate();
  }

github 주소:https://github.com/Dawish/FlymeTabStrip
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.