AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

自定义View -简单的 SwitchView

2018-09-08 1029
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前言实现一个简单的滑动开发，效果图如下：switchView完整版本分析平分整个View为两份平分VIew测量字体的高度和宽度，确定左右View的文字的位置并进行绘制确定字体的位置和绘制绘制...

前言

实现一个简单的滑动开发，效果图如下：

img_8bd352f363505b3d3f857d6ce377993d.gif
switchView完整版本

分析

  1. 平分整个View为两份
img_31d27c125b210bc13851988ab7c27ce6.png
平分VIew
  1. 测量字体的高度和宽度，确定左右View的文字的位置并进行绘制
img_816feea56bd9523aa3b2d6e6cf508475.png
确定字体的位置和绘制

  1. 绘制背景颜色，如果有圆角，绘制==圆角 #f44336==

  2. 在文字下层绘制一个==背景View(矩形) #ff5722==，有圆角的情况下会绘制圆角

img_dfbf5c693b1e5b8758fda5ec24efd827.png
绘制背景View
  1. 设置点击事件，在点击事件中开启一个 ==ValueAnimator.ofFloa(1) #f44336== 动画， 在==onDraw() #f44336==不断的通过动画的执行==百分比 #f44336== 计算背景View的X轴坐标进行绘制。

6 动画完成保存状态和设置文字的颜色。

编码

确定属性

首先确定需要哪一些属性，然后在慢慢的对属性进行实现。

<declare-styleable name="SwitchView">
    <!--关闭文字-->
    <attr name="off_text" format="string" />
    <!--打开文字-->
    <attr name="on_text" format="string" />
    <!--打开文字颜色-->
    <attr name="on_text_color" format="color" />
    <!--关闭文字颜色-->
    <attr name="off_text_color" format="color" />
    <!--无状态下的背景颜色-->
    <attr name="background_color" format="color" />
    <!--打开的背景颜色-->
    <attr name="on_background_color" format="color" />
    <!--关闭的背景颜色-->
    <attr name="off_background_color" format="color" />
    <!--字体大小-->
    <attr name="text_size" format="dimension" />
    <!--圆角-->
    <attr name="radius" format="dimension" />
</declare-styleable>

创建SwitchView

==SwitchView #f44336== 使用的完全接手 ==onDraw #f44336== ，自行进行相关绘制的自定义方式，所以我们需要继承至 ==View #f44336==

public class SwitchView extends View{
    public SwitchView(Context context) {
        this(context, null);
    }

    public SwitchView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SwitchView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttr(context, attrs);
    }

    private void initAttr(Context context, AttributeSet attrs) {
        
    }
}

初始化相关属性

/**
 * 初始化属性
 *
 * @param context 上下午
 * @param attrs 属性
 */
private void initAttr(Context context, AttributeSet attrs) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SwitchView);
    //关闭文字
    offText = typedArray.getString(R.styleable.SwitchView_off_text);
    offText = TextUtils.isEmpty(offText) ? "关闭" : offText;
    //打开文字
    onText = typedArray.getString(R.styleable.SwitchView_on_text);
    onText = TextUtils.isEmpty(onText) ? "打开" : onText;
    //关闭文字颜色
    offTextColor = typedArray.getColor(R.styleable.SwitchView_off_text_color, offTextColor);
    //打开文字颜色
    onTextColor = typedArray.getColor(R.styleable.SwitchView_on_text_color, onTextColor);
    //背景颜色
    mBackgroundColor = typedArray.getColor(R.styleable.SwitchView_background_color, mBackgroundColor);
    //打开背景颜色
    mOnBackgroundColor = typedArray.getColor(R.styleable.SwitchView_on_background_color, mOnBackgroundColor);
    //关闭背景颜色
    mOffBackgroundColor = typedArray.getColor(R.styleable.SwitchView_off_background_color, mOnBackgroundColor);
    //文字大小
    textSize = typedArray.getDimension(R.styleable.SwitchView_text_size, 16);
    //圆角
    mRadius = typedArray.getDimension(R.styleable.SwitchView_radius, mRadius);
    //前面那个按钮的长度
    mFrontGroundWidth = typedArray.getDimension(R.styleable.SwitchView_front_ground_width, 0);

    typedArray.recycle();
    //初始化画笔
    mPaint = new Paint();
    mPaint.setStrokeWidth(5);
    mPaint.setAntiAlias(true);
}

测量和计算

