web-dev-qa-db-ja.com

Android：画像ありでテキストなしのトグルボタンを作成します

画像はあるがテキストはないAndroidにトグルボタンを作成することはできますか？理想的には次のようになります。

Toggle Button With Image

答えは背景を変更することでしたが、Holo Lightのレイアウトを保持し、テキストを画像と入れ替えるだけの同様の投稿を見てきました。

プログラムで画像ソースを変更できる必要がありますが、

どのようにこれを作るのでしょうか？

これができない場合、通常のボタンのオンとオフを切り替える方法はありますか？

androidcustomizationtogglebutton
69
Edd

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

    いいえ、できません。トグルボタンのデフォルトスタイルをオーバーライドしてテキストを非表示にすることはできますが、テキストを画像に置き換えることができないため、必要なトグルボタンが表示されません。

  2. 通常のトグルボタンを作成する方法

    ファイルを作成しますic_toggleres/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/folderにstyles.xmlファイルを作成していない場合）。

    <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"/>
105
Rachit Mishra

ToggleButtonはTextViewを継承しているため、テキストの4つの境界に表示されるようにドロアブルを設定できます。それを使用して、テキストの上に目的のアイコンを表示し、実際のテキストを非表示にすることができます

<ToggleButton
    Android:id="@+id/toggleButton1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:drawableTop="@Android:drawable/ic_menu_info_details"
    Android:gravity="center"
    Android:textOff=""
    Android:textOn=""
    Android:textSize="0dp" />

通常のToggleButtonと比較した結果は次のようになります

enter image description here

Secondsオプションは、 ImageSpan を使用して、実際にテキストを画像に置き換えます。アイコンは正しい位置にありますが、レイアウトxmlで直接行うことはできないため、少し見た目が良くなります。

プレーンなToggleButtonを作成します

<ToggleButton
    Android:id="@+id/toggleButton3"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:checked="false" />

次に、「テキスト」をプログラムで設定します

ToggleButton button = (ToggleButton) findViewById(R.id.toggleButton3);
ImageSpan imageSpan = new ImageSpan(this, Android.R.drawable.ic_menu_info_details);
SpannableString content = new SpannableString("X");
content.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
button.setText(content);
button.setTextOn(content);
button.setTextOff(content);

ここでの結果-アイコンはテキストの代わりになるため、少し下に配置されます。

enter image description here

63
zapl

res/drawableにtoggle_selector.xmlを作成します

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item Android:drawable="@drawable/toggle_on" Android:state_checked="true"/>
  <item Android:drawable="@drawable/toggle_off" Android:state_checked="false"/>
</selector>

セレクタをトグルボタンに適用する

<ToggleButton
            Android:id="@+id/chkState"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:background="@drawable/toggle_selector"
            Android:textOff=""
            Android:textOn=""/>

注：上記のコードで使用したテキストを削除するには

textOff=""
textOn=""
52
Melbourne Lopes

私はこれが少し遅いことを知っていますが、興味のある人のために、基本的にトグル画像ボタンであるカスタムコンポーネントを作成しました、ドロアブルは状態だけでなく背景も持つことができます

https://Gist.github.com/akshaydashrath/9662072

11
akshaydashrath