[Android開發] 自定義View之重寫View非常簡單實現開關按鈕SwitchView
阿新 • • 發佈:2019-01-28
一、 效果圖
二、 實現原理
一個View,畫一個圓角矩形,再畫一個圓點就可以了,100行程式碼左右就可以了,不需要圖片。
三、 實現程式碼
為了程式碼不臃腫,只添加了一個設定預設開關的方法,就沒新增設定顏色的方法,如果需要的話自己根據專案在原始碼裡面設定即可,解析我都寫在原始碼裡面了。
SwitchView.java
package tpnet.switchview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* 作用: 開關View
*
* @author LITP
* @date 2016/10/26
*/
public class SwitchView extends View implements View.OnClickListener {
private boolean isOpen = false; //開關,預設為關
private Paint paintPrev; //圓點畫筆
private Paint paintBack; //背景畫筆
//關閉時候的背景顏色
private int colorClose = Color.parseColor("#888888");
//開啟時候的背景顏色
private int colorOpen = Color.parseColor("#32CD32");
private int xPrev = 0; //圓的圓心x座標
private int yPrev; //圓的圓心y座標
private int radiusPrev; //圓的半徑
/**
* 在佈局檔案使用該類,將會用這個構造方法來例項化該類
* @param context
* @param attrs
*/
public SwitchView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init(){
paintPrev = new Paint();
paintBack = new Paint();
//關閉鋸齒
paintPrev.setAntiAlias(true);
paintBack.setAntiAlias(true);
//設定圓點顏色
paintPrev.setColor(Color.parseColor("#ffffff"));
paintBack.setColor(colorClose);
this.setOnClickListener(this);
}
/*
* ------一個檢視從建立到顯示過程中的主要方法流程--------
*
* 1. 構造方法
*
* 2. 測量measure(int,int) --> onMeasure()
* 如果是ViewGroup還有義務測量孩子,孩子有建議權多高.
* serMeasuredDimension(width,height) 儲存計算結果
*
* 3. 指定位置layout() --> onLayout();
* 指定控制元件的位置,一般View不用重寫這個方法,ViewGroup是否才需要
*
* 4. 繪製檢視 draw() --> onDraw(canvas);
* 根據上面兩個方法引數進行繪製,
*
* invalidate()重繪製,導致onDraw執行
* */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//儲存高度
//setMeasuredDimension(100, 50);
if(isOpen){//開的時候圓的圓心x座標
xPrev = getMeasuredWidth() - getMeasuredHeight() /2;
}else{ //關的時候圓的圓心x座標
xPrev = getMeasuredHeight() / 2;
}
yPrev = getMeasuredHeight() / 2; //圓的圓心y座標
radiusPrev = getMeasuredHeight() / 2; //圓的半徑
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int roundHeight = getMeasuredHeight();
//畫圓角矩形背景
RectF rectF = new RectF(0, 0, getMeasuredWidth(), roundHeight);
canvas.drawRoundRect(rectF,roundHeight/2,roundHeight/2,paintBack);
//畫圓點
canvas.drawCircle(xPrev, yPrev, radiusPrev-2, paintPrev);
}
/**
* 設定預設開關的狀態,用在activity啟動時候設定
* @param flag 是否為開啟狀態
*/
public void setDefaultSwitchState(boolean flag){
//預設為假的,所以為真才設定
if(flag){
paintBack.setColor(colorOpen);
isOpen = true;
}
}
/**
* 程式執行時候程式碼設定開關
*/
public void setSwitchState(boolean flag){
if(!((flag && isOpen) || (!flag && !isOpen) )){
onClick(this);
}
}
@Override
public void onClick(View view) {
if (isOpen) {
xPrev = getMeasuredHeight() / 2; //關閉時候 圓的圓心x座標
paintBack.setColor(colorClose);
}else{
xPrev = getMeasuredWidth() - xPrev; //開啟時候 圓的圓心x座標
paintBack.setColor(colorOpen);
}
isOpen = !isOpen;
listener.onSwitch(isOpen);
//重新繪製
invalidate();
}
public interface OnSwitchListener{
/**
* 開關回調介面
* @param isOpen
*/
void onSwitch(boolean isOpen);
}
private OnSwitchListener listener;
public void setOnSwitchListener(OnSwitchListener listener){
this.listener = listener;
}
}
四、 使用
佈局檔案:
<tpnet.switchview.SwitchView
android:id="@+id/sw_message"
android:layout_width="50dp"
android:layout_height="30dp" />
activity裡面:
swMessage = (SwitchView) findViewById(R.id.sw_message);
//swMessage.setDefaultSwitchState(true);
swMessage.setOnSwitchListener(new SwitchView.OnSwitchListener() {
@Override
public void onSwitch(boolean isOpen) {
tvTip.setText(isOpen?"開":"關");
}
});
就這麼簡單,謝謝大家,對你有用記得點一下頂。