测量整个View的宽高，确定左右两部分的长度和文字的位置

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    //View的宽度
    mWidth = w;
    //View的高度
    mHeight = h;
    //高度的中间
    mCenterHeight = h / 2;
    //宽度的中间
    mCenterWidth = w / 2;
    //创建背景矩形
    mBackgroundRectf = new RectF(0, 0, mWidth, mHeight);
    //打开的矩形
    mOnRectf = new RectF(0, 0, mCenterWidth, mHeight);
    //文字的中间高度
    Rect mRect = new Rect();
    mPaint.setTextSize(textSize);
    // 测量打开文字
    mPaint.getTextBounds(onText, 0, onText.length(), mRect);
    onTextCenterHeight = mRect.height() * 0.4f;
    //测量关闭文字
    mPaint.getTextBounds(offText, 0, offText.length(), mRect);
    offTextCenterHeight = mRect.height() * 0.4f;
}

绘制文字和背景

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 设置颜色
    mPaint.setColor(mBackgroundColor);
    ////绘制背景矩形
    canvas.drawRoundRect(mOnRectf, mRadius, mRadius, mPaint);

    //绘制打开文字
    mPaint.setColor(onTextColor);
    mPaint.setTextSize(textSize);
    canvas.drawText(onText, mCenterWidth / 2 - mPaint.measureText(onText) / 2, mCenterHeight + onTextCenterHeight, mPaint);


    //绘制关闭文字
    mPaint.setColor(offTextColor);
    mPaint.setTextSize(textSize);
    canvas.drawText(offText, (mCenterWidth + mCenterWidth / 2) - mPaint.measureText(offText) / 2, mCenterHeight + offTextCenterHeight, mPaint);

}

查看效果：

img_fcf0b73b6fedf34cc3cb4752725e89fc.png
背景效果

绘制打开背景

绘制开关颜色

mOnRectf = new RectF(0 , 0, width , mHeight);
mPaint.setColor(mOnBackgroundColor);
canvas.drawRoundRect(mOnRectf, mRadius, mRadius, mPaint);
img_41709999f3fe91687dfa982d3cea779e.png
打开预览

完善细节

基本上到这一步骤就已经是差不多了，现在需要做的是:

  • 响应点击事件，启动动画
  • 根据动画的执行值更改RectF的left的值，如果处于打开，那么left增加，关闭则left减少
  • 定义一个接口，动画完成回调结果。

点击事件和动画

 @Override
public void onClick(View v) {
    startAnim();
}

private void startAnim() {
    if (valueAnimator == null || !valueAnimator.isRunning()) {
        //发散一个宽度的值
        valueAnimator = ValueAnimator.ofFloat(1).setDuration(300);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                aminValueHundred = (float) animation.getAnimatedValue();
                invalidate();
            }

        });
        isExchangeColor = false;
        valueAnimator.start();
    }
}

onDraw代码

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 更改颜色
    mPaint.setColor(mBackgroundColor);
    // 绘制背景矩形
    canvas.drawRoundRect(mBackgroundRectf, mRadius, mRadius, mPaint);


    //当前百分比的宽度
    int valueWidth = (int) (mCenterWidth * aminValueHundred);
    if (isOn) {
        //打开
        mOnRectf = new RectF(0 + valueWidth, 0, mCenterWidth + valueWidth, mHeight);
        mPaint.setColor(mOnBackgroundColor);
        if (aminValueHundred >= 0.5 && !isExchangeColor) {
            ////置换两种颜色
            mTempTextColor = offTextColor;
            offTextColor = onTextColor;
            onTextColor = mTempTextColor;
            isExchangeColor = true;
        }
        if (aminValueHundred >= 0.5) {
            mPaint.setColor(mOffBackgroundColor);
        }
    } else {
        //关闭
        mOnRectf = new RectF(mCenterWidth - valueWidth, 0, mWidth - valueWidth, mHeight);
        mPaint.setColor(mOffBackgroundColor);
        if (aminValueHundred >= 0.5 && !isExchangeColor) {
            //置换两种颜色
            mTempTextColor = onTextColor;
            onTextColor = offTextColor;
            offTextColor = mTempTextColor;
            isExchangeColor = true;
        }
        if (aminValueHundred >= 0.5) {
            mPaint.setColor(mOnBackgroundColor);
        }
    }
    if (!isOn && aminValueHundred == 1 && valueAnimator == null) {
        mOnRectf = new RectF(valueWidth, 0, mWidth, mHeight);
        mPaint.setColor(mOffBackgroundColor);
    }

    canvas.drawRoundRect(mOnRectf, mRadius, mRadius, mPaint);

    //绘制打开文字
    mPaint.setColor(onTextColor);
    mPaint.setTextSize(textSize);
    canvas.drawText(onText, mCenterWidth / 2 - mPaint.measureText(onText) / 2, mCenterHeight + onTextCenterHeight, mPaint);


    //绘制关闭文字
    mPaint.setColor(offTextColor);
    mPaint.setTextSize(textSize);
    canvas.drawText(offText, (mCenterWidth + mCenterWidth / 2) - mPaint.measureText(offText) / 2, mCenterHeight + offTextCenterHeight, mPaint);
    // 动画结束
    if (aminValueHundred == 1 && valueAnimator != null) {
        valueAnimator = null;
        isOn = !isOn;
        if (onSwitchListener != null) {
            onSwitchListener.onSwitchListener(isOn, isOn ? onText : offText);
        }

    }
}

