Android自定义View教你一步一步实现薄荷健康滑动卷尺
前言
前几天写了一篇一步一步教你实现即刻点赞效果后，实现点赞效果主要是自己对自定义View的一些canvas绘制，缩放知识，位移的理解。而朋友说HenCoder还有给出薄荷健康滑动卷尺，小米运动记录界面，Flipboard 红板报的翻页效果。这几个例子对自定义View知识很有代表性，都用到了不同的知识。而今天要实现的是薄荷健康滑动卷尺效果，主要是加深触摸反馈，和在Android坐标系中，获取View不同环境下坐标系的方法，也刚好巩固滑动如scrllTo()和scrllBy()用法。
效果图
仔细观察上面的效果图，有六个点是可以观察知道的：
- 刻度尺是可以左右滑动的，看到实际的刻度尺是比所看到的的区域要长的。
- 刻度尺的刻度线有长有短，刻度线之间的间隔都是固定1，从1开始每隔10刻度线变长。
- 图中有一条绿线，这条绿线比刻度线都要长和粗。
- 当刻度尺停下来时，绿线所指的刻度就是绿色文本所显示的数字。
- 文本显示的数值是有单位的：Kg在数字的右上角，并伴随着刻度变化而左右一点距离。
- 具有惯性滑动。
知识准备
scrllTo和scrollBy
刚看到上图，就马上想到了Android里的Scroller，这个类是专门处理滚动的工具类，我们平时在开发中直接使用Scroller的场景不多，但是我们很多时候都会接触到它，像ViewPager、ListView。在Android中任何一个控件都是可以移动的，因为VIew类中有scrollTo()和scrollBy()方法。
scrllTo
意思是设置View的滚动位置，这会导致onScrollChanged(int,int,int,int)的调用，并且会刷新View。
scrollBy
意思是移动视图的滚动位置，这将导致对onScrollChanged(int,int,int,int)的调用，并且会刷新View。
这么说还是不明白，举个例子。
activity_main布局文件：
<RelativeLayout android:id="@+id/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.uestc.horizontalrulerview.MainActivity">
<Button
android:id="@+id/btn_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTONONE"/>
<Button
android:id="@+id/btn_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/btn_one"
android:text="BUTTONTWO"/>
RelativeLayout>
MainActivity文件：
public class MainActivity extends AppCompatActivity {
private Button btn_one;
private Button btn_two;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn_one = (Button) findViewById(R.id.btn_one);
btn_two = (Button) findViewById(R.id.btn_two);
btn_one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
btn_one.scrollTo(-50, -100);
}
});
btn_two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
btn_two.scrollBy(-50, -100);
}
});
}
}
效果如下：
发现button没有移动，但是里面的文本缺不见了，可以猜测，应该是移动自己布局里面的内容。现在在布局文件给两个button加上一个父布局：
<RelativeLayout android:id="@+id/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.uestc.horizontalrulerview.MainActivity">
<LinearLayout
android:id="@+id/ll_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTONONE"/>
<Button
android:id="@+id/btn_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTONTWO"/>
LinearLayout>
RelativeLayout>
MainActivity文件改为：
btn_one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ll_btn.scrollTo(-50,-100);
}
});
btn_two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ll_btn.scrollBy(-50,-100);
}
});
改为对这个布局进行滚动。
看看效果：
BUTTONONE调用了scrollTo方法，BUTTONTWO调用了scrollBy方法，发现BUTTONONE调用了一次scrollTo方法后继续调用会没有效果，而BUTTONTWO调用了scrollBy方法后继续调用还会继续滚动。那么下面可以得出结论：
- scrollTo和scrollBy只是移动自己的内容.也就是如果ViewGroup设置scrollTo或者scrollBy的话,只有它的子View会有位移效果.如果是TextView设置scrollTo或者scrollBy的话只会让它内部的文字发生位移.
- scrollBy()方法是让View相对于当前的位置滚动某段距离，而scrollTo()方法则是让View相对于初始的位置滚动某段距离。
这里也许大家也像我一样会有疑问：为什么设置了**scrollTo(-50,-100)和scrollBy(-50,-100)**却往右下移动呢？按照正常来讲，Android中的坐标系原点是在屏幕的左上角，x轴向右是正值，反之是负值，y轴向下是正值，向上是负值，所以应该往左上移动。想找出答案还是看源码，因为仔细分析源码比较长，上面也写了移动是会View会刷新，那么最后肯定会执行invaildate方法，这里另外说一下另外一个视图刷新方法postInvalidate，我们知道Android是不能在子线程中更新UI的，这个方法可以直接在子线程中更新视图，通过ViewRootImpl这个顶级视图检查管理类去负责分发轮询处理，然后在主线程调用invalidate方法，实现视图控件的线程安全，换句话说postInvalidate最后还是调用invalidate方法。
invalidate最后通过ViewRootImpl类重写的invalidateChild方法对子View进行绘制，这就可以解释为什么scrollTo的作用在View的内容上了，最后再执行下面这个方法：
public void scrollTo(int x, int y) {
if (mScrollX != x || mScrollY != y) {
int oldX = mScrollX;
int oldY = mScrollY;
mScrollX = x;
mScrollY = y;
invalidateParentCaches();
onScrollChanged(mScrollX, mScrollY, oldX, oldY);
if (!awakenScrollBars()) {
postInvalidateOnAnimation();
}
}
}
public void invalidate(int l, int t, int r, int b) {
final int scrollX = mScrollX;
final int scrollY = mScrollY;
invalidateInternal(l - scrollX, t - scrollY, r - scrollX, b - scrollY, true, false);
}
这里就可以知道看到的矩形是l-scrollX，t-scrollY，r-scrollX,b-scrollY，这就是为什么scrollTo设置负值就是往正方向走，设置负值往反方向走，并且里面加了判断条件if(mScrollx != x || mScrollY != y)，第一次调用这个方法时，x的值赋给了mScrollX,y的值赋给了mScrollY，而再后面调用这个方法因为x等于mScrollX，y等于mScrollY，因此不会执行进入条件内的代码。源码中scrollBy还是调用了scrollTo方法：
public void scrollBy(int x, int y) {
scrollTo(mScrollX + x, mScrollY + y);
}
参数是(mScrollX + x，mScrollY + y)，这里就可以解释，scrollTo方法只会让View移动一次，它是对View初始方向来说，而scrollBy是对View的现在位置来说，所以可以不断移动。
简单绘制文本
布局文件：
public class SlidingRuleView extends View {
//文字画笔
private Paint paint;
//文字足够长 超过屏幕显示宽度 方便后面看滑动效果
private String currentNum = "1234sdddddddddd423dddddddd234dddddd234dddddd23423dddddddd234ddddd234ddddddd23423dddddd23ddd234ddddddd34334ddddddddddddddddddddddddddddddddsdddddddddddd";
//这个自定义View的高度
private int height;
public SlidingRuleView(Context context) {
this(context,null);
}
public SlidingRuleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public SlidingRuleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context){
//初始化画笔 抗锯齿
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//画笔的颜色 黑色
paint.setColor(Color.BLACK);
//设置填充样式，只绘制图形的轮廓
paint.setStyle(Paint.Style.STROKE);
//设置文本大小
paint.setTextSize(25f);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//MeasureSpec值由specMode和specSize共同组成，onMeasure两个参数的作用根据specMode的不同，有所区别。
//当specMode为EXACTLY时，子视图的大小会根据specSize的大小来设置，对于布局参数中的match_parent或者精确大小值
//当specMode为AT_MOST时，这两个参数只表示了子视图当前可以使用的最大空间大小，而子视图的实际大小不一定是specSize。所以我们自定义View时，重写onMeasure方法主要是在AT_MOST模式时，为子视图设置一个默认的大小，对于布局参数wrap_content。
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
if (heightSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSpecSize, SystemUtil.dp2px(getContext(),60));
} else {
setMeasuredDimension(widthSpecSize, heightSpecSize);
}
//这里获取View的高度 方便后面绘制算一些坐标
height = getMeasuredHeight();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//得到文字的字体属性和测量
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
//文字设置在View的中间
float y = height / 2 + (Math.abs(fontMetrics.ascent) - fontMetrics.descent) / 2;
//canvas绘制文本
canvas.drawText(currentNum, 0,y, paint);
}
}
下面重点讲解onMeasure方法和绘制文本方法
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
//MeasureSpec值由specMode和specSize共同组成，onMeasure两个参数的作用根据specMode的不同，有所区别。
//当specMode为EXACTLY时，子视图的大小会根据specSize的大小来设置，对于布局参数中的match_parent或者精确大小值
//当specMode为AT_MOST时，这两个参数只表示了子视图当前可以使用的最大空间大小，而子视图的实际大小不一定是specSize。所以我们自定义View时，重写onMeasure方法主要是在AT_MOST模式时，为子视图设置一个默认的大小，对于布局参数wrap_content。
if (heightSpecMode == MeasureSpec.AT_MOST) {
//这个方法确定了当前View的大小
setMeasuredDimension(widthSpecSize, SystemUtil.dp2px(getContext(),60));
} else {
setMeasuredDimension(widthSpecSize, heightSpecSize);
}
这里是获取specMode的模式和specSize大小,为什么确定View的大小根据heightSpecMode呢，因为要实现的滑动卷尺只是横向滑动，width设置精准值、wrap_content和match_parent都是可以的，不需要处理，超过View显示的区域到时候可以通过滑动来显示。实现这个效果高度一般设置wrap_content，当设置wrap_content时，最好设置一个固定高度，上面代码设置60px，如果不进行处理的话。有可能占满父容器所给的高度，或者高度过小显示不全。这里稍微讲下Measure.Mode测量模式：
-
UNSPECIFIED
父容器不对子View做任何限制，要多大给多大，一般用于系统内部，这里就不用多考虑 -
EXACTLY
精准模式，一般View指定了具体的大小（dp/px）或者设置match_parent -
AT_MOST
父容器制定了一个可用的大小，子View不能大于这个值，这个是在布局设置wrap_content
最后还发现调用了setMeasuredDimension，这个方法主要是决定当前View的大小，onMeasure方法最后调用setMeasuredDimension方法保存测量的宽高值，当然写在onMesure方法里，也说明它会调用多次，因为有的时候，一次测量，当父控件发现子控件的尺寸不符合要求就会重新测量。如果不调用这个方法，可能会产生不可预测的问题。
下面讲下定位文本坐标的方法：
//得到文字的字体属性和测量
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
//文字设置在View的中间
float y = height / 2 + (Math.abs(fontMetrics.ascent) + fontMetrics.descent) / 2;
//canvas绘制文本
canvas.drawText(currentNum, 0,y, paint);
x坐标就不讲了，这里重点讲一下y坐标，这里主要用到了FontMetrics这个类，官网解释是：
这里结合一张图来讲：
图中有五条线结合官方文档，自上而下来解释：
- top：给定文本大小下，字体中最高字符高于基线之上的最大距离
- ascent：单个文本下超出基线之上的推荐距离
- baseLine：文本基线
- descent：单个字符超出基线之上的推荐距离
- bottom：字体中最低字符超出基线之下的最大距离
- leading：文本行与文本行之间的距离
上面图中红色的圆点，那个点对于TextView来说就是基线的原点，现在问题是要确定这个点对于这个View下的y坐标，可以看到这个点离整个View的中线下移一段距离，这段距离我是设定整个文本高度的一半，文本字体的高度可以用Math.abs(ascent) + descent，那么文本高度的一半也就是**（Math.abs(ascent) + descent）/ 2**。因此最终红色原点对于整个View的y坐标是float y = height / 2 + (Math.abs(fontMetrics.ascent) + fontMetrics.descent) / 2;
具体实践
完成滑动
上面讲了些基础知识，下面讲述最核心的就是滑动效果，在init方法里创建滚动实例：
//创建滑动实例
mScroller = new Scroller(context);
因为滑动只是View里面的TextView，要确定最大的左右滑动边界值，这里先上一个图，就是Android中View的坐标和获取一些距离方法：
ViewGroup就是平时一些LinearLayout，RelativeLayout布局，View如TextView，ImageView这些控件。
View提供的获取坐标以及距离的方法：
- getTop获取的是View自身顶边到父布局顶边的距离
- getLeft获取的是View自身左边到父布局左边的距离
- getRight获取的是View自身右边到父布局左边的距离
- getBottom获取的是View自身底边到父布局顶边的距离
MotionEvent提供的方法：
- getX获取触摸事件触摸点距离控件左边的距离，是视图坐标
- getY获取触摸事件触摸点距离控件顶边的距离，是视图坐标
- getRawX获取触摸事件触摸点距离整个屏幕左边的距离，是绝对坐标
- getRawY获取触摸事件触摸点距离整个屏幕顶边的距离，是绝对坐标
在ondraw方法分别得到View自身左边距离父布局左边距离和View自身右边到父布局左边的距离：
//得到左右边界
leftBorder = getLeft();
rightBorder = (int)paint.measureText(currentNum);
currentNum就是TextView显示的文字内容，Paint.measureText就是测量文字的宽度。每个View都有onTouchEvent方法，onTouchEvent有手指触摸屏幕MotionEvent.ACTION_DOEM，MotionEvent.Action_MOVE方法，那就在这个方法实现滑动逻辑。
@Override
public boolean onTouchEvent(MotionEvent ev){
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
//记录初始触摸屏幕下的坐标
mXDown = ev.getRawX();
mLastMoveX = mXDown;
break;
case MotionEvent.ACTION_MOVE:
mCurrentMoveX = ev.getRawX();
//本次的滑动距离
int scrolledX = (int) (mLastMoveX - mCurrentMoveX);
//如果右滑时 内容左边界超过初始化时候的左边界 就还是初始化时候的状态
if(getScrollX() + scrolledX < leftBorder){
scrollTo(leftBorder,0);
}
//同理 如果左滑 这里判断右边界
else if(getScrollX() + getWidth() + scrolledX > rightBorder){
scrollTo(rightBorder - getWidth(),0);
}else{
//在左右边界中 自由滑动
scrollBy(scrolledX,0);
}
mLastMoveX = mCurrentMoveX;
break;
}
return true;
}
上面代码主要最难理解的就是边界检测，下面是左边界检测代码：
//如果右滑时 内容左边界超过初始化时候的左边界 就还是初始化时候的状态
if(getScrollX() + scrolledX < leftBorder){
scrollTo(leftBorder,0);
}
这里用了getScrollX方法，这个方法是返回当前View视图左上角X坐标与View视图初始位置左上角X坐标的距离，注意，这是以屏幕坐标为参照点，View右移这个值由正变为负数一直递增。
这个其实列出一张图理解：
结合上面代码来看，一开始判断右滑到达左边界的时候，是通过滑动后TextView的左边界在初始状态时的左边界右边时，就是右滑达到最大值。因为这里getScrollx取得值和我们正常理解的值是反的：
if(getScrollX() < leftBorder){
scrollTo(leftBorder,0);
}
这样来判断，这里默认leftBorder是0，也就是父布局的左边界和内容左边界一致重叠。但我发现效果会有抖动，应该是临界值没有判断到位，然后加上移动距离。
getScrollX() + scrolledX < leftBorder
其实转换为自然语言就是，View的移动距离比当前View视图左上角坐标与View视图初始位置x轴方向上的距离大，同理左滑时边界检测也是一样。注意：在非左右边界情况下，要用scrollBy方法来移动，因为这个是对于当前View位置来说的，还有，onTouchEvent要返回return true。因为return false或者return super.onTouchEvent只会执行down方法，不会执行move和up方法，只有在true的时候，三个都会执行，具体什么原因自行查找事件分发和消耗。其实这里不用重写computerScroll方法，就是在其内部完成平滑移动，computeScroll在父控件执行drawChild时，会调用这个方法。，效果图如下：
绘制顶部刻度长线
在attrs下添加属性集合：
<declare-styleable name="SlidingRuleView">
<attr name="longDegreeLine" format="dimension"/>
<attr name="lineDegreeColor" format="color" />
<attr name="topDegreeLine" format="dimension"/>
<attr name="lineDegreeSpace" format="dimension"/>
<attr name="lineCount" format="integer"/>
declare-styleable>
在构造函数读取attrs文件下属性：
public SlidingRuleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//初始化一些参数
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable
.SlidingRuleView);
//刻度线的颜色
lineDegreeColor = typedArray.getColor(R.styleable.SlidingRuleView_lineDegreeColor, Color.LTGRAY);
//顶部的直线距离View顶部距离
topDegreeLine = typedArray.getDimension(R.styleable.SlidingRuleView_topDegreeLine, SystemUtil.dp2px(getContext(),45));
//刻度间隔
lineDegreeSpace = typedArray.getDimension(R.styleable.SlidingRuleView_lineDegreeSpace, SystemUtil.dp2px(getContext(),10));
//刻度大数目 默认30
lineCount = typedArray.getInt(R.styleable.SlidingRuleView_lineCount, 30);
init(context);
typedArray.recycle();
}
初始化方法init确定顶部刻度线的右端：
private void init(Context context){
//初始化画笔 抗锯齿
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//创建滑动实例
mScroller = new Scroller(context);
//第一步，获取Android常量距离对象，这个类有UI中所使用到的标准常量，像超时，尺寸，距离
ViewConfiguration configuration = ViewConfiguration.get(context);
//获取最小移动距离
mTouchMinDistance = configuration.getScaledTouchSlop();
//确定刻顶部度长线右边界 格数 * 之间的间隔 * 大数目（间隔）之间是有10小间隔的
rightBorder = lineDegreeSpace * lineCount * 10;
}
这里解释一下**rightBorder = lineDegreeSpace * lineCount * 10;**意思是刻度之间的间隔 * 大刻度数 * 每个大刻度之间会有10个小刻度。
ondraw方法绘制：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//确定顶部长线的左端
float x = leftBorder;
//确定顶部长线
float y = topDegreeLine;
//设置画笔颜色
paint.setColor(lineDegreeColor);
//设置刻度线宽度
paint.setStrokeWidth(3);
canvas.drawLine(x, y, rightBorder, y, paint);
}
这样顶部刻度长线绘制完成：
绘制长刻度
在构造方法增加：
//长的刻度线条长度
longDegreeLine = typedArray.getDimension(R.styleable.SlidingRuleView_longDegreeLine, SystemUtil.dp2px(getContext(),35));
在onDraw方法里添加：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//确定顶部长线的左端
float x = leftBorder;
//确定顶部长线
float y = topDegreeLine;
//设置画笔颜色
paint.setColor(lineDegreeColor);
//设置刻度线宽度
paint.setStrokeWidth(3);
canvas.drawLine(x, y, rightBorder, y, paint);
//循环绘制
for(int i = 0;i <= lineCount * 10;i++){
//画长刻度
if(i % 10 == 0){
paint.setColor(lineDegreeColor);
paint.setStrokeWidth(5);
canvas.drawLine(x, y, x, y + longDegreeLine, paint);
}
x += lineDegreeSpace;
}
}
循环绘制里，我这边是循环所有的刻度值，但是现在只绘制长刻度，因此i % 10 == 0的时候才绘制，因为绘制是从左往右的，每个刻度值的间隔是用lineDegreeSpace表示，因此每循环一遍，X坐标的值要对应增加x += lineDegreeSpace。
运行效果如下：
发现左右边界的刻度线太靠边了，加上左右间隔：
<!--刻度尺左边界记录View左边界的距离-->
<attr name="ruleLeftSpacing" format="dimension" />
<!--刻度尺右边界记录View右边界的距离-->
<attr name="ruleRightSpacing" format="dimension" />
构造方法增加：
ruleLeftSpacing = typedArray.getDimension(R.styleable.SlidingRuleView_ruleLeftSpacing, SystemUtil.dp2px(getContext(),5));
ruleRightSpacing = typedArray.getDimension(R.styleable.SlidingRuleView_ruleRightSpacing, SystemUtil.dp2px(getContext(),5));
初始化init方法变成：
//增加左边界距离
leftBorder = ruleLeftSpacing;
//确定刻顶部度长线右边界 格数 * 之间的间隔 * 大数目（间隔）之间是有10小间隔的
rightBorder = lineDegreeSpace * lineCount * 10+ ruleLeftSpacing + ruleRightSpacing;
ondraw绘制顶部长线变为：
canvas.drawLine(x, y, rightBorder - ruleRightSpacing, y, paint);
onTouchEvent方法左右检测需要加上左右边距
@Override
public boolean onTouchEvent(MotionEvent ev){
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
//记录初始触摸屏幕下的坐标
mXDown = ev.getRawX();
mLastMoveX = mXDown;
break;
case MotionEvent.ACTION_MOVE:
mCurrentMoveX = ev.getRawX();
//本次的滑动距离
int scrolledX = (int) (mLastMoveX - mCurrentMoveX);
//如果右滑时 内容左边界超过初始化时候的左边界 就还是初始化时候的状态
if(getScrollX() + scrolledX < leftBorder){
scrollTo((int)(-leftBorder),0);
return true;
}
//同理 如果左滑 这里判断右边界
else if(getScrollX() + getWidth() + scrolledX > rightBorder){
scrollTo((int)(rightBorder - getWidth() + ruleRightSpacing),0);
return true;
}else{
//左右边界中 自由滑动
scrollBy(scrolledX,0);
}
//当停止滑动时，现在的滑动已经变成上次滑动
mLastMoveX = mCurrentMoveX;
break;
}
return true;
}
运行效果如下：
绘制长刻度值
在attrs文件下添加数字的颜色和大小：
<attr name="numberColor" format="color" />
<attr name="numberSize" format="dimension" />
在构造方法增加对attrrs属性获取：
//数字颜色
numberColor = typedArray.getColor(R.styleable.SlidingRuleView_numberColor, Color.BLACK);
//数字大小
numberSize = typedArray.getDimension(R.styleable.SlidingRuleView_numberSize, SystemUtil.dp2px(getContext(),15));
onDraw方法绘制数字：
//画刻度值
String number = String.valueOf(i / 10);
//得到文字宽度
float textWidth = paint.measureText(number);
//绘制颜色
paint.setColor(numberColor);
//绘制文字大小
paint.setTextSize(numberSize);
paint.setStrokeWidth(1);
canvas.drawText(number, x - textWidth / 2, y + longDegreeLine + SystemUtil.dp2px(getContext(),25), paint);
这里主要讲下，数字的坐标，因为数字是在刻度线正下方的，所以x坐标应该是刻度线的x坐标减去本身自身宽度的一半，y坐标应该是刻度线长度再加上部分距离，我这边是加了25dp。
运行效果：
绘制短刻度值
在attrs文件增加短刻度的长度：
<attr name="shortDegreeLine" format="dimension"/>
在构造函数获取其属性：
//短刻度值的长度
shortDegreeLine = typedArray.getDimension(R.styleable.SlidingRuleView_shortDegreeLine, SystemUtil.dp2px(getContext(),20));
在onDraw方法循环里非i%10==0的情况下绘制，这里很好理解：
//循环绘制
for(int i = 0;i <= lineCount * 10;i++){
//画长刻度
if(i % 10 == 0){
paint.setColor(lineDegreeColor);
paint.setStrokeWidth(5);
canvas.drawLine(x, y, x, y + longDegreeLine, paint);
//画刻度值
String number = String.valueOf(i / 10);
//得到文字宽度
float textWidth = paint.measureText(number);
//绘制颜色
paint.setColor(numberColor);
//绘制文字大小
paint.setTextSize(numberSize);
paint.setStrokeWidth(1);
canvas.drawText(number, x - textWidth / 2, y + longDegreeLine + SystemUtil.dp2px(getContext(),25), paint);
}else {
//画短刻度
paint.setColor(lineDegreeColor);
paint.setStrokeWidth(3);
canvas.drawLine(x, y, x, y + shortDegreeLine, paint);
}
x += lineDegreeSpace;
}
运行效果图如下：
画绿色指针
绿色指针底部其实是半圆的，可以在drawable下建立shape文件，通过bitmap绘制，如：
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#CCCCCC"/>
<corners
android:bottomLeftRadius="0px"
android:bottomRightRadius="30dp"
android:topLeftRadius="0px"
android:topRightRadius="30dp"/>
shape>
我这里为了方便，直接用直线来代替，在attrs文件下增加绿色指针颜色和其宽度：
<attr name="greenPointWidth" format="dimension"/>
<attr name="greenPointColor" format="color"/>
在构造方法添加获取颜色，粗细：
//绿色指针粗细
greenPointWidth = typedArray.getDimension(R.styleable.SlidingRuleView_greenPointWidth, SystemUtil.dp2px(getContext(),4));
//绿色指针颜色
greenPointColor = typedArray.getColor(R.styleable.SlidingRuleView_greenPointColor, 0xFF4FBA75);
因为绿色指针永远是在View的中间，在onMeasure方法获取X坐标：
//绿色指针的x坐标
greenPointX =getMeasuredWidth() / 2;
在onDraw方法绘制指针：
//画指针
paint.setColor(greenPointColor);
paint.setStrokeWidth(greenPointWidth);
canvas.drawLine(greenPointX + getScrollX(), y, greenPointX + getScrollX(), y + longDegreeLine + SystemUtil.dp2px(getContext(),3),
paint);
这里x坐标为什么要加上getScrollx（刻度尺的偏移量）呢，因为要保持指针在View的中间位置，不加上的话，指针会随着刻度移动而移动。
画当前刻度值
在attrs文件添加刻度值的颜色和大小，同理在构造函数获取属性，这里就不多讲来，因为数字是保留一位的，我这里用到了DecimalFormat来格式化数字：
//数字小数点一位
df = new DecimalFormat("0.0");
在onDraw绘制：
//绘制当前刻度值
//画当前刻度值
paint.setColor(currentNumberColor);
//设置大小
paint.setTextSize(currentNumberSize);
//确定数字的值。用移动多少来确定
currentNum = df.format((greenPointX + getScrollX() - leftBorder) / (lineDegreeSpace * 10.0f));
//测量数字宽度
float textWidth = paint.measureText(currentNum);
canvas.drawText(currentNum, greenPointX - textWidth / 2 + getScrollX(), topDegreeLine - SystemUtil.dp2px(getContext(),15), paint);
这里说一下确定数值的方法：
//确定数字的值。用移动多少来确定
currentNum = df.format((greenPointX + getScrollX() - leftBorder) / (lineDegreeSpace * 10.0f));
greenPointX + getScrollX() - leftBorder这条公式是确定指针到刻度尺最左边的距离是多少，再除以大刻度（每个大刻度有10个小刻度）的距离，就可以得出指针所指的刻度。确定数字的x坐标和y坐标就不做解释，很容易理解，因为数字是在刻度尺上面，所以要减去一些距离。
绘制kg
绘制kg无非是在当前刻度值右边，字体小一点，左右移动先不实现了：
//画kg 大小是刻度值的3分之一
paint.setTextSize(currentNumberSize / 3);
canvas.drawText("kg", greenPointX + textWidth / 2 + getScrollX() + SystemUtil.dp2px(getContext(),3), topDegreeLine - SystemUtil.dp2px(getContext(),30), paint);
相比当前刻度值而言，在刻度尺的距离要大，我这里减去30dp。
最终效果：
效果和薄荷健康很类似吧，但是这里注意，因为刻度值只是设置一位小数，也就是绿色指针不能移到两个小刻度之间，下面处理一下，在触摸方法，增加up方法，也就是当手指抬起时，如果指针滑到两个刻度值之间，就将绿色指针移动最近的刻度值。
private void moveRecently(){
float distance = (greenPointX + getScrollX() - leftBorder) % lineDegreeSpace;
//指针的位置在小刻度中间位置往后（右）
if (distance >= lineDegreeSpace / 2) {
scrollBy((int) (lineDegreeSpace - distance), 0);
} else {
scrollBy((int) (-distance), 0);
}
}
注意这里：
(greenPointX + getScrollX() - leftBorder) % lineDegreeSpace;
这里是取余操作，这里是确定指针在小刻度之间的具体位置，如果结果小于间隔的一半，那向后（右）最近的刻度移动，如果大于间隔的一半，那就向前（左）最近的刻度移动。到这里发现，指针不能指向0或者最后的位置，因为绿色指针在View的中间，那么左右边界检测需要改变，需要左边界减去上View的宽度一半，右边界需要加上View宽度的一半。
@Override
public boolean onTouchEvent(MotionEvent ev){
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
//记录初始触摸屏幕下的坐标
mXDown = ev.getRawX();
mLastMoveX = mXDown;
break;
case MotionEvent.ACTION_MOVE:
mCurrentMoveX = ev.getRawX();
//本次的滑动距离
int scrolledX = (int) (mLastMoveX - mCurrentMoveX);
//如果右滑时 内容左边界超过初始化时候的左边界 就还是初始化时候的状态
if(getScrollX() + scrolledX < leftBorder - getWidth() / 2){
scrollTo((int)(- getWidth() / 2 +leftBorder),0);
return true;
}
//同理 如果左滑 这里判断右边界
else if(getScrollX() + getWidth() / 2 + scrolledX > rightBorder){
scrollTo((int)(rightBorder - getWidth() /2 - ruleRightSpacing),0);
return true;
}else{
//左右边界中 自由滑动
scrollBy(scrolledX,0);
}
mLastMoveX = mCurrentMoveX;
break;
case MotionEvent.ACTION_UP:
moveRecently();
break;
}
return true;
}
private void moveRecently(){
float distance = (greenPointX + getScrollX() - leftBorder) % lineDegreeSpace;
//指针的位置在小刻度中间位置往后（右）
if (distance >= lineDegreeSpace / 2) {
scrollBy((int) (lineDegreeSpace - distance), 0);
} else {
scrollBy((int) (-distance), 0);
}
}
最终效果如下图：
增加惯性滑动
发现这里没加惯性滑动，滑动很艰难，下面添加速度追踪器：
/**
* 监控手势速度类
*/
private VelocityTracker mVelocityTracker;
//惯性最大最小速度
protected int mMaximumVelocity, mMinimumVelocity;
在初始化方法获取最大滑动速度，最小滑动速度：
//添加速度追踪器
mVelocityTracker = VelocityTracker.obtain();
//获取最大速度
mMaximumVelocity = ViewConfiguration.get(context)
.getScaledMaximumFlingVelocity();
//获取最小速度
mMinimumVelocity = ViewConfiguration.get(context)
.getScaledMinimumFlingVelocity();
在触摸事件onTouchEvent初始化mVelocityTracker
mVelocityTracker.addMovement(ev);
@Override
public boolean onTouchEvent(MotionEvent ev){
mVelocityTracker.addMovement(ev);
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
//记录初始触摸屏幕下的坐标
mXDown = ev.getRawX();
mLastMoveX = mXDown;
break;
case MotionEvent.ACTION_MOVE:
mCurrentMoveX = ev.getRawX();
//本次的滑动距离
int scrolledX = (int) (mLastMoveX - mCurrentMoveX);
//左右边界中 自由滑动
scrollBy(scrolledX,0);
mLastMoveX = mCurrentMoveX;
break;
case MotionEvent.ACTION_UP:
//处理松手后的Fling 获取当前事件的速率，1毫秒运动了多少个像素的速率，1000表示一秒
mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
//获取横向速率
int velocityX = (int) mVelocityTracker.getXVelocity();
//滑动速度大于最小速度 就滑动
if (Math.abs(velocityX) > mMinimumVelocity) {
fling(-velocityX);
}
//刻度之间检测
moveRecently();
break;
case MotionEvent.ACTION_CANCEL:
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}
break;
}
return true;
}
发现Move方法调用scrollBy方法，ACTION_UP增加了速度速率判断逻辑，最后调用了fling方法：
private void fling(int vX) {
mScroller.fling(getScrollX(), 0, vX, 0,(int)(- rightBorder), (int)rightBorder, 0, 0);
}
当用户手指快速划过屏幕，手指快速离开屏幕时，系统会判定用户执行一个Fling手势，视图会快速滚动，并且在手指离开屏幕之后也会滚动一定时间。
/**
* Start scrolling based on a fling gesture. The distance travelled will
* depend on the initial velocity of the fling.
*
* @param startX Starting point of the scroll (X)
* @param startY Starting point of the scroll (Y)
* @param velocityX Initial velocity of the fling (X) measured in pixels per
* second.
* @param velocityY Initial velocity of the fling (Y) measured in pixels per
* second
* @param minX Minimum X value. The scroller will not scroll past this
* point.
* @param maxX Maximum X value. The scroller will not scroll past this
* point.
* @param minY Minimum Y value. The scroller will not scroll past this
* point.
* @param maxY Maximum Y value. The scroller will not scroll past this
* point.
*/
Scroller的fling函数就是基于手势滑动，参数的意思：
- startX：开始滑动的X起点
- startY：开始滚动的Y起点
- velocityX：滑动的速度X
- velocityY：滑动的速度Y
- minX：X方向的最小值
- maxX：X方向的最大值
- minY：Y方向的最小值
- MaxY：Y方向的最大值
增加computeScroll，这个方法在fling或者startScroll方法，调用invalidate方法后执行的函数，并在里面增加刻度边界的检测，完成平滑移动：
@Override
public void computeScroll() {
// 第三步，重写computeScroll()方法，并在其内部完成平滑滚动的逻辑
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
//这是最后mScroller的最后一次滑动 进行刻度边界检测
if(!mScroller.computeScrollOffset()){
moveRecently();
}
}
}
最后重写scrollTo方法，加刻度尺滑动左右边界检测：
//重写滑动方法，设置到边界的时候不滑,并显示边缘效果。滑动完输出刻度。
@Override
public void scrollTo( int x, int y) {
//左边界检测
if (x < leftBorder - getWidth() / 2) {
x = (int)(- getWidth() / 2 +leftBorder);
}
//有边界检测
if (x + getWidth() / 2> rightBorder) {
x = (int)(rightBorder - getWidth() /2 - ruleRightSpacing);
}
if (x != getScrollX()) {
super.scrollTo(x, y);
}
}
最终运行效果如下：
总结
每一次练习，小案例都是知识的巩固和提升。
Demo链接