[Android] Switch を使った切り替えボタンの実装

Switch はよく設定などで使われるON/OFFのウィジェットの1つです

1x1.trans - [Android] Switch を使った切り替えボタンの実装

Android Studio
2021.2.1




Switch

 
Button、CompoundButton を継承しているのでタップをトリガーとして何らかの挙動をさせるという使い方になります

java.lang.Object
   ↳ android.view.View
   ↳ android.widget.TextView
   ↳ android.widget.Button
   ↳ android.widget.CompoundButton
   ↳ android.widget.Switch

似たようなウィジェットとしてSwitchCompatとSwithMaterialというのもあります
というのは、UseSwitchCompatOrMaterialXml のwarningが出てきます

SwitchもSwitchCompatも基本的なところはあまり変わらないのでSwitchCompatを使ったほうがいいというGoogleの推奨なんでしょうか

SwitchMaterialはSwitchCompatを継承していますが、SwitchとSwitchCompatには継承関係はありません、ただ同じCompoundButtonを継承しています

 

 

Swithc トグルウィジェット

 
PaletのButtonグループにSwitchがあるので画面に配置します

1x1.trans - [Android] Switch を使った切り替えボタンの実装

Codeを見るとWarningが出ているので
tools:ignore=”UseSwitchCompatOrMaterialXml”
これでSwitchCompatやMaterialのリントを無視する設定を追加します
これはコードでもwarningが出てきます

android:text=”xxx” でテキストを設定できるのですが、レイアウトに気を付けないとSwitchを並べるとアンバランスになってしまいます

1x1.trans - [Android] Switch を使った切り替えボタンの実装

これはテキストとSwithを合わせた横サイズが異なってしまうからなので
例えば、

android:layout_width=”200dp”

で統一しておけばalignmentが上手くいきます

1x1.trans - [Android] Switch を使った切り替えボタンの実装

タップやフリップでSwithの変更を受け取るには
setOnCheckedChangeListener
onCheckedChanged
を使います

ここでも、@SuppressLint(“UseSwitchCompatOrMaterialCode”)をいれるようにwarningが出ます

 

サンプルコード

よく設定にあるSwithボタンでAirPlaneモードに入ると
それにより他の通信がOFFになるような設定を考えてみます
(UseSwitchCompatOrMaterialCodeが山ほど出ています…)

MainActivity.java

activity_main.xml

strings.xml

実行してみると

 

thumbとtrackのカスタマイズ

 
Switchでのthumbとtrackの色と形をカスタマイズするには
shape を使うことで可能です
ただ、これはボタンのようなON/OFFの状態遷移があるので
selectorを使ってstateに応じて色と形を変化させます

1x1.trans - [Android] Switch を使った切り替えボタンの実装

SwitchではMaterialに関係しない部分は
同様のことがSwitchCompatでもできます

custom_thumb_selector.xml
custom_track_selector.xml

のxmlファイルを作成してdrawable以下に配置します

1x1.trans - [Android] Switch を使った切り替えボタンの実装

このようなthumbとtrackでカスタマイズしてみます

1x1.trans - [Android] Switch を使った切り替えボタンの実装

shapeはrectagleで四角形
corners のradiusの分だけ角丸になります
soildでは色と縦横サイズを設定

  • デフォルト:android:state_enabled=”false”
  • チェック後:android:state_checked=”true”

状態としてはpressedなどありますが省略します

custom_thumb_selector.xml

custom_track_selector.xml

それぞれのselectorをレイアウトに設定します
android:thumb=”@drawable/custom_thumb_selector” android:track=”@drawable/custom_track_selector”

activity_main.xml

実行してみると

References:
切り替えボタン | Android デベロッパー
Switch – Android Developers




シェアする

  • このエントリーをはてなブックマークに追加

フォローする