仿照苹果的Switch、自定义Switch

高仿苹果的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版权协议,转载请附上原文出处链接和本声明。