Android自訂view 滑動開關 支援左右滑動 適用於listview，androidlistview

Android自訂view 滑動開關 支援左右滑動 適用於listview，androidlistview

要做這樣一種開關。

當開關在左邊時，都是灰色的，向右滑動的時候，滑到一半的時候，改變顏色，變成綠色；

當開關在右邊是，都市綠色的，向左滑動的時候，滑動一半的時候，改變顏色，變成灰色。

這裡就要涉及要可滑動最大距離，以及你現在滑動的距離。通過這個來比較，改變顏色。

import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.View; /** * 自訂開關按鈕，  *   * */public class PushSlideSwitchView extends View{/** Switch底部灰色樣式圖片 */private Bitmap mSwitchBgUnseleted;/** Switch底部綠色樣式圖  */private Bitmap mSwitchBgSeleted;/** Switch灰色的球  */private Bitmap mSwitchBallUnseleted;/** Switch綠色的球  */private Bitmap mSwitchBallSeleted;private float mCurrentX = 0;/** Switch 開關狀態，預設是  開：true  */private boolean mSwitchOn = true;/** Switch 最大移動距離   */private int mMoveLength;/** 第一次按下的有效地區 */private float mLastX = 0;/** 繪製的目的地區域大小  */private Rect mDest = null; /** 截取源圖片的大小  *//** Switch 移動的位移量  */private int mMoveDeltX = 0;/** 畫筆工具  */private Paint mPaint = null;/** Switch 狀態監聽介面  */private OnSwitchChangedListener switchListener = null;private boolean mFlag = false;/** enabled 屬性 為 true */private boolean mEnabled = true;/** 最大透明度，就是不透明 */private final int MAX_ALPHA = 255;/** 當前透明度，這裡主要用於如果控制項的enable屬性為false時候設定半透明 ，即不可以點擊 */private int mAlpha = MAX_ALPHA;/** Switch 判斷是否在拖動 */private boolean mIsScrolled =false;public PushSlideSwitchView(Context context) {this(context, null);}public PushSlideSwitchView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public PushSlideSwitchView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}/** * 初始化相關資源 */public void init() {mSwitchBgSeleted = BitmapFactory.decodeResource(getResources(),R.drawable.push_button_selected_bg);mSwitchBgUnseleted = BitmapFactory.decodeResource(getResources(),R.drawable.push_button_unselected_bg);mSwitchBallSeleted = BitmapFactory.decodeResource(getResources(),R.drawable.push_button_ball_selected);mSwitchBallUnseleted = BitmapFactory.decodeResource(getResources(),R.drawable.push_button_ball_unselected);mMoveLength = mSwitchBgSeleted.getWidth() - mSwitchBallSeleted.getWidth();//繪製地區大小mDest = new Rect(0, 0, mSwitchBgSeleted.getWidth(), mSwitchBgSeleted.getHeight());mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setAlpha(255);mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(mSwitchBgSeleted.getWidth(), mSwitchBgSeleted.getHeight());}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);/*System.out.println("---onDraw()---mMoveDeltX= " + mMoveDeltX +"  mSwitchBgUnseleted.getWidth()= " + mSwitchBgUnseleted.getWidth() +"  mSwitchBallSeleted.getWidth()= " + mSwitchBallSeleted.getWidth() +"  mMoveLength = " + mMoveLength);*/canvas.saveLayerAlpha(new RectF(mDest), mAlpha, Canvas.MATRIX_SAVE_FLAG| Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG| Canvas.FULL_COLOR_LAYER_SAVE_FLAG| Canvas.CLIP_TO_LAYER_SAVE_FLAG);//如果是關閉的if(!mSwitchOn){if(mMoveDeltX > 0){//向右滑動了if(mMoveDeltX < mMoveLength/2){//滑動距離小於一半canvas.drawBitmap(mSwitchBgUnseleted, 0, 0, null); //灰色背景canvas.drawBitmap(mSwitchBallUnseleted, mMoveDeltX, 0, null); //灰色按鈕}else{//滑動距離大於一半canvas.drawBitmap(mSwitchBgSeleted, 0, 0, null); //綠色背景canvas.drawBitmap(mSwitchBallSeleted, mMoveDeltX, 0, null); //綠色按鈕}}else{canvas.drawBitmap(mSwitchBgUnseleted, 0, 0, null); //灰色背景canvas.drawBitmap(mSwitchBallUnseleted, 0, 0, null); //灰色按鈕}}else{if(mMoveDeltX < 0){//向右滑動了if(Math.abs(mMoveDeltX) < mMoveLength/2){//滑動距離小於一半canvas.drawBitmap(mSwitchBgSeleted, 0, 0, null); //綠色背景canvas.drawBitmap(mSwitchBallSeleted, mSwitchBgSeleted.getWidth() - mSwitchBallSeleted.getWidth() + mMoveDeltX, 0, null); //綠色按鈕}else{//滑動距離大於一半canvas.drawBitmap(mSwitchBgUnseleted, 0, 0, null); //灰色背景canvas.drawBitmap(mSwitchBallUnseleted, mSwitchBgSeleted.getWidth() - mSwitchBallSeleted.getWidth() + mMoveDeltX, 0, null); //灰色按鈕}}else{canvas.drawBitmap(mSwitchBgSeleted, 0, 0, null); //綠色背景canvas.drawBitmap(mSwitchBallSeleted, mMoveLength, 0, null); //綠色按鈕}}canvas.restore();}@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stub//如果Enabled屬性設定為true,觸摸效果才有效if(!mEnabled){return true;}switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mLastX = event.getX();break;case MotionEvent.ACTION_MOVE:mCurrentX = event.getX();mMoveDeltX = (int) (mCurrentX - mLastX);//System.out.println("===============" + mMoveDeltX);if(mMoveDeltX > 3){//設定了3這個誤差距離，可以更好的實現點擊效果mIsScrolled = true;}// 如果開關開著向右滑動，或者開關關著向左滑動（這時候是不需要處理的）if ((mSwitchOn && mMoveDeltX > 0) || (!mSwitchOn && mMoveDeltX < 0)) {mFlag = true;mMoveDeltX = 0;}if (Math.abs(mMoveDeltX) > mMoveLength) {mMoveDeltX = mMoveDeltX > 0 ? mMoveLength : -mMoveLength;}invalidate();break;case MotionEvent.ACTION_UP://如果沒有滑動過，就看作一次點擊事件if(!mIsScrolled){mMoveDeltX = mSwitchOn ? mMoveLength : -mMoveLength;mSwitchOn = !mSwitchOn;if (switchListener != null) {switchListener.onSwitchChange(this, mSwitchOn);}invalidate();mMoveDeltX = 0;break;}mIsScrolled = false;if (Math.abs(mMoveDeltX) > 0 && Math.abs(mMoveDeltX) < mMoveLength / 2) {mMoveDeltX = 0;invalidate();} else if (Math.abs(mMoveDeltX) > mMoveLength / 2&& Math.abs(mMoveDeltX) <= mMoveLength) {mMoveDeltX = mMoveDeltX > 0 ? mMoveLength : -mMoveLength;mSwitchOn = !mSwitchOn;if (switchListener != null) {switchListener.onSwitchChange(this, mSwitchOn);}invalidate();mMoveDeltX = 0;} else if (mMoveDeltX == 0 && mFlag) {// 這時候得到的是不需要進行處理的，因為已經move過了mMoveDeltX = 0;mFlag = false;}default:break;}invalidate();return true;}/**  * 設定 switch 狀態監聽  * */public void setOnChangeListener(OnSwitchChangedListener listener) {switchListener = listener;}/**  * switch 開關監聽介面 *  */public interface OnSwitchChangedListener{public void onSwitchChange(PushSlideSwitchView switchView, boolean isChecked);}@Overridepublic void setEnabled(boolean enabled) {// TODO Auto-generated method stubmEnabled = enabled;mAlpha = enabled ? MAX_ALPHA : MAX_ALPHA/2;Log.d("enabled",enabled ? "true": "false");super.setEnabled(enabled);invalidate();}/** 自動判斷切換至相反的屬性 : true -->false ;false -->true */public void toggle() {setChecked(!mSwitchOn);}    /** 設定選中的狀態（選中:true   非選中: false） */    public void setChecked(boolean checked) {    mSwitchOn = checked;        invalidate();    }}

就是這樣一個類，就可以了。

在xml檔案中可以這樣引用：

<com.app.view.PushSlideSwitchView            android:id="@+id/push_set_warm_switchview"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_marginRight="15dip"            android:enabled="true" />

在這裡附上需要引用的四張圖片

    

在java代碼中我們通過設定switchView.setOnChangeListener()來監聽是否開啟和關閉。

如果是單個的使用，使用上面的完全沒有問題。

但是這裡還涉及到一個問題，如果是listview，假如每個item裡面都有一個這樣的開關，在應用使用權限設定裡面可能會看到這樣的操作環境。

以前用其他的自訂滑動開關會發現，如果上下滑動幾次，就會亂套，左邊的會跳到右邊，有的右邊會跳到左邊。這個也解決了這個問題。

java代碼如下

package com.example.compoundbuttonview;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ListView;import android.widget.TextView;import com.example.compoundbuttonview.view.MySlideSwitchView;import com.example.compoundbuttonview.view.MySlideSwitchView.OnSwitchChangedListener;/** */public class MainActivity2 extends Activity {private ListView listview;List<Map<String, Object>> tempListData = new ArrayList<Map<String, Object>>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main2);initView();for (int i = 0; i < 50; i++) {HashMap datamap = new HashMap<String, Object>();datamap.put("index", i+1);datamap.put("checked", i%2==0?true:false);tempListData.add(datamap);}MyAdapter adapter = new MyAdapter(MainActivity2.this);listview.setAdapter(adapter);}private void initView() { listview = (ListView) findViewById(R.id.listView1);}class MyAdapter extends BaseAdapter {private LayoutInflater inflater = null;private Context context;public MyAdapter(Context context) {this.context = context;inflater = LayoutInflater.from(context);}@Overridepublic int getCount() {return tempListData.size();}@Overridepublic Object getItem(int position) {return tempListData.get(position);}@Overridepublic long getItemId(int position) {return position;}public void modifyStates(int position) {}@Overridepublic View getView(final int position, View convertView, ViewGroup parent) {ViewHolder holder;if (convertView == null) {convertView = inflater.inflate(R.layout.main2_listview_item, null);holder = new ViewHolder();holder.index = (TextView) convertView.findViewById(R.id.item_index);holder.SlideSwitchView = (MySlideSwitchView) convertView.findViewById(R.id.item_SwitchView);// 使用tag來儲存資料convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}holder.index.setText(tempListData.get(position).get("index") + "");holder.SlideSwitchView.setChecked((Boolean) tempListData.get(position).get("checked"));holder.SlideSwitchView.setOnChangeListener(new OnSwitchChangedListener() {@Overridepublic void onSwitchChange(MySlideSwitchView switchView, boolean isChecked) {tempListData.get(position).put("checked", isChecked);}});return convertView;}}class ViewHolder {public MySlideSwitchView SlideSwitchView;public TextView index;}}

xml布局檔案如下：

main2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:android1="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:padding="1dip" >    <ListView        android1:id="@+id/listView1"        android1:layout_width="match_parent"        android1:layout_height="wrap_content" >    </ListView></LinearLayout>

item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:android1="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:padding="1dip" >    <ListView        android1:id="@+id/listView1"        android1:layout_width="match_parent"        android1:layout_height="wrap_content" >    </ListView></LinearLayout>

好了，由於代碼全部貼出來了。就沒有做成資源去下載，代碼有注釋，看一下就懂，其實很好用。