自定义的一个仿ios开关效果的SwitchButton-阿里云开发者社区

开发者社区> 非花非雾> 正文

自定义的一个仿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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter 56: 图解自定义 BubbleWidget 气泡插件
0 基础学习 Flutter,第五十六步:尝试一下自定义气泡插件!
2678 0
iOS中 自定义cell分割线/分割线偏移 韩俊强的博客
在项目开发中我们会常常遇到tableView 的cell分割线显示不全,左边会空出一截像素,更有甚者想改变系统的分割线,并且只要上下分割线的一个等等需求,今天重点解决以上需求,仅供参考: 1.cell 分割线不全: 解决方案1: 补全分割线 -(void)viewDidLayoutSubvie...
844 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8482 0
Flutter 70: 图解自定义 ACEStepper 步进器
0 基础学习 Flutter,第七十步:自定义 ACEStepper 尝试一下!
943 0
iOS11 Xcode 9 快速跳转到定义新姿势(Jump to Definition)
2017年9月20日,苹果如期推送 Xcode 9 和 iOS 11的更新. Xcode 9正式版与之前beta版本相差不大,编辑器有较大调整,试写代码,发现“跳转定义”跟以前不一样了,之前按住command +鼠标左键即可跳转定义.
1000 0
自定义View -简单的 SwitchView
前言 实现一个简单的滑动开发,效果图如下: switchView完整版本 分析 平分整个View为两份 平分VIew 测量字体的高度和宽度,确定左右View的文字的位置并进行绘制 确定字体的位置和绘制 绘制...
779 0
写一个图片轮播效果的Demo(自动播放)附代码
js图片轮播切换 .imgCon { width: 450px; height: 300px;...
846 0
2.CCGridAction(3D效果),3D反转特效,凸透镜特效,液体特效,3D翻页特效,水波纹特效,3D晃动的特效,扭曲旋转特效,波动特效,3D波动特效
 1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr-&gt;setPosition(ccp(winSize.width/2,winSize.height/2)); addChild(spr);   //GridAction
1373 0
gridview自定义button事件 ,无法触发 onrowcommand
如题。 原因:按钮button有回传事件,当点击button,页面回传,已经将原来的页面的事件冲掉了。   解决方法: 1方法:  Page_Load方法里,添加if(!ispostback){//绑定gridview的值}   2方法:去掉button的回传事件,添加一个属性:UseS...
625 0
+关注
81
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载