Android自定义View Flyme6的Viewpager指示器
最新更新的Flyme6整体效果不错,动画效果增加了很多了,看了看flyme6的Viewpager指示器,觉得有点意思,就模仿写了一下,整体效果如下:
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 */ @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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Android 中 viewpager 滑动指示器的实例代码
- Android开发实现的ViewPager引导页功能(动态加载指示器)详解
- Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)
- Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件
- Android实现带指示器的自动轮播式ViewPager
- Android自定义ViewPager指示器
- Android应用中仿今日头条App制作ViewPager指示器
- Android应用中使用ViewPager和ViewPager指示器来制作Tab标签
- Android ViewPager小圆点指示器
相关文章
Android中new Notification创建实例的最佳方法
这篇文章主要介绍了Android中new Notification创建实例的最佳方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-08-08Android中的TimePickerView(时间选择器)的用法详解
这篇文章主要介绍了Android中的TimePickerView时间选择器的用法,这是一个第三方从底部弹出来的日期选择器,文中结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2022-04-04Android使用BottomTabBar实现底部导航页效果
这篇文章主要介绍了Android使用BottomTabBar实现底部导航页效果,本文通过实例代码结合文字说明的形式给大家介绍的非常详细,需要的朋友参考下吧2018-03-03
最新评论