Material Designer的低版本兼容實現（十一）—— Switch

5.0中的switch和之前完全不同了，漂亮不漂亮咱們另說，總之4.x上是沒有這樣的效果了。實現方式有兩種，一種是用這個兼容包來做類似的效果，一種是用傳統的checkbox來代替。我感覺兼容包的效果是不錯，但少了點擊后立刻開關的感覺，而且在scrollView等可以滑動的中，可能會出現操作不靈敏的問題（因為左右時你不可能確保手指沒有上下滑動，所以可能會觸發scrollView的滑動事件）。用傳統的Checkbox雖然沒有拖動的效果，但是用戶按下去立刻有開關的反饋，十分干凈利落。當然，本文還是講如何用兼容包來實現，至於通過checkbox來實現的效果自行百度就好了，沒太大難度。

 

一、導入到自己的工程中

要用這個控件還是得添加開源項目的支持，開源項目地址：

我維護的：https://github.com/shark0017/MaterialDesignLibrary

添加lib支持后我們就可以用這個控件了，放入布局文件前還是要寫命名空間的。

xmlns:app="http://schemas.android.com/apk/res-auto"

　　<com.gc.materialdesign.views.Switch
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_horizontal" />

由於我沒有做可視化的效果，所以在編譯器中沒辦法實時顯示狀態，默認就是一個透明的view。如果大家想在編譯器中看個大概的樣子，可以給它通過background=“#xxxxxx”添加個背景顏色。

真實運行的效果：

 

二、在布局文件中設定各種屬性

app:checked="true"　　設定初始的狀態，如果為true就是開啟狀態。默認是不開啟

android:background="#ff0000"　　設定開關的顏色，默認是綠色

android:layout_width="200dp"　　設置開關控件的整體大小，和開關圓球無關
android:layout_height="100dp"

app:thumbSize="40dp"　　設定開關圓球的大小

 

 

三、通過代碼進行各種設定

package com.example.hhh;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Toast;

import com.gc.materialdesign.views.Switch;
import com.gc.materialdesign.views.Switch.OnCheckListener;

public class SwitchTest extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.switch01);
        
        final Switch switch = (Switch)findViewById(R.id.switch01);
        switch.setChecked(true);// 初始為開啟的狀態

        switch.setBackgroundColor(0xffff0000);// 顏色

        switch.setBackgroundColor(getResources().getColor(R.color.orange));// 設置顏色

        switch.setThumbSize(40);// 滑塊的大小
        // 監聽開關事件
        switch05.setOncheckListener(new OnCheckListener() {
            
            @Override
            public void onCheck(boolean isChecked) {
                // TODO 自動生成的方法存根
                System.out.println("isChecked = "+ switch.isChecked());
                Toast.makeText(SwitchTest.this, "Switch status = "+isChecked, 0).show();
            }
        });
        
      
    }
}

 

四、補充

5.0中還有另一種switch的樣式，感覺和ios的很像，我看到有個開源庫支持了這種樣式，我沒有去測試，但從文檔中看確實很不錯！可以定制的東西也很多，推薦有需求的同學去使用。

lib地址：https://github.com/kyleduo/SwitchButton

文檔中的部分說明：

In xml layout file, you can configure the face of switch button using these attrs.

• onDrawable: drawable of background for status ON
• offDrawable: drawable of background for status OFF
• thumbDrawable: drawable of thumb
• thumb_margin: set inner margin between thumb and edges
• thumb_marginLeft/Top/Bottom/Right: set margin for specific edge
• thumb_width: set the width of thumb, probably used for gradient drawable
• thumb_height: set the height of thumb
• onColor: set the color of status ON, usd for flat version, the priority is below of onDrawable
• offColor: like the onColor
• thumbColor: like the onColor
• thumbPressedColor: like the thumbColor, but for pressed status
• animationVelocity: distance of animation per frame
• radius: used for color version, radius of corner of background and thumb.
• measureFactor: factor limit the minimum width equals almost (the height of thumb * measureFactor)

 

參考自：

http://www.th7.cn/Program/Android/201411/314138.shtml