自定义View和属性动画ValueAnimator实现圆点指示器
自定义View和属性动画相结合实现支持动态修改指示点位置,拖拽或点击改变指示点位置,点击位置监听及切换动画自定义的圆点指示器。
效果图
最下面那个“吸干”,想不出用什么词形容更好>.<,后来改回”挤扁”
自定 View 代码写在 IndicatorView.java
中
IndicatorView由以下几个重要的图形构成
- 小圆点:固定不动的圆形
- 指示点:在小圆点上来回移动,通过改变指示点当前所在位置来实现
指示器
的功能,为了实现“挤扁”的动画效果,绘制时用的是椭圆。 - 线段:用于连接两个小圆点,绘制时以两个相邻小圆点间的距离为一个
线段
单位。循环绘制线段
,绘制小圆点个数减一
次后连通所有小圆点,在布局文件或代码中可修改其可见性(lineVisible
)
实现的功能:
- 支持通过xml定义IndicatorView的属性
- 属性包括:
1 指示点大小、颜色
2 固定显示的小圆点的大小、颜色以及数量
3 连接小圆点的线条的可见性,线条宽度、长度、颜色
4 默认提供了两个用于指示点间切换的动画(平移和挤扁),也可选择不使用动画或自定义
5 默认提供的切换动画的时间可指定
6 启用/禁用拖拽切换(点击切换或两者)功能
- 属性包括:
- 通过代码动态修改部分属性
- 通过代码或得属性值,如当前指示点位置,颜色等
- 通过代码自定义指示点间切换动画,指示点被触摸的反馈动画及点击事件监听的回调
属性定义在src/main/res/values/attrs.xml
文件中。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="lineColor" format="color" /> <!--线条颜色 -->
<attr name="lineVisible" format="boolean" /> <!--线条是否可见 -->
<attr name="lineWidth" format="dimension" /> <!--线条长度 -->
<attr name="lineHeight" format="dimension" /> <!--线条高度 -->
<attr name="dotSize" format="dimension" /> <!--小圆点大小 -->
<attr name="dotNum" format="integer"/> <!--小圆点个数 -->
<attr name="dotColor" format="color" /> <!--小圆点颜色 -->
<attr name="indicatorColor" format="color" /> <!--指示点颜色 -->
<attr name="indicatorSize" format="dimension" /> <!--指示点大小 -->
<attr name="indicatorPos" format="integer"/> <!--指示点位置 -->
<attr name="duration" format="integer"/> <!--两点间移动动画时间 -->
<attr name="dotClickEnable" format="boolean"/><!--小圆点点点击时是否把指示点移到点击的小圆点处,若置为false则只能通过setIndicatorPos()方法改变指示点位置-->
<attr name="indicatorDragEnable" format="boolean"/><!--指示点拖拽是否可用-->
<attr name="touchEnable" format="boolean"/><!--同时禁用小圆点点击和指示点拖拽-->
<attr name="IndicatorSwitchAnimation" format="integer"> <!--使用默认提供的动画-->
<enum name="translation" value="1"/> <!--平移-->
<enum name="squeeze" value="2"/><!--"挤扁"-->
<enum name="none" value="0"/> <!--不使用动画-->
</attr>
<declare-styleable name=