自定义View之SwitchView

工作(我)太(太)忙(懒) 太长时间没有写博客了,再不写今年一晃就要过去了,顺便也总结下今年工作的一些技术点吧。这篇先从一个简单的自定义控件开始吧 先看最终效果图:

这是一个性别选择的控件 本质上是一个Switch类似的控件 需要满足的需求点有:

  • 支持左右滑动选中
  • 支持左右点击选中
  • 支持按钮渐变色
  • 支持选中和未选中状态字体颜色的变化

由此得出所涉及的自定义View的技术点有:

  • View的触摸事件和滑动事件的处理
  • 颜色渐变的计算相关api的运用

接下就从最基本的代码开始:

//初始化
public class GenderSwitchView extends View {
     public GenderSwitchView(Context context) {
        this(context, null);
    }

    public GenderSwitchView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GenderSwitchView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

}

复制代码

初始逻辑


 private ShapeDrawable backgroundDrawable;
 private ShapeDrawable genderDrawable;
 private float mProgress;
 private int mTouchSlop;
    
 private void initView(Context context) {
        int testSize = SizeUtils.sp2px(16);
        //这里是将宽高根据ui 设计图计算写死
        height = SizeUtils.dp2px(45);
        width = SizeUtils.dp2px(200);
        //圆角角度
        int radiis = SizeUtils.dp2px(80);
        //获取系统识别最小的滑动距离
        mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
        //获取系统触发点击事件的时长
        mClickTimeout = ViewConfiguration.getPressedStateDuration() + ViewConfiguration.getTapTimeout();

        selectTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        selectTextPaint.setTextAlign(Paint.Align.CENTER);
        selectTextPaint.setTextSize(testSize);
        selectTextPaint.setColor(Color.WHITE);

        defaultTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        defaultTextPaint.setTextAlign(Paint.Align.CENTER);
        defaultTextPaint.setTextSize(testSize);
        defaultTextPaint.setColor(grayText);

        mProgressAnimator = new ValueAnimator();
        
        float[] outerRadii = {radiis, radiis, radiis, radiis, radiis, radiis, radiis, radiis};//外矩形 左上、右上、右下、左下的圆角半径
        RectF inset = new RectF(0, 0, 0, 0);//内矩形距外矩形,左上角x,y距离, 右下角x,y距离
        float[] innerRadii = {0, 0, 0, 0, 0, 0, 0, 0};//内矩形 圆角半径
        RoundRectShape roundRectShape = new RoundRectShape(outerRadii, inset, innerRadii);
        backgroundDrawable = new ShapeDrawable(roundRectShape);
        int back_color = ContextCompat.getColor(context, R.color.col_f3f3f3);
        backgroundDrawable.getPaint().setColor(back_color);
        backgroundDrawable.setBounds(0, 0, width, height);

        
        girlStartColor = ContextCompat.getColor(context, R.color.col_ff719e);
        girlEndColor = ContextCompat.getColor(context, R.color.col_ffae9b);

        boyStartColor = ContextCompat.getColor(context, R.color.col_55a8ff);
        boyEndColor = ContextCompat.getColor(context, R.color.col_8998ff);
        //渐变色计算类
        argbEvaluator = new ArgbEvaluator();

        RoundRectShape shape = new RoundRectShape(outerRadii, inset, innerRadii);
        linearGradient = new LinearGradient(0, 0, boundsWidth, height, girlStartColor, girlEndColor, Shader.TileMode.REPEAT);
        genderDrawable = new ShapeDrawable(shape);
        genderDrawable.getPaint().setShader(linearGradient);
        genderDrawable.getPaint().setStyle(Paint.Style.FILL);
        boundsWidth = width / 2;
        bundsX = (int) (mProgress * boundsWidth);
        bounds = new Rect(bundsX, 0, boundsWidth + bundsX, height);
        genderDrawable.setBounds(bounds); 
    }
复制代码

其中这段代码创建的是最底层圆角矩形Drawable:

