1. 程式人生 > >android自定義滑動開關控制元件,適合所有的android系統

android自定義滑動開關控制元件,適合所有的android系統

我們都知道Android4.0以上才帶有滑動開關Switch,那麼在4.0以下呢,很多人會選擇用CheckBox,放兩張圖片,但是這樣子只能點選,效果不太好,所以我就自定義了滑動開關WiperSwitch這麼一個控制元件,下面先把截圖貼上吧,這蹩腳的圖片真戳啊,大家可以自己換三張圖片

package com.example.wiperswitch;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

/**
 * 
 * @author xiaanming
 *
 */
public class WiperSwitch extends View implements OnTouchListener{
	private Bitmap bg_on, bg_off, slipper_btn;
	/**
	 * 按下時的x和當前的x
	 */
	private float downX, nowX;
	
	/**
	 * 記錄使用者是否在滑動
	 */
	private boolean onSlip = false;
	
	/**
	 * 當前的狀態
	 */
	private boolean nowStatus = false;
	
	/**
	 * 監聽介面
	 */
	private OnChangedListener listener;
	
	
	public WiperSwitch(Context context) {
		super(context);
		init();
	}

	public WiperSwitch(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	
	public void init(){
		//載入圖片資源
		bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.on_btn);
		bg_off = BitmapFactory.decodeResource(getResources(), R.drawable.off_btn);
		slipper_btn = BitmapFactory.decodeResource(getResources(), R.drawable.white_btn);
		
		setOnTouchListener(this);
	}
	
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Matrix matrix = new Matrix();
		Paint paint = new Paint();
		float x = 0;
		
		//根據nowX設定背景,開或者關狀態
		if (nowX < (bg_on.getWidth()/2)){
			canvas.drawBitmap(bg_off, matrix, paint);//畫出關閉時的背景
		}else{
			canvas.drawBitmap(bg_on, matrix, paint);//畫出開啟時的背景 
		}
		
		if (onSlip) {//是否是在滑動狀態,  
			if(nowX >= bg_on.getWidth())//是否劃出指定範圍,不能讓滑塊跑到外頭,必須做這個判斷
				x = bg_on.getWidth() - slipper_btn.getWidth()/2;//減去滑塊1/2的長度
			else
				x = nowX - slipper_btn.getWidth()/2;
		}else {
			if(nowStatus){//根據當前的狀態設定滑塊的x值
				x = bg_on.getWidth() - slipper_btn.getWidth();
			}else{
				x = 0;
			}
		}
		
		//對滑塊滑動進行異常處理,不能讓滑塊出界
		if (x < 0 ){
			x = 0;
		}
		else if(x > bg_on.getWidth() - slipper_btn.getWidth()){
			x = bg_on.getWidth() - slipper_btn.getWidth();
		}
		
		//畫出滑塊
		canvas.drawBitmap(slipper_btn, x , 0, paint); 
	}

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		switch(event.getAction()){
		case MotionEvent.ACTION_DOWN:{
			if (event.getX() > bg_off.getWidth() || event.getY() > bg_off.getHeight()){
				return false;
			}else{
				onSlip = true;
				downX = event.getX();
				nowX = downX;
			}
			break;
		}
		case MotionEvent.ACTION_MOVE:{
			nowX = event.getX();
			break;
		}
		case MotionEvent.ACTION_UP:{
			onSlip = false;
			if(event.getX() >= (bg_on.getWidth()/2)){
				nowStatus = true;
				nowX = bg_on.getWidth() - slipper_btn.getWidth();
			}else{
				nowStatus = false;
				nowX = 0;
			}
			
			if(listener != null){
				listener.OnChanged(WiperSwitch.this, nowStatus);
			}
			break;
		}
		}
		//重新整理介面
		invalidate();
		return true;
	}
	
	
	
	/**
	 * 為WiperSwitch設定一個監聽,供外部呼叫的方法
	 * @param listener
	 */
	public void setOnChangedListener(OnChangedListener listener){
		this.listener = listener;
	}
	
	
	/**
	 * 設定滑動開關的初始狀態,供外部呼叫
	 * @param checked
	 */
	public void setChecked(boolean checked){
		if(checked){
			nowX = bg_off.getWidth();
		}else{
			nowX = 0;
		}
		nowStatus = checked;
	}

	
    /**
     * 回撥介面
     * @author len
     *
     */
	public interface OnChangedListener {
		public void OnChanged(WiperSwitch wiperSwitch, boolean checkState);
	}


}


用法是,先定義XML檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.wiperswitch.WiperSwitch
        android:id="@+id/wiperSwitch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</RelativeLayout>


新建一個Activity

package com.example.wiperswitch;


import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

import com.example.wiperswitch.WiperSwitch.OnChangedListener;

public class MainActivity extends Activity implements OnChangedListener {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//例項化WiperSwitch
		WiperSwitch wiperSwitch = (WiperSwitch)findViewById(R.id.wiperSwitch1);
		
		//設定初始狀態為false
		wiperSwitch.setChecked(false);
		
		//設定監聽
		wiperSwitch.setOnChangedListener(this);
	}


	@Override
	public void OnChanged(WiperSwitch wiperSwitch, boolean checkState) {
		Log.e("log", "" + checkState);
	}


}

程式碼全部上完了,寫的不好的地方歡迎大牛指點!

哦,忘記了還有三張蹩腳的圖片沒傳