当前位置： 移动技术网 > IT编程>移动开发>Android > Android自定义View Flyme6的Viewpager指示器

Android自定义View Flyme6的Viewpager指示器

2019年07月24日  | 移动技术网IT编程  | 我要评论

魔幻森林的仙女龙,唯望三身皆有幸,cf帆哥官网

最新更新的flyme6整体效果不错，动画效果增加了很多了，看了看flyme6的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

demo地址：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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网