高仿京东金融的数值滚动尺

HelloJack

发布于 2018-08-28 14:56:35

4920

发布于 2018-08-28 14:56:35

以前博客讲的大部分都是静态的自定义View的编写,其实无非就是“画画”画出一个好看的效果,而这篇博客写的是写一个动态的自定义控价,这里不仅需要"画",还要各种事件和计算,废话不说现在就讲讲自定义数值滚动尺,这个用的还是满广的，例如京东金融的通过滚动尺选择金额等,而这次就是高仿京东金融的数值滚动尺。首先看看下效果图，如下

show.gif

首先先给你们各个变量的含义，以免在后面的讲解中不知变量的意思，代码如下:

//最小值
private int minValue;
//最大值
private int maxValue;
//当前值
private int currentValue;
//最小单位值
private int minUnitValue;
//最小当前值
private int minCurrentValue;
//字体大小
private int textSize;
//字体颜色
private int textColor;
//线颜色
private int dividerColor;
//指示线颜色
private int indicatrixColor;
//画线的画笔
private Paint linePaint;
//控价的宽度
private int slideRulerWidth=0;
//滑动的宽度
private int rollingWidth;
//屏幕的宽
private int wrapcontentWidth;
//屏幕的高
private int wrapcontentHeight;
//一屏显示Item
private int showItemSize;
//刻度和数值的间距
private int marginCursorData;
//长刻度的大小
private int longCursor;
//短刻度的大小
private int shortCursor;
//计算每个刻度的间距
private int marginWidth=0;
//数据回调接口
private SlideRulerDataInterface slideRulerDataInterface;
//正在滑动状态
private int isScrollingState=1;
//快速一滑
private int fastScrollState=2;
//结束滑动
private int finishScrollState=3;

private GestureDetector mDetector;
private Display display =null;
private Scroller scroller;

public SlideRuler(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context,attrs,defStyleAttr);
        display=((WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
        //屏幕宽高
        wrapcontentWidth=display.getWidth();
        wrapcontentHeight=display.getHeight();
        //初始化自定义的参数
        TypedArray typedArray=context.getTheme().obtainStyledAttributes(attrs,R.styleable.slideruler,defStyleAttr,0);
        textSize = typedArray.getDimensionPixelSize(R.styleable.slideruler_textSize,(int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP,15,getResources().getDisplayMetrics()));
        textColor=typedArray.getColor(R.styleable.slideruler_textColor,Color.DKGRAY);
        dividerColor=typedArray.getColor(R.styleable.slideruler_dividerColor,Color.BLACK);
        indicatrixColor=typedArray.getColor(R.styleable.slideruler_indicatrixColor,Color.BLACK);
        minValue=typedArray.getInteger(R.styleable.slideruler_min_value,0);
        maxValue=typedArray.getInteger(R.styleable.slideruler_max_value,199000);
        currentValue=typedArray.getInteger(R.styleable.slideruler_current_value,10000);
        minUnitValue=typedArray.getInteger(R.styleable.slideruler_min_unitValue,1000);
        minCurrentValue=typedArray.getInteger(R.styleable.slideruler_min_currentValue,1000);
        showItemSize=typedArray.getInteger(R.styleable.slideruler_show_itemSize,30);
        marginCursorData=typedArray.getDimensionPixelSize(R.styleable.slideruler_margin_cursor_data,(int)TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP,10,getResources().getDisplayMetrics()));
        longCursor=typedArray.getDimensionPixelSize(R.styleable.slideruler_longCursor,(int)TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP,25,getResources().getDisplayMetrics()));
        shortCursor=typedArray.getDimensionPixelSize(R.styleable.slideruler_shortCursor,(int)TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP,15,getResources().getDisplayMetrics()));

        scroller=new Scroller(context);
        mDetector=new GestureDetector(context,myGestureListener);

        //初始化Paint
        linePaint=new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setTextAlign(Paint.Align.CENTER);
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setTextSize(textSize);
        //检查当前值是不是正确值
        checkCurrentValue();
    }

其次自定义View也好自定义控价也好

protected void onMeasure(int widthMeasureSpec, int heigh)

