Android Custom View --- Continuous Slider（连续滑动器）

Android Custom View — Continuous slider

先上一张Continuous slider的图片吧

官方链接

先从最简单的开始实现
在实现的过程中，我是将圆形和线分成两个View来实现，包括进一个ViewGroup里

第一步我们先定义大体框架，如下

public class Continuousslider extends ViewGroup {
    public Continuousslider(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

    }

    class Line extends View {

        public Line(Context context) {
            super(context);
        }
    }

    class Circle extends View {

        public Circle(Context context) {
            super(context);
        }
    }

}

接下来我们绘制 Circle 和 Line，在这儿只贴出Circle的代码了，Line 的代码可以去github上看，网址会在文末放出

class Circle extends View {
        Paint paint;
        float x;//x轴坐标
        public void moveto(float x){
            this.x=x;
            invalidate();
        }

        public Circle(Context context) {
            super(context);
            paint=new Paint();
            paint.setColor(getResources().getColor(R.color.blue));
            paint.setStyle(Paint.Style.FILL);
            x=getLeft()+20;
        }
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if(x>getRight()-20)x=getRight()-20;
            else if(x<=getLeft()+20) {//超出左边界时加以限制，并设置灰色
                x = getLeft() + 20;
                paint.setColor(getResources().getColor(R.color.gray));
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(5);
            }else{
                paint.setColor(getResources().getColor(R.color.blue));
                paint.setStyle(Paint.Style.FILL);

            }
            canvas.drawCircle(x, (getTop()+getBottom())/2 , 15, paint);
        }

    }

定义好了Line后我们就要来完善 Continuousslider 了，这一步就是简单的把 Circle 和 Line 添加进 Continuousslider ,并且计算一下大小， 很简单

    Line line;
    Circle circle;
    public Continuousslider(Context context) {
        super(context);
        init();
    }
    public Continuousslider(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    void init(){
        line=new Line(getContext());
        circle=new Circle(getContext());
        addView(line);
        addView(circle);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        float xpad = (float) (getPaddingLeft() + getPaddingRight());
        float ypad = (float) (getPaddingTop() + getPaddingBottom());
        float ww = (float) w - xpad;
        float hh = (float) h - ypad;
        circle.layout(0, 0, (int) ww, (int) hh);
        line.layout(0, 0, (int) ww, (int) hh);
    }

现在我们得到了这样的一个东西

但是它对我们的拖动还不会有任何的响应，所以接下来的一步就是添加点击事件了

@Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.d("AAA",event.toString());
        if(event.getAction()==MotionEvent.ACTION_MOVE||event.getAction()==MotionEvent.ACTION_UP||
                event.getAction()==MotionEvent.ACTION_DOWN
                ){
            moveto(event.getX());
            return true;
        }
        return false;
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return true;
    }

    void moveto(float x){
        line.moveto(x);
        circle.moveto(x);
    }

这儿的moveto就是移动组件的代码，接下来会给出。

Circle 和 Line 的moveto（）都很简单，只需要改变一下横坐标值，然后重新绘制一下就行了

public void moveto(float x){
            this.x=x;
            invalidate();
        }

现在我们已经基本实现了拖动的功能了
;

但是感觉这样有点儿单调，我们希望可以给它加一点动画效果，让它看起来更酷炫，就像第一张图里的focus那样

我们采用了ValueAnimator来实现Circle 的动画效果，先上代码

class Circle extends View implements ValueAnimator.AnimatorUpdateListener{
        Paint paint;
        Paint bg;//透明外圈
        float x;
        int radius;
        int radius2;//外圈半径
        boolean temp;//temp 为true则圆圈变大，否则变小
        ValueAnimator animator;
        public void moveto(float x){
            this.x=x;
            invalidate();
        }
        public Circle(Context context) {
            super(context);
            paint=new Paint();
            paint.setColor(getResources().getColor(R.color.blue));
            bg=new Paint();
            bg.setStyle(Paint.Style.FILL);
            bg.setColor(getResources().getColor(R.color.blue));
            bg.setAlpha(26);
            paint.setStyle(Paint.Style.FILL);
            x=getLeft()+20;
            radius=15;
            radius2=15;
            animator=new ValueAnimator();
        }
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if(x>getRight()-30)x=getRight()-30;
            else if(x<=getLeft()+30) {
                x = getLeft() + 30;
                paint.setColor(getResources().getColor(R.color.gray));
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(5);
                bg.setColor(getResources().getColor(R.color.gray));
                bg.setAlpha(80);
            }else{
                paint.setColor(getResources().getColor(R.color.blue));
                paint.setStyle(Paint.Style.FILL);
                bg.setColor(getResources().getColor(R.color.blue));
                bg.setAlpha(80);
            }
            canvas.drawCircle(x, (getTop()+getBottom())/2 , radius2, bg);
            canvas.drawCircle(x, (getTop()+getBottom())/2 , radius, paint);
        }
        public void scalel() {
            temp=true;
        }
        public void scales() {
            temp=false;
        }
        public void startAnimation(int duration){
            ValueAnimator v=ValueAnimator.ofInt(0,100);
            v.setStartDelay(0);
            v.setDuration(duration);
            v.addUpdateListener(this);
            v.start();
        }
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int test = (int) animation.getAnimatedValue();//0-100中的一个数字，会不断的增加，进行重新绘制
            if(temp){
                radius=15+(15*test)/100;
                radius2=15+(35*test)/100;
            }else{
                radius2=50-(35*test)/100;
                radius=30-(15*test)/100;
            }
            invalidate();
        }
    }

在Continuousslider中调用 startAnimation方法

circle.startAnimation(200);

好了，到此所有的工作都完成了，我们已经实现了想要的结果

源码可以到我的github上查看，别忘了给个星 点击进入

转载请注明出处