快捷導(dǎo)航

Android自定義View Flyme6的Viewpager指示器

更新時(shí)間：2017年01月22日 14:06:23 作者：Dawish_大D

這篇文章主要為大家詳細(xì)介紹了Android自定義View Flyme6的Viewpager指示器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最新更新的Flyme6整體效果不錯(cuò)，動(dòng)畫效果增加了很多了，看了看flyme6的Viewpager指示器，覺(jué)得有點(diǎn)意思，就模仿寫了一下，整體效果如下：

Gradle

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" />
  <!-- 指示器滑動(dòng)條顏色 -->
  <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

Demo地址：https://github.com/Dawish/FlymeTabStrip/tree/master/samples

代碼解釋

指示器的動(dòng)畫效果，主要依賴Viewpager的滑動(dòng)監(jiān)聽(tīng)器，在Viewpager的滑動(dòng)過(guò)程中不斷重繪只是控件就可以實(shí)現(xiàn)指示器的位移和縮放動(dòng)畫效果。首先我們講解一下ViewPager的三個(gè)滾動(dòng)監(jiān)聽(tīng)方法：

 /**
  * viewPager狀態(tài)改變監(jiān)聽(tīng)
  *
  */
 private class PagerStateChangeListener implements OnPageChangeListener {

  /**
   * viewpager狀態(tài)監(jiān)聽(tīng)
   * @param state
   */
  @Override
  public void onPageScrollStateChanged(int state) {
   if (state == ViewPager.SCROLL_STATE_IDLE) { // 0 空閑狀態(tài) pager處于空閑狀態(tài)
    scrollToChild(viewPager.getCurrentItem(), 0);
   }else if(state == ViewPager.SCROLL_STATE_SETTLING){ // 2 正在自動(dòng)沉降，相當(dāng)于松手后，pager恢復(fù)到一個(gè)完整pager的過(guò)程

   }else if(state == ViewPager.SCROLL_STATE_DRAGGING){ // 1 viewpager正在被滑動(dòng),處于正在拖拽中

   }
  }

  /**
   * viewpager正在滑動(dòng)，會(huì)回調(diào)一些偏移量
   * 滾動(dòng)時(shí)，只要處理指示器下方橫線的滾動(dòng)
   * @param position 當(dāng)前頁(yè)面
   * @param positionOffset 當(dāng)前頁(yè)面偏移的百分比
   * @param positionOffsetPixels 當(dāng)前頁(yè)面偏移的像素值
   */
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   currentPosition = position;
   currentPositionOffset = positionOffset;
   // 處理指示器下方橫線的滾動(dòng),scrollToChild會(huì)不斷調(diào)用ondraw方法，繪制在重繪下劃線，這就是移動(dòng)動(dòng)畫效果
   scrollToChild(position, (int) (positionOffset * container.getChildAt(position).getWidth()));
   invalidate();
  }

  /**
   * page滾動(dòng)結(jié)束
   * @param position 滾動(dòng)結(jié)束后選中的頁(yè)面
   */
  @Override
  public void onPageSelected(int position) {
   // 滾動(dòng)結(jié)束后的未知
   selectedPosition = position;
   // 更新指示器狀態(tài)
   updateTabStyle();
  }

 }

其中最主要的方法就是：

  /**
   * viewpager正在滑動(dòng)，會(huì)回調(diào)一些偏移量
   * 滾動(dòng)時(shí)，只要處理指示器下方橫線的滾動(dòng)
   * @param position 當(dāng)前頁(yè)面
   * @param positionOffset 當(dāng)前頁(yè)面偏移的百分比
   * @param positionOffsetPixels 當(dāng)前頁(yè)面偏移的像素值
   */
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   currentPosition = position;
   currentPositionOffset = positionOffset;
   // 處理指示器下方橫線的滾動(dòng),scrollToChild會(huì)不斷調(diào)用ondraw方法，繪制在重繪下劃線，這就是移動(dòng)動(dòng)畫效果
   scrollToChild(position, (int) (positionOffset * container.getChildAt(position).getWidth()));
   invalidate();
  }

github地址：https://github.com/Dawish/FlymeTabStrip

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

您可能感興趣的文章: