異なる状態の2つの画像を使用したトグルボタン


101

ON / OFF状態ではなく、2つの画像を使用してトグルボタンを作成する必要があります。

オフ状態で背景画像を設定しましたが、背景画像を使用している間はOFFテキストを削除できません。

そして、トグルボタンをクリックして別の画像をオン状態に設定することはできません:


2
あなたは確認することができます:1 stackoverflow.com/questions/1533038/... 2 - stackoverflow.com/questions/6100034/...
Nermeen

回答:


219

これを行う:

<ToggleButton 
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/check"   <!--check.xml-->
        android:layout_margin="10dp"
        android:textOn=""
        android:textOff=""
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_centerVertical="true"/>

ドローアブルフォルダーにcheck.xmlを作成する

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/selected_image"
          android:state_checked="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/unselected_image"
        android:state_checked="false"/>

 </selector>

1
トグルボタンの2つの異なる状態として機能するcheck.xmlに2つの画像(選択/非選択)を追加します
AkashG

19
背景が引き伸ばされることに問題がありましたか?
Mike Bevz 2013

2
android:textOn = "" android:textOff = ""は私が探していたものでした
png

9
他の人にもこの問題があったようですので、ここに解決策を追加します。とを追加android:background="@null"android:drawableRight="@drawable/check"ます。通常、トグルボタンは右揃えになっています。左揃えにする必要がある場合は、次を使用してくださいandroid:drawableLeft
Patrick

1
@パトリックしかし、中央揃えにしたい場合はどうすればよいですか?...すべてのデバイスで。したがって、マージンとパディングについては入らないでください。
Martin Erlic

47

AkashGのソリューションは私にはうまくいきません。check.xmlを背景に設定すると、垂直方向に伸びます。この問題を解決するには、check.xmlを "android:button"プロパティに設定する必要があります。

<ToggleButton 
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/check"   //check.xml
    android:background="@null"/>

check.xml:

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/selected_image"
          android:state_checked="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/unselected_image"
          android:state_checked="false"/>
    </selector>

10
ToggleButtonには親CompoundButtonがあります。そしてCompoundButtonはアンドロイドがあります。ボタンの属性:developer.android.com/reference/android/...
MistaGreen

3
これが正解です。受け入れられた答えは引き伸ばされたドローアブルになります。
Bamerza

画像に透明度android:background="@android:color/transparent"がある場合、使用できます
Pavel

@Bamerza、これはすべてのケースに当てはまるわけではありません。.svgで試すと、背景が引き伸ばされます。
ファリッド

2

このようなものを試すことができます。ここで画像ボタンをクリックすると、画像ビューが切り替わります。

holder.imgitem.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!onclick){
            mSparseBooleanArray.put((Integer) view.getTag(), true);
            holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_delete_overlay_com);
            onclick=true;}
            else if(onclick)
            {
                 mSparseBooleanArray.put((Integer) view.getTag(), false);
                  holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_selection_com);

            onclick=false;
            }
        }
    });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.