也是蛮重要的所以照例也讲讲，用来确定控件的大小，代码如下:

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthModel=MeasureSpec.getMode(widthMeasureSpec);
        int heightModel=MeasureSpec.getMode(heightMeasureSpec);
        int widthSize=MeasureSpec.getSize(widthMeasureSpec);    
        int heightSize=MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;
        if(widthModel==MeasureSpec.EXACTLY){
            width=widthSize;
        }else{
            width=wrapcontentWidth;
        }
        if(heightModel==MeasureSpec.EXACTLY){
            height=heightSize;
        }else{
            height=(getPaddingBottom()+getPaddingTop()+(wrapcontentHeight/4));
        }
        setMeasuredDimension(width,height);
    }

代码的意思也很简单，当MeasureSpec里的specMode类型是EXACTLY时，即设置了明确的值或者是MATCH_PARENT时，就直接把MeasureSpec.getSize()的值赋进去，如果不是即为WARP_CONTENT时，就直接赋给屏幕的宽高。控件的宽高都是同一样的做法。

当控件大小确定之后，我们再利用

protected void onSizeChanged(int w, int h, int oldw, int oldh)

进行一些变量的赋值，代码如下:

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        //计算每个刻度的间距
        marginWidth=getWidth()/showItemSize;
        //开始时的距离
        rollingWidth=(int)(marginWidth*cursorNum());
        //整个控件的宽度
        slideRulerWidth=(maxValue/minUnitValue)*marginWidth;
        super.onSizeChanged(w, h, oldw, oldh);
    }

到此我们就可以在onDraw(Canvas canvas)方法里画出初始的界面，而以后的动态只是通过不断的改变数值再进行绘画而已，代码如下:

@Override
protected void onDraw(Canvas canvas){
    //画最基础的两条线
    drawBaseView(canvas);
    //画初始的界面
    drawBaseLine(canvas);
}
    
//画最基础的两条线
public void drawBaseLine(Canvas canvas){
    //画中间的线
    linePaint.setColor(indicatrixColor);
    canvas.drawLine(getWidth()/2,0,getWidth()/2,getHeight(),linePaint);
    //画底部的直线
    linePaint.setColor(dividerColor);
    canvas.drawLine(0,getHeight(),slideRulerWidth,getHeight(),linePaint);
}

//画初始的界面
public void drawBaseView(Canvas canvas){
    //整数刻度的个数
    int integerWidth= (int)Math.rint((currentValue-minValue)/minUnitValue);
    //剩余不整一个刻度的数值
    int residueWidth=(currentValue-minValue)%minUnitValue;
    //开始画图的X轴位置
    int startCursor=(getWidth()/2)-(marginWidth*integerWidth)-(int)(marginWidth*(float)residueWidth/minUnitValue);
        for(int i=0;i<(maxValue/minUnitValue)+1;i++){
            float xValue=startCursor+(marginWidth*i);
            if(i%10==0){
                //画长刻度
                linePaint.setColor(textColor);
                canvas.drawText((minCurrentValue*i)+"",xValue,getHeight()-longCursor-marginCursorData,linePaint);
                linePaint.setColor(dividerColor);
                canvas.drawLine(xValue,getHeight(),xValue,getHeight()-longCursor,linePaint);
            }else{
                //画短刻度
                canvas.drawLine(xValue,getHeight(),xValue,getHeight()-shortCursor,linePaint);
            }
        }
    }

在drawBaseView()方法里，也很简单，就是在二分之一宽度，画一条直线，然后在控价的底部画出宽度为整个控件的宽度的底线。接着在drawBaseView(Canvas canvas)方法里

首先用当前值(currentValue)-最小值(minValue)之后再除于最小单位值(minUnitValue)以获取整数刻度的个数
因为有余数的情况，我们再当前值(currentValue)-最小值(minValue)之后求余与最小单位值(minUnitValue)以获取余数
接着我们要获取我们画图的X轴开始的位置，因为最小值只能滑到中间，所以开始的位置为控件一半的宽度(getWidth()/2) 减去计算每个刻度的间距(marginWidth)乘以整数刻度的个数(integerWidth)即marginWidth*integerWidth再减去余数对应所产生的X轴距离即 (int)(marginWidth*(float)residueWidth/minUnitValue)
再通过For循环刻度的个数，不同的进行刻度的绘画，当i%10==0时即为一个大的单位刻度否者为一个小的单位刻度，具体代码我上面已有注释，原理和画中间线一直就不在赘述。

