前言
很多人觉得Android的用户体验没有iOS好，但是近年来，随着众多Android开发者的努力，现在的Android已经有着不输于iOS的实力，用户体验也在直线上升。
今天要和大家分享的是一个丝滑般的控件Q弹效果，希望对大家的学习和工作有所启发和帮助。
废话就不多说了，直接上效果图，让你感受一下到底有多丝滑，又有多Q弹。
这Q弹的动画，妖艳的色彩转换，着实和市面上的普通Switch控件不太一样。下面对它逐一拆解，从0到1实现它。
设计思路
Android系统提供的SwitchButon很好地体现了metiarial design设计风格，但不够妖艳。我希望用两个比较冲突的对比色进行控件的颜色设计，这样摆在浅色背景页面的时，控件可以达到一种直刺眼睛的效果。抓人、妖艳、骚气外放。只要整体页面搭配得当，该控件必定可以“外骚内纯”。微微模糊的光晕可以使得本就亮丽的颜色变得更加妖艳。
为增加设计的可扩展性，可以通过改变颜色从而达到体现不同风格的目的。
image
实现方式
总体而言，虽然控件的外表非常妖艳，但交互逻辑是比较简单的。不考虑继承自系统Switch，因为并不需要再去了解如何扩展Switch。因此直接继承自View即可。整个逻辑控制在onTouchEvent中实现，声明好各个可配置的属性，如颜色、大小等等。
UI绘制
可以看到，图形由两大部分构成，一个是前面蓝色的圆角矩形（指示器），一个是后面红色的长条矩形（背景条），分别对这两个图形进行绘制即可。onDraw部分的代码如下：
- 画背景条：
其中bkgRect代表待绘制矩形区域范围，height、width为控件长宽，bkgBarW、bkgBarH为背景条长宽，由于是圆角矩形，调用canvas的drawRoundRect方法进行绘制，bkgBarPaint控制背景条颜色
//画背景条
RectF bkgRect = new RectF((width - bkgBarW) / 2f, height / 2 - (bkgBarH / 2), (width - bkgBarW) / 2f + bkgBarW, height / 2 + (bkgBarH / 2));
canvas.drawRoundRect(bkgRect, bkgBarH / 4, bkgBarH / 4, bkgBarPaint);
- 画前景圆角矩形：
同样的，indicatorRect为待绘制圆角矩形的区域范围，indicatorW、indicatorH为指示器宽高，indicatorX、indicatorY为指示器的中心坐标点，该坐标之后会结合animator进行动态计算，最后调用canvas的drawRoundRect进行绘制
//画指示器
RectF indicatorRect = new RectF(
indicatorX,
indicatorY,
indicatorW + indicatorX,
(height - indicatorH) / 2 + indicatorH
);
canvas.drawRoundRect(indicatorRect, indicatorH / 6, indicatorH / 6, indicatorPaint);
- 画图标或文字：
这部分计算好文字或图标的坐标进行绘制即可，需要注意的是，如果要绘制文字，需要计算出文字的基线位置，方便与指示器在视觉上居中
//画图标
int baseLineY = (int) (indicatorRect.centerY() - textTop / 2 - textBottom / 2);//基线中间点的y轴计算公式
if (status == false) {
canvas.drawText("♂", indicatorRect.centerX(), baseLineY, textPaint);
} else {
canvas.drawText("♀", indicatorRect.centerX(), baseLineY, textPaint);
}
- 动画实现
为方便控制，定义两个AnimatorSet，分别为animOnSet、animOffSet，animOnSet代表开关选择器打开时的动画合集，animOffSet代表开关选择器关闭时的动画合集。设置为BounceInterpolator即可配置弹性效果。
animatorOn = ValueAnimator.ofFloat(indicatorStartX, indicatorEndX);
animatorOn.setDuration(500);
animatorOn.setInterpolator(new BounceInterpolator());
animatorOn.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
indicatorX = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animOnSet = new AnimatorSet();
animOnSet.playTogether(animatorOn, animatorColorOn);
animatorOff = ValueAnimator.ofFloat(indicatorEndX, indicatorStartX);
animatorOff.setDuration(500);
animatorOff.setInterpolator(new BounceInterpolator());
animatorOff.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
indicatorX = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animOffSet = new AnimatorSet();
animOffSet.playTogether(animatorColorOff, animatorOff);
- 加亿点细节
仔细观察可以注意到，指示器是带有同颜色的阴影的，淡淡的阴影向四周晕开，如同光雾一般。这里使用设计好的阴影背景图切图即可，但为了增加控件通用性，采取了讨巧的办法。通过对Bitmap的处理从而在指示器颜色变化时，绘制的阴影颜色也随之变化。代码如下，bmShdow为待绘制的阴影图片
bmShadow = BitmapFactory.decodeResource(getResources(), R.drawable.img_shadow_rect_blue);
//sex_blue为配置的指示器为“开”状态时的颜色，int值
bmShadow = BitmapUtils.replacePixelColor(bmShadow, sex_blue);
再仔细观察，会发现在指示器动画执行的过程中，指示器颜色也完成了一个渐变过渡。这里有个变换颜色动态计算的操作，依然采用animator进行计算，其中indicatorPaint控制指示器颜色
animatorColorOn = new ValueAnimator();
animatorColorOn.setIntValues(sex_blue, sex_red);
animatorColorOn.setEvaluator(new ArgbEvaluator());
animatorColorOn.setDuration(500);
animatorColorOn.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int) animation.getAnimatedValue();
indicatorPaint.setColor(color);
}
});
animatorColorOff = new ValueAnimator();
animatorColorOff.setIntValues(sex_red, sex_blue);
animatorColorOff.setEvaluator(new ArgbEvaluator());
animatorColorOff.setDuration(500);
animatorColorOff.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int) animation.getAnimatedValue();
indicatorPaint.setColor(color);
}
});
最后
Android的学习是一条漫长的道路，每个地方都是值得学习的内容。
其中，控件设计或开发这个点就无处不体现着“自顶向下”的思想。在实际工作中，我们会遇到各种各样的需求，但是不要慌！只要我们静下心来，弄清需求，理清逻辑，打磨细节，做到这三点，绝大部分控件设计或开发的难题都可以迎刃而解。
我把自己这段时间整理的Android最重要最热门的学习方向资料放在了我的GitHub：https://github.com/xieyuliang/Android-P7-share/blob/master/Android，里面还有不同方向的自学编程路线、面试题集合/面经、及系列技术文章等。
资源持续更新中，欢迎大家一起学习和探讨。
网友评论