Android自定义View--Flyme6的Viewpager指示器

最新更新的Flyme6整体效果不错，动画效果增加了很多了，看了看flyme6的Viewpager指示器，觉得有点意思，就模仿写了一下，整体效果如下：

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

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" /><!-- 指示器滑动条颜色 --><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*/@Overridepublic 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 当前页面偏移的像素值*/@Overridepublic 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  滚动结束后选中的页面*/@Overridepublic void onPageSelected(int position) {// 滚动结束后的未知selectedPosition = position;// 更新指示器状态updateTabStyle();}}

其中最主要的方法就是：

        /*** viewpager正在滑动，会回调一些偏移量* 滚动时，只要处理指示器下方横线的滚动* @param position 当前页面* @param positionOffset  当前页面偏移的百分比* @param positionOffsetPixels 当前页面偏移的像素值*/@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {currentPosition = position;currentPositionOffset = positionOffset;// 处理指示器下方横线的滚动,scrollToChild会不断调用ondraw方法，绘制在重绘下划线，这就是移动动画效果scrollToChild(position, (int) (positionOffset * container.getChildAt(position).getWidth()));invalidate();}

onPageScrolled方法图片说明：

Android自定义View--Flyme6的Viewpager指示器相关推荐

android 自定义viewpager指示器,Android自定义View Flyme6的Viewpager指示器
最新更新的Flyme6整体效果不错,动画效果增加了很多了,看了看flyme6的Viewpager指示器,觉得有点意思,就模仿写了一下,整体效果如下: Gradle allprojects { repo ...
Android自定义view之ViewPager指示器——2
Android自定义view之ViewPager指示器--2 上一篇<Android自定义view之ViewPager指示器--1>中我们一起写了测量和布局的流程.本篇我们继续讲解事件分发 ...
Android自定义view之ViewPager指示器——1
Android自定义view之ViewPager指示器--1 在上两篇文章<Android自定义view之measure.layout.draw三大流程>以及<Android自定义v ...
Android 自定义View合集
http://blog.csdn.net/u011507982/article/details/51199644 自定义控件学习 https://github.com/GcsSloop/Androi ...
android自定义view获取控件,android 自定义控件View在Activity中使用findByViewId得到结果为null...
转载:http://blog.csdn.net/xiabing082/article/details/48781489 1. 大家常常自定义view,,然后在xml 中添加该view 组件..如果在 ...
android 自定义取色器,【Android自定义View】仿Photoshop取色器ColorPicker(二)
ColorPicker 一款仿Photoshop取色器的Android版取色器. 前言上一篇已经简单介绍了ColorPicker的项目结构以及两种颜色空间,接下来我们详细解析一下ColorPicke ...
android 自定义View 视差动画
本系列自定义View全部采用kt **系统: **mac android studio: 4.1.3 **kotlin version:**1.5.0 gradle: gradle-6.5-bin.z ...
Android自定义View —— TypedArray
在上一篇中Android 自定义View Canvas -- Bitmap写到了TypedArray 这个属性下面也简单的说一下TypedArray的使用 TypedArray 的作用: 用于从该结 ...
Android 自定义View —— Canvas
上一篇在android 自定义view Paint 里面说了几种常见的Point 属性绘制图形的时候下面总有一个canvas ,Canvas 是是画布上面可以绘制点,线,正方形,圆,等等,需要和 ...
Android自定义View:ViewGroup（三）
自定义ViewGroup本质是什么? 自定义ViewGroup本质上就干一件事--layout. layout 我们知道ViewGroup是一个组合View,它与普通的基本View(只要不是ViewG ...