高仿苹果的Switch,android自己的实在是用着不怎么好看,效果图如下:
这里其实用到的有三张图片,一张白底的,一张绿底的,还有一张就是中间的那个白圈,只需将图片替换了现实其他的效果。
本例实现方法是继承View进行绘制滑动时的效果,首先定义三种状态,开、关、滑动,然后处理手势滑动时候的逻辑。
这里用到的核心代码是onTouchEvent的处理和onDraw方法的绘制,代码如下:
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
// 记录下按下时的x坐标
case MotionEvent.ACTION_DOWN:
mSrcX = (int) event.getX();
break;
// 计算滑动时x轴y轴的移动变化
case MotionEvent.ACTION_MOVE:
mDstX = Math.max((int) event.getX(), mThumbWidth / 2);
mDstX = Math.min(mDstX, mBmpWidth - mThumbWidth / 2);
if (mSrcX == mDstX)
return true;
mHasScrolled = true;
mSwitchStatus = SWITCH_SCROLING;
AnimationTransRunnable aTransRunnable = new AnimationTransRunnable(mSrcX, mDstX, 0);
new Thread(aTransRunnable).start();
mSrcX = mDstX;
break;
// 记录下抬起时的x轴y轴坐标
case MotionEvent.ACTION_UP:
if (mHasScrolled == false) {
// 如果没有发生过滑动,就意味着这是一次单击过程
mSwitchStatus = Math.abs(mSwitchStatus - 1);
int xFrom = mThumbWidth / 2, xTo = mBmpWidth - mThumbWidth / 2;
if (mSwitchStatus == SWITCH_OFF) {
xFrom = mBmpWidth - mThumbWidth / 2;
xTo = mThumbWidth / 2;
}
AnimationTransRunnable runnable = new AnimationTransRunnable(xFrom, xTo, 1);
new Thread(runnable).start();
} else {
// 刷新界面,可以网上搜索一下invalidate与postInvalidate刷新界面的区别(下面有用到),这里就不再讲解了
invalidate();
mHasScrolled = false;
}
// 状态改变的时候 回调事件函数
if (mOnSwitchChangedListener != null) {
mOnSwitchChangedListener.onSwitchChanged(this, mSwitchStatus);
}
break;
default:
break;
}
return true;
}protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 设置显示字体大小
mPaint.setTextSize(mThumbWidth / 3);
mPaint.setTypeface(Typeface.DEFAULT_BOLD);
if (mSwitchStatus == SWITCH_OFF) {
drawBitmap(canvas, null, null, mSwitch_off);
drawBitmap(canvas, null, null, mSwitch_thumb);
mPaint.setColor(Color.rgb(105, 105, 105));
canvas.translate(mThumbWidth, 0);
setDrawText(canvas, mOffText, isShow);
} else if (mSwitchStatus == SWITCH_ON) {
drawBitmap(canvas, null, null, mSwitch_on);
int count = canvas.save();
canvas.translate(mBmpWidth - mThumbWidth, 0);
drawBitmap(canvas, null, null, mSwitch_thumb);
mPaint.setColor(Color.WHITE);
canvas.restoreToCount(count);
setDrawText(canvas, mOnText, isShow);
} else {
// 正在滑动中
mSwitchStatus = mDstX == mBmpWidth - mThumbWidth / 2 ? SWITCH_ON : SWITCH_OFF;
drawBitmap(canvas, new Rect(0, 0, mDstX, mBmpHeight), new Rect(0, 0, (int) mDstX, mBmpHeight), mSwitch_on);
mPaint.setColor(Color.WHITE);
setDrawText(canvas, mOnText, isShow);
int count = canvas.save();
canvas.translate(mDstX, 0);
drawBitmap(canvas, new Rect(mDstX, 0, mBmpWidth, mBmpHeight), new Rect(0, 0, mBmpWidth - mDstX, mBmpHeight), mSwitch_off);
canvas.restoreToCount(count);
count = canvas.save();
canvas.clipRect(mDstX, 0, mBmpWidth, mBmpHeight);
canvas.translate(mThumbWidth, 0);
mPaint.setColor(Color.rgb(105, 105, 105));
setDrawText(canvas, mOffText, isShow);
canvas.restoreToCount(count);
count = canvas.save();
canvas.translate(mDstX - mThumbWidth / 2, 0);
drawBitmap(canvas, null, null, mSwitch_thumb);
canvas.restoreToCount(count);
}
}我自己写的代码里面有写了一些对这个组件的适配,可以对其进行大小改变,在xml文件中进行加载,还有用到了图片的缩放等,源代码中是有文字显示的,可是文字显示的在适配的时候出了些问题还没有解决,大家要是有时间可以下载下代码自己再改改看看,有什么好的意见建议可以评论给我大家一起探讨。源代码0分下载地址:
版权声明:本文为LuckChouDog原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。