1. ホーム
  2. android

Androidです。画像付き、テキスト無しのトグルボタンを作成する

2023-09-07 15:51:39

質問

Androidで、画像はあるがテキストがないトグルボタンを作成することは可能でしょうか? 理想はこのような感じです。

同じような投稿で、背景を変えるという答えがありましたが、私はHolo Lightのレイアウトを維持し、テキストを画像と入れ替えたいのです。

私は、プログラム的に画像ソースを変更できるようにする必要があります。

どのようにこれを作るか、何かアイデアはありますか?

これができない場合、通常のボタンをトグル式にする方法はありますか?

どのように解決するのですか?

  1. トグルのテキストを画像に置き換えることはできますか?

    いいえ、できません。トグルボタンのデフォルトスタイルを上書きすることによってテキストを隠すことはできますが、それでもテキストを画像に置き換えることはできないので、あなたが望むトグルボタンを得ることはできません。

  2. 通常のトグルボタンを作るには

    ファイルを作成する ic_toggle を作成します。 res/drawable フォルダー

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_checked="false"
              android:drawable="@drawable/ic_slide_switch_off" />
    
        <item android:state_checked="true"
              android:drawable="@drawable/ic_slide_switch_on" />
    
    </selector>
    
    

    ここで @drawable/ic_slide_switch_on &です。 @drawable/ic_slide_switch_off は作成した画像です。

    次に、同じフォルダに別のファイルを作成し、その名前を ic_toggle_bg

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:id="@+android:id/background"  
              android:drawable="@android:color/transparent" />
    
        <item android:id="@+android:id/toggle"
              android:drawable="@drawable/ic_toggle" />
    
    </layer-list>
    
    

    次に、カスタムテーマに追加します (カスタムテーマがない場合は res/values/ フォルダに作成します)。

    <style name="Widget.Button.Toggle" parent="android:Widget">
       <item name="android:background">@drawable/ic_toggle_bg</item>
       <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
    </style>
    
    <style name="toggleButton"  parent="@android:Theme.Black">
       <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
       <item name="android:textOn"></item>
       <item name="android:textOff"></item>
    </style>
    
    

    これはカスタムトグルボタンを作成します。

  3. 使用方法

    カスタムスタイルと背景をビューで使用します。

      <ToggleButton
            android:id="@+id/toggleButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            style="@style/toggleButton"
            android:background="@drawable/ic_toggle_bg"/>