andorid 自定义SwitchButton

因项目缘故需重新定制SwitchButton,效果如下:

 

过程如下:

1.圆角矩形的绘制

2.字体绘制

3.小圆绘制

4.左右滑动动画效果绘制

代码如下:

package com.smart.view;

import java.util.Timer;
import java.util.TimerTask;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class MySwitchButton extends View{

	private int w, h;//组件宽高
	private boolean flag_switch;//开关标志
	private boolean flag_touch;//触摸标志
	private String ON = "ON";
	private String OFF = "OFF";
	private float textSize = 40;//字体大小
	private int color1 = 0xff999999;//关背景颜色
	private int color2 = 0xff3e9edb;//开背景颜色
	private int color_bg = color1;
	private int circle_bg_nomal = Color.WHITE;//圆正常情况下的背景
	private int circle_bg_touch = Color.YELLOW;//触摸时圆的背景

	//圆心
	private float y;
	private float x;
	private float radius;//圆半径
	private int distance = 10;//左右边距

	private OnCircleClickListner mOnCircleClickListner;

	public MySwitchButton(Context context) {
		super(context);
		System.out.println("---MySwitchButton1---");
	}

	public MySwitchButton(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		System.out.println("---MySwitchButton2---");
	}

	public MySwitchButton(Context context, AttributeSet attrs) {
		super(context, attrs);
		System.out.println("---MySwitchButton3---");
	}

	public void setOnCircleClickListner(OnCircleClickListner mOnCircleClickListner){
		this.mOnCircleClickListner = mOnCircleClickListner;
	}

	public boolean isFlag_switch() {
		return flag_switch;
	}

	public void setChecked(boolean flag_switch) {
		this.flag_switch = flag_switch;
		if(flag_switch){
			x = distance+radius;
			color_bg = color2;
		}else{
			x = w-(distance+radius);
			color_bg = color1;
		}
		circleMove();
//		invalidate();

	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
//		float x = event.getX();
//		float y = event.getY();

		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:

			flag_touch = true;
			invalidate();
			break;
		case MotionEvent.ACTION_MOVE:
			break;
		case MotionEvent.ACTION_UP:
			if(mOnCircleClickListner!=null){
				mOnCircleClickListner.onClick(MySwitchButton.this,!flag_switch);
			}
			flag_touch = false;
			invalidate();
			break;
		}

		return true;
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);

		this.w = w;
		this.h = h;
		y = h/2;
		radius =  h/2-distance;
		x = distance+radius;

//		color_bg = color1;
		circleMove();
//		invalidate();
		System.out.println("-----onSizeChanged----");
//		System.out.println("x:"+x);
//		System.out.println("w:"+w);
//		System.out.println("h:"+h);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		System.out.println("-----onDraw----");
		Paint paint = new Paint();
		paint.setAntiAlias(true);
		canvas2RoundRect(canvas,paint);//圆角矩形
		canvas2Text(canvas,paint);//字体
		canvas2Circle(canvas,paint);//小圆
		super.onDraw(canvas);

	}

	public void canvas2RoundRect(Canvas canvas,Paint paint){
		paint.setColor(color_bg);
		RectF oval3 = new RectF(0, 0, w, h);
        canvas.drawRoundRect(oval3, 45, 45, paint);

	}

	public void canvas2Circle(Canvas canvas,Paint paint){
		if(flag_touch){
			paint.setColor(circle_bg_touch);
		}else{
			paint.setColor(circle_bg_nomal);
		}
//		circleMove();
//		System.out.println("drawX:"+x);
		canvas.drawCircle(x, y, radius, paint);
	}

	Timer timer;
	TimerTask task;
	public void circleMove(){//小圆运动轨迹
		final float startX =distance+radius;
		final float endX = w-(distance+radius);
		final long upDataDistance = 10;
		if(timer!=null){
			task.cancel();
			timer.cancel();
			timer=null;
			task=null;
		}
		timer = new Timer();
		task = new TimerTask() {

			@Override
			public void run() {
				if(flag_switch){
					x+=upDataDistance;//打开
				}else{
					x-=upDataDistance;//关闭

				}
				if(x>=endX){
					x=endX;
					this.cancel();
					timer.cancel();
					timer =null;
				}else if(x<startX){
					x = startX;
					this.cancel();
					timer.cancel();
					timer =null;
				}
				postInvalidate();
			}
		};
		timer.schedule(task, 8, 8);

	}

	public void canvas2Text(Canvas canvas,Paint paint){

		paint.setTextSize(textSize);
		paint.setColor(Color.WHITE);
		Rect rect = new Rect();
		if(flag_switch){
			paint.getTextBounds(ON, 0, ON.length()-1, rect);
			int textHight = rect.height();
			float textWight = paint.measureText(ON);
			canvas.drawText(ON, (w/2-textWight)/2, (h+textHight)/2, paint);
		}else{
			paint.getTextBounds(OFF, 0, OFF.length()-1, rect);
			float textWight = paint.measureText(OFF);
			int textHight = rect.height();
			canvas.drawText(OFF, w/2+(w/2-textWight)/2, (h+textHight)/2, paint);
		}
	}

	public interface OnCircleClickListner{

		public void onClick(View v,boolean flag);
	}

}
   <com.example.test_myview.MySwitchButton
        android:id="@+id/msb"
        android:layout_width="70dp"
        android:layout_height="27dp"

        />

