【Kotlin/Android】selectorの使い方!ボタンの状態で見た目を切り替える

この記事からわかること
- Android Studio/KotlinのSelectorタグ使い方
- Buttonの状態によってデザインを切り替える方法
- StateListDrawableの指定値
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Flamingo
- Kotlin:1.8.20
selectorタグとは?
Androidのselector
タグはViewの状態に応じてデザイン(色や形、背景画像など)を動的に変更するためのXMLリソースです。これを使用することで例えばButton
のisEnabled
の値によって活性/非活性を切り替えるようなUIを簡単に実装することが可能になります。
分岐させることができる状態はStateListDrawable
で定義されている値になります。主な状態は以下の通りです。
- state_pressed: ビューを押している状態
- state_focused: フォーカスされている状態
- state_selected: ビューが選択されている状態
- state_enabled: ビューが有効な状態
- state_checked: ビューがチェックされている状態
- state_hovered: カーソルがビューの上にある状態
実装方法
res/drawable
の中にselector
ファイルを作成します。「New」>「Drawable Resource File」をクリックするとデフォルトで「Root element」がselector
になっているのでそのままファイル名を入力し作成します。
作成できたらselector
タグの中にitem
タグで条件を羅列していきます。上にあるitem
から評価されていくので以下の場合はisEnabled
がfalse
の時は#AAAAAA
のrectangle
にtrue
の時は1つ目のitem
には該当しないので#C8ADAD
のoval
になります。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid
android:color="#AAAAAA" />
<corners
android:radius="20dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid
android:color="#C8ADAD" />
</shape>
</item>
</selector>
item
には複数条件を指定することも可能です。また色だけを変えたい場合は以下のようにandroid:color
を指定すればOKです。
<item
android:state_focused="true"
android:state_enabled="true"
android:state_pressed="false"
android:color="#AAAAAA" />
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。