Android入門之SwitchButton的使用教程
介紹
SwitchButton是個什么樣的東西呢？其實它就是一個開關。我們在手機應用中經(jīng)常使用到的。我突然想到2012年我開發(fā)Android時，竟然使用了RadioButton來做開關這個梗。
其實SwitchButton文如其名，它就是一個“開”和“關”兩個狀態(tài)事件存在時使用的，最典型的SwitchButton長下面這么個樣子。
課程目標
制作一個類似于IOS里的SwitchButton效果的按鈕。并且打印出它當前的狀態(tài)。
Android Studio自帶的SwitchButton樣式非常的難看，達不到我們要的效果，它如果直接拖到我們的Android Studio里是一個灰白色的按鈕。我們這次把這個按鈕美化一下。
其實美化不用太精致，必竟我們不是專業(yè)UI，因此開發(fā)者們一定不要一開始沉醉于界面樣式的太Beautiful，我們主要核心就是把Android開發(fā)全給掌握了，并且它是為我們本身的JAVA中臺、大數(shù)據(jù)、AI開發(fā)能力來服務的。因為你開發(fā)的很多后臺功能，如果對于一些大領導或者是業(yè)務型領導，他們是看不到你的“真實能力的”，他們更多關注的是“功能長什么樣”，因此如果直接可以讓他們看到在手機里運行起來這個人臉、這個物品識別、這個用手機設藍牙鎖開鎖等過程你可以省卻很多無用的BLA BLA。同時還能為自己將來進一步通往IOT領域打下堅實的基礎。因此在我的教程里不會太多講如何的專業(yè)UI。
為了滿足我們基本的UI，我們需要知道SwitchButton的外觀受以下幾個事件的影響，它們是：
- android:thumb，SwithButton上的這個“圓點點”的外觀，再分on時長什么樣、off時長什么樣；
- android:track，SwitchButton圓點點的背后一個長橢圓型的導軌的樣式，再分按鈕是on時導軌是綠的、off時導軌是淺灰的；
我們自定義這兩個UI部分即可實現(xiàn)。
自定義SwitchButton的Thumb和Track
自定義Thumb
它需要兩個xml文件：
- thumb_on
- thumb_off
然后把這兩個xml文件合到一個selector的xml文件內(nèi)申明成on時用哪個文件、off時用哪個文件就能起到switch button的這個圓點點樣式的自定了。
在此，我們不會使用外部圖片.png等資源，而只用android里提供的簡單的shape來作這個圖形的繪制，它相當?shù)暮唵?/p>
switch_custom_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="#94C5FF" />
<size
android:width="40dp"
android:height="40dp" />
</shape>switch_custom_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="#AAA" />
<size
android:width="40dp"
android:height="40dp" />
</shape>switch_custom_thumb_selector.xml文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/switch_custom_thumb_on" android:state_checked="true" />
<item android:drawable="@drawable/switch_custom_thumb_off" android:state_checked="false" />
</selector>開發(fā)這一塊代碼時我們使用Android Studio里的Split代碼與樣式預覽集成可以動態(tài)看到我們在改代碼時右邊圖形發(fā)生的變化。
這邊的thumb就是給你的“手指”按的圓點點我們使用的是android:shape="oval"，藍色。
自定義Track
導軌我們也使用藍色，它同樣也是分成：
- switch_custom_track_on.xml
- switch_custom_track_off.xml
然后同樣也在一個selector xml文件內(nèi)申明成on時用哪個文件、off時用哪個文件。
switch_custom_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="#B6D6FE" />
<stroke
android:width="5dp"
android:color="#00000000" />
<corners android:radius="20dp" />
</shape>switch_custom_track_off.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#E3E3E3" />
<stroke
android:width="5dp"
android:color="#00000000" />
<corners android:radius="20dp" />
</shape>switch_custom_track_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/switch_custom_track_on" android:state_checked="true" />
<item android:drawable="@drawable/switch_custom_track_off" android:state_checked="false" />
</selector>好，我們以上把按鈕和導軌都定義好了，我們來看主UI界面。
主UI界面activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Switch android:id="@+id/switchBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/switch_custom_thumb_selector"
android:track="@drawable/switch_custom_track_selector" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>看，以上代碼里我們對android:thumb和android:track使用了這兩個自定義on/off樣式的xml文件。
它在界面上會長成這么個樣。
我們來看這個按鈕的事件是如何響應的。
SwitchButton交互事件發(fā)生時的代碼
MainActivity.java
package org.mk.android.demo;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.CompoundButton;
import android.widget.Switch;
public class MainActivity extends AppCompatActivity {
private Switch btnSwitch;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnSwitch = (Switch) findViewById(R.id.switchBtn);
btnSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
Log.i("app", ">>>>>>switched is on");
} else {
Log.i("app", ">>>>>>switched is off");
}
}
});
}
}我們對SwitchButton的onCheckedChanged進行了自定義，它運行起來會是這樣的一個效果。
運行效果
開關off時
開關on時
到此這篇關于Android入門之SwitchButton的使用教程的文章就介紹到這了,更多相關Android SwitchButton內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
為Android系統(tǒng)添加config.xml 新配置的設置
這篇文章主要介紹了為Android系統(tǒng)添加config.xml 新配置的設置，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
flutter實現(xiàn)帶刪除動畫的listview功能
最近接了一個新項目，需要開發(fā)帶有刪除動畫效果的listview功能，在實現(xiàn)過程中列表滾動效果用listview實現(xiàn)的，本文通過實例代碼給大家分享實現(xiàn)過程，感興趣的朋友跟隨小編一起學習下吧2021-05-05
這篇文章主要為大家詳細介紹了Android UI控件之Spinner下拉列表效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家詳細介紹了ionic2如何處理android硬件返回按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
Android 5.0+ 屏幕錄制實現(xiàn)的示例代碼
這篇文章主要介紹了Android 5.0+ 屏幕錄制實現(xiàn)的示例代碼，從 5.0 開始，系統(tǒng)提供給了 app 錄制屏幕的一系列方法，不需要 root 權(quán)限，只需要用戶授權(quán)即可錄屏，相對來說較為簡單，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了android選擇圖片或拍照圖片上傳到服務器的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Android實現(xiàn)捕獲TextView超鏈接的方法
這篇文章主要介紹了Android實現(xiàn)捕獲TextView超鏈接的方法,涉及Android查找TextView中超鏈接的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Android開發(fā)框架之自定義ZXing二維碼掃描界面并解決取景框拉伸問題
這篇文章主要介紹了Android開發(fā)框架之自定義ZXing二維碼掃描界面并解決取景框拉伸問題的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了Android開發(fā)菜單布局之表格布局,結(jié)合具體實例形式分析了Android菜單布局中表格布局的相關行列排版與設置操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Android Surfaceview的繪制與應用的相關資料,需要的朋友可以參考下2017-07-07