首页 > 其他 > 详细

andorid 自定义SwitchButton

时间:2015-06-04 22:53:50      阅读:577      评论:0      收藏:0      [点我收藏+]

因项目缘故需重新定制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)该方法才能使小球左右滑动

andorid 自定义SwitchButton

原文:http://blog.csdn.net/yeyuehei/article/details/46364931

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!