查看效果：


img_e40fa08c80d4f3916980e1916d3f73ff.gif
完成预览

最后

当前只是实现了一个简单的切换，更多背景的颜色切换并没有完成，还有一些细节，现在还是比较生硬，希望下一步能实现更细腻的动画，就像下面这个这样：

img_dfff76ddf2cad12b39246cf25289c9d2.png
switch button

未完待续、敬请期待！
我的博客地址
源码地址

img_1ee92a858822d3b1d90a45e40e7b1042.jpe
FullScreenDeveloper
文章标签：
前端开发
禁言
目录
相关文章
想你依然心痛
|
XML Android开发 数据格式
自定义View入门
自定义View入门
想你依然心痛
103 0
petterp
|
XML 前端开发 Android开发
Android自定义View-入门(明白自定义View和自定义ViewGroup)
为什么要自定义View? 主要是Andorid系统内置的View 无法实现我们的 需求，我们需要针对我们的业务需求定制我们想要的 View.
petterp
130 0
Android自定义View-入门(明白自定义View和自定义ViewGroup)
FranzLiszt1847
|
容器
自定义View
自定义View 画一个实心圆 效果图 创建attrs.xml文件 初始化样式属性 支持Padding属性 支持wrap_content属性 布局文件中的应用 画一个带外圆环的圆 效果图 创建attrs.xml文件 初始化样式属性 内圆与外圆环的绘制 布局文件中的应用 画一个外圆环可根据数值变动的圆 效果图 创建attrs.xml文件 初始化样式属性 绘制View 提供方法修改样式 布局文件中的应用
FranzLiszt1847
107 0
自定义View
李蔚蓬
|
前端开发 Android开发
3.6 自定义View (3.6.1)
本文对应项目的码云地址：https://gitee.com/wanchuanxy/AndroidHeroesTest/tree/master/3/SystemWidget Android给我们提供了丰富的组件库来创建丰富的UI效果，同时也提供了非常方便的拓展方法。
李蔚蓬
735 0
李蔚蓬
|
XML Android开发 数据格式
3.6 自定义View (3.6.2)
本文对应项目的码云地址：https://gitee.com/wanchuanxy/AndroidHeroesTest/tree/master/3/SystemWidget 3.6.2 创建复合控件 创建复合控件可以很好地创建出具有重用功能的控件集合。
李蔚蓬
659 0
安卓搬运工
|
前端开发 Android开发 数据格式
Android自定义view水波纹效果案例
想必做安卓的小伙伴都知道，在一个项目中或多或少的会使用到自定义view，因为原生框架始终满足不了UI-UE的需求，入不了他们的法眼。下面简单写一个自定义view。
安卓搬运工
1704 0
科技小先锋
关于自定义View的一些东西
科技小先锋
1034 0
ccj659
|
Android开发
自定义View解决滑动冲突
最近在读Android开发艺术探索,本文作为自己对view的滑动冲突的理解和实践记录 而滑动冲突,需要了解Android的事件分发机制,如果这个还有些疑惑的地方,请参考这篇文章,以及其中的参考文章 还需要View的Measure和Layout的相关知识View的Measure流程总结 自定义view注意 1.
ccj659
1083 0
kylinarm
|
XML 数据格式
自定义View(一)
一、初探 大家都知道自定义view需要重写onMeasure和onDraw两个方法，这里我们在讲这两个方法前首先看看什么时候走这两个方法，这里只是大致讲讲方便理解，详细的之后会说。
kylinarm
754 0
kylinarm
|
XML 数据格式 容器
自定义View（二）简单的viewgroup
上篇讲了自定义View的简单实现，这章就趁热打铁，讲讲自定义ViewGroup的简单实现。 一、初探 和上篇一样，看看ViewGroup的绘制是什么走的。
kylinarm
783 0