自定义的一个仿ios开关效果的SwitchButton

简介:

项目需求,本来想找网上的直接用,但是自己也不是太忙,就说自己写下吧。用了一上午的时间调试出来了基本的效果:


        原理: 

        通过自定义View来进行按钮的绘制。

       知识点:

          (1)继承view,实现构造方法,熟练使用onDraw(Canvas canvas)方法

  (2)需要三种图片,活动按钮,还有开关背景

  (3)需要熟悉onTouch方法的使用

  (4)了解onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法

  这样就基本够了

  所以的操作基本上都在onTouch以及onDraw中

  在onTouch中获取当前手指的坐标的x的值,

 在onDraw中通过计算来进行背景的绘制,以及滑块的位置

<pre name="code" class="java">@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Matrix matrix = new Matrix();
		Paint paint = new Paint();
		float det = 0; 
		if (mCurrentX > bg_off.getWidth()/2) {
			canvas.drawBitmap(bg_on, matrix, paint);
		}else {
			canvas.drawBitmap(bg_off, matrix, paint);
		}
		if (isScroll) {
			if (mCurrentX >= bg_on.getWidth()/2) {
				det = bg_on.getWidth() - bg_contral.getWidth();
			}else if (mCurrentX < 0 ) {
				det = 0;
			}else{
				det = mCurrentX;
			}
		}else {
			if (mCurrentX >= bg_on.getWidth() ) {
				det = bg_on.getWidth() - bg_contral.getWidth();
			}else if (mCurrentX < 0 ) {
				det = 0 ;
			}else {
				det = mCurrentX;
			}
		}
		
		//画出滑块  
        canvas.drawBitmap(bg_contral, det , 0, paint);  
	}
	

 

onTouch:

<pre name="code" class="java">@Override
	public boolean onTouch(View v, MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mCurrentX = (int)event.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			isScroll = true;
			mCurrentX = (int)event.getX();
			break;
		case MotionEvent.ACTION_UP:
			isScroll = false;
			mCurrentX = (int)event.getX();
			break;
		default:
			break;
		}
		
		invalidate();
		return true;
	}

 

   然后就是要控制这个控件的大小,所以

 @Override
	  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	  	    int specModeHeight = MeasureSpec.getMode(heightMeasureSpec);  
	  	    int specSizeHeight = MeasureSpec.getSize(heightMeasureSpec);  
	  	    Log.e("HJJ", "****specModeHeight:" + specModeHeight + ", specSizeHeight:" + specSizeHeight );  
	  	    
	  	    int widthSize = MeasureSpec.getSize(bg_on.getWidth());  
	  	    int heightSize = MeasureSpec.getSize(bg_on.getHeight());  
	  	    setMeasuredDimension(widthSize, heightSize);  
	  }

这就是一个完整的代码.,但是里边的点击的状态改变的listener等等设置他的状态这些都没有加,可以自己加一下,相信都会。

demohttp://download.csdn.net/detail/u012808234/9107871


相关文章
|
4月前
|
iOS开发 UED
实现一个自定义的iOS动画效果
【4月更文挑战第9天】本文将详细介绍如何在iOS平台上实现一个自定义的动画效果。我们将通过使用Core Animation框架来实现这个动画效果,并展示如何在不同的场景中使用它。文章的目标是帮助读者理解如何使用Core Animation框架来创建自定义动画,并提供一个简单的示例代码。
42 1
|
14天前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
36 11
|
1月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
35 7
|
iOS开发
iOS多线程之NSOperationQueue-依赖、并发数、优先级、自定义Operation等最全的使用总结
iOS多线程之NSOperationQueue-依赖、并发数、优先级、自定义Operation等最全的使用总结
380 0
|
12月前
|
API iOS开发
iOS 自定义转场动画 UIViewControllerTransitioning
iOS 自定义转场动画 UIViewControllerTransitioning
80 0
|
Swift iOS开发
iOS 13 之后自定义 Window 不显示解决 (SceneDelegate)
iOS 13 之后自定义 Window 不显示解决 (SceneDelegate)
324 0
|
Linux iOS开发 开发者
WIN11自定义版本ios镜像下载教程
WIN11自定义版本ios镜像下载教程
WIN11自定义版本ios镜像下载教程
|
API iOS开发 Perl
iOS UISlider自定义渐变色滑杆
iOS UISlider自定义渐变色滑杆
iOS UISlider自定义渐变色滑杆
|
API iOS开发 Perl
iOS UILabel自定义位置
iOS UILabel自定义位置
iOS UILabel自定义位置
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
241 0