Material Design控件之Switch|SwitchCompat

Material Design Android控件之介紹

Switch|SwitchCompat

• extends CompoundButton
• Switch的應用場景和ToggleButton類似，多應用於兩種狀態的切換。
• Switch是在Android4.0(API14)以後推出的，要注意開發時的minsdk設置
• API 21 Switch的爲MD風格,API14-API21之間爲holo風格
• API 21也推出support v7 包下的SwitchCompat的Material Design 開關控件，對低版本的有了更好的的支持。
• 所以請使用android.support.v7.widget.SwitchCompat
• 所以請使用android.support.v7.widget.SwitchCompat
• 所以請使用android.support.v7.widget.SwitchCompat

導入v7庫

'com.android.support:appcompat-v7:26.1.0'

簡單使用

<Switch
        android:id="@+id/Switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch"
        android:showText="true"
        android:textOn="開"
        android:switchPadding="25dp"
        android:textOff="關"
        android:thumb="@drawable/ic_action_play"
        android:typeface="monospace"
        android:layout_marginLeft="32dp"
        android:switchMinWidth="100dp"
        android:splitTrack="false"
        android:thumbTextPadding="10dp"
        android:trackTint="@color/color_switch_track"
        android:switchTextAppearance="@style/SwitchHintAppearance"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="32dp"/>

不管風格的使用方式

以下屬性可能沒有效果,因爲不兼容低版本API
API 21及以上爲MD風格,API14-API21之間爲holo風格
- android:textOff=”開”：設置開關開啓的按鈕文字
- android:textOn=”關”：設置開關關閉時的按鈕文字
- android:checked=”“:設置初始選中狀態
- android:showText=”true”：設置是否顯示按鈕上的文字（API 21及以上）
- android:switchMinWidth=”“：開關最小寬度

以下屬性可能沒有效果,因爲不兼容低版本API

左側提示文字

• android:text=”Switch” 設置提示文字
• android:switchPadding=”“:設置開關與提示文字的空白距離
  拇指按鈕文字的風格
• android:switchTextAppearance=”“:設置拇指按鈕文字
  設置文字風格 字體類型
• android:typeface=”serif” 設置字體類型
  Typeface (normal, sans, serif, monospace) for the text
• android:textStyle 設置文字風格
  Style (bold, italic, bolditalic) for the text.

thumb 拇指按鈕

• android:thumb=”“:設置開關的圖片 setThumbResource (int resId) API16
• android:thumbTextPadding text與thumb的padding API16
• android:thumbTint 着色 setThumbTintList(ColorStateList) API23
• android:thumbTintMode 着色模式 API23
  src_over 3
  src_in 5
  src_atop 9
  multiply 14
  screen 15
  add 16

track 軌跡

• android:track=”“:設置開關的軌跡圖片 .9圖
• android:trackTint 與trackTint配合
• android:trackTintMode 與trackTint配合

app:trackTint="@color/color_switch_track"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2266cc" android:state_checked="true"></item>//必須
    <item android:color="#fff" ></item>//必須
</selector>

使用SwitchCompat完美向下兼容

<android.support.v7.widget.SwitchCompat
        android:id="@+id/SwitchCompat"
        android:text="SwitchCompat"
        app:showText="true"
        android:textOn="開"
        android:textOff="關"
        app:switchMinWidth="100dp"
        android:checked="true"
        app:switchPadding="25dp"
        app:splitTrack="false"
        android:thumb="@drawable/ic_action_play"
        app:thumbTint="@color/color_switch_thumb"
        app:thumbTintMode="src_atop"
        app:thumbTextPadding="10dp"
        app:trackTint="@color/color_switch_track"
        app:switchTextAppearance="@style/SwitchHintAppearance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        app:colorControlActivated="#bbeeaa"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/Switch"/>

屬性設置沒效果,將android: 改爲app:

以下爲需要改爲app:的屬性

app:showText="true" 
app:switchMinWidth="100dp"  
app:switchPadding="25dp"
app:switchTextAppearance=" " 
app:thumbTextPadding="10dp"
app:thumbTint  
app:thumbTintMode 
app:splitTrack="true"
app:trackTint

點擊時背景變灰

android:background="@null"

源碼地址：https://github.com/LinweiJ/MaterialDesignWidget