float[] outerRadii = {radiis, radiis, radiis, radiis, radiis, radiis, radiis, radiis};//外矩形 左上、右上、右下、左下的圆角半径
RectF inset = new RectF(0, 0, 0, 0);//内矩形距外矩形,左上角x,y距离, 右下角x,y距离
float[] innerRadii = {0, 0, 0, 0, 0, 0, 0, 0};//内矩形 圆角半径
RoundRectShape roundRectShape = new RoundRectShape(outerRadii, inset, innerRadii);
backgroundDrawable = new ShapeDrawable(roundRectShape);
int back_color = ContextCompat.getColor(context, R.color.col_f3f3f3);
backgroundDrawab
le.getPaint().setColor(back_color);
backgroundDrawable.setBounds(0, 0, width, height);
复制代码

创建用于滑动的选择性别的Drawable,这个Drawable涉及渐变色 用到了LinearGradient相关api Android之Shader用法详细介绍

//女士Drawable 颜色范围
girlStartColor = ContextCompat.getColor(context, R.color.col_ff719e);
girlEndColor = ContextCompat.getColor(context, R.color.col_ffae9b);
//男士Drawable 颜色范围
boyStartColor = ContextCompat.getColor(context, R.color.col_55a8ff);
boyEndColor = ContextCompat.getColor(context, R.color.col_8998ff);
        
RoundRectShape shape = new RoundRectShape(outerRadii, inset, innerRadii);
//颜色渐变
linearGradient = new LinearGradient(0, 0, boundsWidth, height, girlStartColor, girlEndColor, Shader.TileMode.REPEAT);
genderDrawable = new ShapeDrawable(shape);
//设置颜色渐变
genderDrawable.getPaint().setShader(linearGradient);
genderDrawable.getPaint().setStyle(Paint.Style.FILL);
//Drawable 宽高 为背景的一半
boundsWidth = width / 2;
bundsX = (int) (mProgress * boundsWidth);
bounds = new Rect(bundsX, 0, boundsWidth + bundsX, height);
genderDrawable.setBounds(bounds);
复制代码

然后调用onDraw 进行绘制 看看效果:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //这里因为是知道具体宽高 在初始化的时候已经计算出来 这里直接设置进去即可
        setMeasuredDimension(width, height);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    backgroundDrawable.draw(canvas);//先绘制背景Drawable
    genderDrawable.draw(canvas);//再绘制上面一层用于可滑动的Drawable         
}
复制代码

效果:

到这里最基本的已经做完了 但是目前还不能滑动 所以要开始重写onTouchEvent进行处理 这个也是这个自定义View 的重点 另外在滑动过程中择性别的Drawable需要渐变颜色:

    float mStartX;
    float mStartY;
    float mLastX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float deltaX = event.getX() - mStartX;
        float deltaY = event.getY() - mStartY;
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mStartX = event.getX();
                mStartY = event.getY();
                mLastX = mStartX;
                setPressed(true);
                break;
            case MotionEvent.ACTION_MOVE:
                float x = event.getX();
                //计算滑动的比例 boundsWidth为整个宽度的一半
                setProcess(getProgress() + (x - mLastX) / boundsWidth);
                //这里比较x轴方向的滑动 和y轴方向的滑动 如果y轴大于x轴方向的滑动 事件就不在往下传递
                if ((Math.abs(deltaX) > mTouchSlop / 2 || Math.abs(deltaY) > mTouchSlop / 2)) {
                    if (Math.abs(deltaY) > Math.abs(deltaX)) {
                        return false;
                    }
                }
                mLastX = x;
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                setPressed(false);
                //计算从手指触摸到手指抬起时的时间
                float time = event.getEventTime() - event.getDownTime();
                //如果x轴和y轴滑动距离小于系统所能识别的最小距离 切从手指按下到抬起时间 小于系统默认的点击事件触发的时间  整个行为将被视为触发点击事件
                if (Math.abs(deltaX) < mTouchSlop && Math.abs(deltaY) < mTouchSlop && time < mClickTimeout) {
                    //获取事件触发的x轴区域 主要用于区分是左边还是右边
                    float clickX = event.getX();

                    //如果是在左边
                    if (clickX > boundsWidth) {
                        if (mProgress == 1.0f) {
                            return false;
                        } else {
                            animateToState(true);
                        }
                    } else {
                        if (mProgress == 0.0f) {
                            return false;
                        } else {
                            animateToState(false);
                        }
                    }
                    return false;
                } else {
                    boolean nextStatus = getProgress() > 0.5f;
                    animateToState(nextStatus);
                }
                break;
        }
        return true;
    }
复制代码

通过滑动的距离来计算性别选着Drawable的绘制范围 :

