您的位置:首页 > 其它

andorid 自己定义SwitchButton

2016-01-01 11:29 309 查看
因项目缘故需又一次定制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)该方法才干使小球左右滑动
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: