• 2024/3/22
• 4分

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

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Android Studio：Flamingo
• Kotlin：1.8.20

selectorタグとは？

AndroidのselectorタグはViewの状態に応じてデザイン(色や形、背景画像など)を動的に変更するためのXMLリソースです。これを使用することで例えばButtonのisEnabledの値によって活性/非活性を切り替えるようなUIを簡単に実装することが可能になります。

分岐させることができる状態はStateListDrawableで定義されている値になります。主な状態は以下の通りです。

公式リファレンス：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" />

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。