全局创建了一个mProgress 用于计算性别选择Drewable的绘制范围 和颜色渐变的过程 当mProgress =1时 在右边 mProgress=0时在左边

public void setProcess(float progress) {
        LogUtils.e("setProcess(GenderSwitchView.java:141)进度" + progress);
        float tp = progress;
        if (tp > 1) {
            tp = 1;
        } else if (tp < 0) {
            tp = 0;
        }
        updatePaintStyle(tp);
        this.mProgress = tp;
        bundsX = (int) (mProgress * boundsWidth);
        bounds.left = bundsX;
        bounds.right = boundsWidth + bundsX;
        genderDrawable.setBounds(bounds);
        invalidate();
    }
复制代码

通过滑动距离来计算颜色的渐变 这里用到颜色范围计算的api ArgbEvaluator

private void updatePaintStyle(float tp) {
       int  startColor = (int) (argbEvaluator.evaluate(tp, girlStartColor, boyStartColor));
       int endColor = (int) (argbEvaluator.evaluate(tp, girlEndColor, boyEndColor));
       LinearGradient linearGradient = new LinearGradient(0, 0, boundsWidth, height, startColor, endColor, Shader.TileMode.REPEAT);
       //将计算好的 颜色范围 重新设置到Drawable
      genderDrawable.getPaint().setShader(linearGradient);

    }
复制代码

使用ValueAnimator来处理点击事件的动画效果:

protected void animateToState(boolean checked) {
        float progress = mProgress;
        if (mProgressAnimator == null) {
            return;
        }
        if (mProgressAnimator.isRunning()) {
            mProgressAnimator.cancel();
            mProgressAnimator.removeAllUpdateListeners();
        }
        mProgressAnimator.setDuration(mAnimationDuration);
        if (checked) {
            //右边
            mProgressAnimator.setFloatValues(progress, 1f);
        } else {
            //左边
            mProgressAnimator.setFloatValues(progress, 0.0f);
        }
        mProgressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mProgress = (float) animation.getAnimatedValue();
                //通过ValueAnimator 进度更新 Drawable 渐变色范围
                updatePaintStyle(mProgress);
                bundsX = (int) (mProgress * boundsWidth);
                bounds.left = bundsX;
                bounds.right = boundsWidth + bundsX;
                //更新性别选择Drawable的绘制范围
                genderDrawable.setBounds(bounds);
                //绘制
                postInvalidate();
            }
        });
        mProgressAnimator.start();
    }
复制代码

到这里所有事件相关的工作都做完了 看看效果:

剩下就是一些其他细节需求 最外层的文字 和标示图片等 另外文字的绘制需要计算BaseLine也就是绘制基准线:

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //计算图片绘制的 x,y
        drawBitmapX = SizeUtils.dp2px(22);
        int textMargin = SizeUtils.dp2px(5);
        drawBitmapY = (height - girlSign.getHeight()) / 2;
        
        String mText = "男士";
        Rect bounds = new Rect();
        //测量文字的宽度
        selectTextPaint.getTextBounds(mText, 0, mText.length(), bounds);
        //获取文字的高度
        int textHeight = bounds.height();
        //计算文字绘制的 x,y
        drawTextX = drawBitmapX + girlSign.getWidth() + textMargin + bounds.width() / 2;
        drawTextY = height / 2 + textHeight / 2;
    }
复制代码

最后一同绘制 其中文字颜色的变化 和图标的变化全都集中在更新性别选择Drawable 颜色渐变函数中 处理 这里不再贴代码了:

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        backgroundDrawable.draw(canvas);
        genderDrawable.draw(canvas);
        canvas.drawBitmap(girlSign, drawBitmapX, drawBitmapY, bitmapPaint);
        canvas.drawBitmap(boySign, width / 2 + drawBitmapX, drawBitmapY, bitmapPaint);
        canvas.drawText("女士", drawTextX, drawTextY, selectTextPaint);
        canvas.drawText("男士", width / 2 + drawTextX, drawTextY, defaultTextPaint);
    }
复制代码

最终效果:

总结:在所有的自定义SwitchView 基础上都少不少触摸事件的处理 所以掌握触摸事件的处理情况下 剩下的各种花样需求都万变不离其宗 最后给上完整源码地址SwitchView 希望可以帮助到更多的人

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值