监听接口时要调用public void setChecked(boolean flag_switch)该方法才能使小球左右滑动

时间: 2024-11-10 07:09:23

andorid 自定义SwitchButton的相关文章

Android 自定义SwitchButton开关控件

SwitchButton开关控件早已经非常流行.有各种各样的样式,SwitchButton开关控件一般用于app软件设置那里,控制缓存.声音.提示.下载等等.是具有很好的UI体验以及用户的习惯性.那么再下面介绍一个SwitchButton开关控件.并附上源码. 源码下载:点击 一.看实现的效果图 二.自定义SwitchButton 这是一个继承CheckBox的SwitchButton类.来实现做这些动画效果的,首先准备好这些图片,然后canvas绘制控件 的边框.背景.以及按钮.绘制时候加上相

自定义switchButton

这篇博客要讲的是自定义switchButton,不过没有设置动画效果. 我用GradientDrawable来绘制switchButton,我们先看看最终的效果: 点击前: 点击后 接下来我们看看如何实现 首先:该类继承RelativeLayout SwitchButton extends RelativeLayout{} 该类需要用到的成员: private ImageView track; //滑块所在的轨道 private ImageView slider; //switchButton上

Andorid自定义attr的各种坑

本文来自网易云社区 作者:孙有军 在开发Andorid应用程序中,经常会自定义View来实现各种各样炫酷的效果,在实现这吊炸天效果的同时,我们往往会定义很多attr属性,这样就可以在XML中配置我们想要的属性值,以下就是定义属性值可能遇到的各种坑. 大家都知道怎么定义attr属性,一般如下: <declare-styleable name="Sample">    <attr name="custom" format="string|re

Andorid自定义圆形渐变色进度条的从实现到开源

信自己也是一种信仰. 写在前面的话 3月初我在自定义控件概述中挖下的几个坑,前一段时间已经基本填完了,自定义控件的几种实现方式也分别写了demo来进行说明.今天我们来聊一聊如何把自己封装一个圆形渐变色进度条控件开源到github,并且上传到jcenter方便别人远程依赖.先看下效果图: 连接github并提交新项目 前提条件: 安装Git客户端(下载地址) 有GitHub账号 创建新项目并提交到Github: 在AndroidStudio中新建一个项目 配置Git:Settings -> Ver

andorid自定义ViewPager之——子ViewPager滑到边缘后直接滑动父ViewPager

最近的项目中,有一个需求要用ViewPager中嵌套ViewPager去实现整个效果,没做任何处理做出来后,只能不停的滑动子ViewPager,父ViewPager就无法滑动了,这样肯定是不满足的,分析了一下原因,很显示是整个滑动事件都被子ViewPager消耗掉了,所以只能对ViewPager做一下自定义处理,才可以实现.以下是这个需求实现后的效果图: 从图上就可以看出:我们用ViewPager中嵌套了ViewPager,而且要实现的是子ViewPager滑动到最后一页时,再滑就是滑动父Vie

Andorid 自定义seekbar

效果如图: <?xml version="1.0" encoding="utf-8"?> <resources> <style name="Widget.SeekBar.Normal" parent="@android:style/Widget.SeekBar"> <item name="android:maxHeight">8.0dip</item&g

android 自定义开关(SwitchButton)

最近心血来潮,写了一个自定义仿iPhone的开关.有需要的同学可以来下载啦.支持点击自动滚动,速率可以自己根据需要修改.触摸滚动,大小自定义,支持修改样式.就不录制动画,就上传了两张图给大家看看.        主要代码: package com.example.switchbutton; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.Resou

Android 自定义的开关按钮——SwitchButton

本文转自:http://blog.csdn.net/swust_chenpeng/article/details/19967501 我将原文的控件进行了一些修改,去掉了原来控件的外边框,只留下重要的遮罩.背景和滑块.并且可以在布局文件中预览(预览效果不是太好,凑合看看还可以).自己修改了下监听器,增加了一些方法.总之目前已经和官方的控件差不多了.重要的是可以自定义控件的大小了! 上面粉红色的那个就是我们自定义的控件了,下面的两个是用的官方的控件,自己改样式.基本处于没用的级别. 好了,现在我们开

Cordova6.x自定义插件之Andorid

1.继承了CordovaPlugin的Java Class 需要重写execute方法,如下: 2.在res/xml/config.xml中关联上述java class 3.在assets/www/plugins目录下新建一个js 此js主要是关联config.xml中的feature name,代码如下: 4.在assets/www/cordova_plugins.js中添加plugin的关联信息 小结: 因此在Cordova6.x版本中,Andorid这部分插件的定义的流程大致是这样的: R