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