到此我们就已经把自定义控价静态的部分写完了，效果如下：

img.PNG

接着我们用GestureDetector绑定手势事件，根据回调手势事件的方法来改变数据和刷新页面，在GestureDetector里，我们只会回调public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)(手指在触摸屏上滑动)和public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)(手指在触摸屏上迅速移动，并松开的动作)这两个方法就可以了。具体代码如下:

private GestureDetector.SimpleOnGestureListener myGestureListener =new  GestureDetector.SimpleOnGestureListener(){
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            //滑动刷新UI
            updateView(rollingWidth+(int)distanceX,isScrollingState);
            return true;
        }
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            //快速滑动的动画
            scroller.fling(rollingWidth,0,(int)(-velocityX/1.5),0,0,(maxValue/minUnitValue)*marginWidth,0,0);
            return true;
        }
    };
    
//动态更新滑动View
public void updateView(int srcollWidth,int action){
    if(action==isScrollingState){
        //正在滑动状态(onScroll())
        rollingWidth=srcollWidth;
        float itemNum=(float)srcollWidth/marginWidth;
        currentValue=(int)(minUnitValue*itemNum);
    }else if(action==fastScrollState){
        //快速一滑(onFling())
        rollingWidth=srcollWidth;
        int itemNum=(int)Math.rint((float)rollingWidth/marginWidth);
        currentValue=(minUnitValue*itemNum);
    }else if(action==finishScrollState){
        //结束滑动(ACTION_UP)
        int itemNum=(int)Math.rint((float)rollingWidth/marginWidth);
        currentValue=minUnitValue*itemNum;
    }
    //判断是否在最小选择值
    if(currentValue<=minCurrentValue){
        rollingWidth=(minCurrentValue/minUnitValue)*marginWidth;
        currentValue=minCurrentValue;
    }
    //判断是否在最大值
    if(currentValue>=maxValue){
        rollingWidth=marginWidth*allCursorNum();
        currentValue=maxValue;
    }
    //回调数值
    if(slideRulerDataInterface!=null){
        slideRulerDataInterface.getText(currentValue+"");
    }
    invalidate();
}

1.当我们滑动我们的控件是，就会回调GestureDetector里的onScroll()方法，然后rollingWidth+(int)distanceX即当前滑动的宽度(rollingWidth)加上滑动产生的宽度(distanceX)为动态产生的宽度，再除于计算每个刻度的间距(marginWidth)从而得到刻度的数量，有了刻度的数量即可得到当前值currentValue=(int)(minUnitValue*itemNum);有了当前值调用invalidate();刷新onDraw()即可完成连续滑动时动态绘制。

2.当我们快速一划时，就会回调GestureDetector里的onFling()方法，在方法里用scroller.fling(rollingWidth,0,(int)(-velocityX/1.5),0,0,(maxValue/minUnitValue)*marginWidth,0,0);以实现滑动有一个好的动画效果，此时在如下代码里:

  @Override
  public void computeScroll() {
    if(scroller.computeScrollOffset()){
        //快滑刷新UI
        updateView(scroller.getCurrX(),fastScrollState);
    }
  }

的scroller.computeScrollOffset()==true;而scroller.getCurrX()就相当于为动态产生的滑动宽度剩下的也是调用updateView()方法不断的刷新，当scroller.computeScrollOffset()==false就滑动动画结束了。

3.最后当我们滑动结束手指抬起时:

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch(event.getAction()){
            case MotionEvent.ACTION_UP:
                updateView(0,finishScrollState);
            default:
                mDetector.onTouchEvent(event);
                break;
        }
        return true;
    }

我们也要掉updateView(),以保持滑动的最后结构都指在指针上。

最后大家要深入学习的话，请看https://github.com/jack921/SlideRuler

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.05.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

高仿京东金融的数值滚动尺

高仿京东金融的数值滚动尺

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