自定義Switch開關(guān)(selector+shape樣式開發(fā))

1. Switch控件的基本使用

(1) 相關(guān)屬性


android:switchMinWidth:設(shè)置開關(guān)的最小寬度 
android:switchPadding:設(shè)置滑塊內(nèi)文字的間隔 
android:switchTextAppearance:設(shè)置開關(guān)的文字外觀
android:text:設(shè)置開關(guān)的名稱
android:textStyle:文字風(fēng)格(粗體、斜體等)
android:showText:設(shè)置on/off的時(shí)候是否顯示文字(boolean) 
android:textOff:按鈕沒有被選中時(shí)顯示的文字 
android:textOn:按鈕被選中時(shí)顯示的文字 
android:thumb:滑塊的圖片
android:track:軌道的圖片 
android:splitTrack:是否設(shè)置一個(gè)間隙一睁,讓滑塊與底部圖片分隔(boolean)

(2) 使用示例

<Switch
                android:id="@+id/activity_main_switchProduction"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true">

(3) 原生效果


關(guān)閉.png

開啟.png

(4) 開關(guān)監(jiān)控回調(diào)

switchProduction.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
               if(!buttonView.isPressed()){ // 每次 setChecked 時(shí)會(huì)觸發(fā)onCheckedChanged 監(jiān)聽回調(diào),而有時(shí)我們?cè)谠O(shè)置setChecked后不想去自動(dòng)觸發(fā) onCheckedChanged 里的具體操作, 即想屏蔽掉onCheckedChanged;加上此判斷
                    return;
               }       
       
               if(isChecked){}

            }
        });

2. 自定義 Switch開關(guān)樣式

<Switch
                android:id="@+id/activity_main_switchProduction"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="默認(rèn)"
                android:thumb="@drawable/thumb_selector"
                android:track="@drawable/track_selector"/>

(1) thumb_selector.xml:按鈕樣式

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/thumb_on" android:state_checked="true"/>
    <item android:drawable="@drawable/thumb_off" android:state_checked="false"/>
</selector>
  • thumb_on.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ffffff" />
    <size
        android:width="20dp"
        android:height="20dp" />
    <!--    開關(guān)按鈕增加一個(gè)透明的邊框:實(shí)現(xiàn)軌道高度高于開關(guān)按鈕高度的效果-->
    <stroke
        android:width="5dp"
        android:color="@android:color/transparent"/>
</shape>
  • thumb_off.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#E3E3E3" />
    <size
        android:width="20dp"
        android:height="20dp" />
    <!--    開關(guān)按鈕增加一個(gè)透明的邊框:實(shí)現(xiàn)軌道高度高于開關(guān)按鈕高度的效果-->
    <stroke
        android:width="5dp"
        android:color="@android:color/transparent"/>
</shape>

(2) track_selector.xml:軌道樣式

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/track_on" android:state_checked="true"/>
    <item android:drawable="@drawable/track_off" android:state_checked="false"/>
</selector>
  • track_on.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00a9e2" />
    <corners android:radius="20dp"/>
</shape>

  • track_on.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#ccc" />
    <corners android:radius="20dp" />
</shape>

tipsSwitch自定義樣式,軌道的寬度會(huì)隨著開關(guān)按鈕的寬度自動(dòng)變化舔箭,如果想要修改軌道的寬度,修改開關(guān)按鈕的寬度就可以了;默認(rèn)情況下開關(guān)按鈕和滑動(dòng)軌道的高度是一樣的(并且在xml文件中對(duì)軌道的寬高設(shè)置是無(wú)效的),如果想要修改軌道的高度卵皂,即

自定義Switch樣式.png

  • 軌道高度低于開關(guān)按鈕高度(第一個(gè)效果):軌道增加一個(gè)透明的邊框
  • 軌道高度高于開關(guān)按鈕高度(第二個(gè)效果):開關(guān)按鈕增加一個(gè)透明的邊框

3. 拓展

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市砚亭,隨后出現(xiàn)的幾起案子灯变,更是在濱河造成了極大的恐慌,老刑警劉巖捅膘,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件添祸,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡寻仗,警方通過(guò)查閱死者的電腦和手機(jī)膝捞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)愧沟,“玉大人,你說(shuō)我怎么就攤上這事鲤遥°逅拢” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵盖奈,是天一觀的道長(zhǎng)混坞。 經(jīng)常有香客問我,道長(zhǎng)钢坦,這世上最難降的妖魔是什么究孕? 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮爹凹,結(jié)果婚禮上厨诸,老公的妹妹穿的比我還像新娘。我一直安慰自己禾酱,他們只是感情好微酬,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著颤陶,像睡著了一般颗管。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上滓走,一...
    開封第一講書人閱讀 49,007評(píng)論 1 284
  • 那天垦江,我揣著相機(jī)與錄音,去河邊找鬼搅方。 笑死比吭,一個(gè)胖子當(dāng)著我的面吹牛绽族,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播梗逮,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼项秉,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了慷彤?” 一聲冷哼從身側(cè)響起娄蔼,我...
    開封第一講書人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎底哗,沒想到半個(gè)月后岁诉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡跋选,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年涕癣,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片前标。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡坠韩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出炼列,到底是詐尸還是另有隱情只搁,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布俭尖,位于F島的核電站氢惋,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏稽犁。R本人自食惡果不足惜焰望,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望已亥。 院中可真熱鬧熊赖,春花似錦、人聲如沸虑椎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)绣檬。三九已至足陨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間娇未,已是汗流浹背墨缘。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人镊讼。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓宽涌,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親蝶棋。 傳聞我的和親對(duì)象是個(gè)殘疾皇子卸亮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345