8

ボタンに画像を配置し、描画可能なソースを使用して、その上にテキストを配置することの両方を組み合わせることが可能かどうか疑問に思っていますか?

現在、これを drawable/red_btn.xml のボタン スタイルとして使用しています。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ef4444" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

そして私のボタン

            <Button
                android:id="@+id/testButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Income"
                android:textSize="15dip"
                android:background="@drawable/red_btn"
    android:textColor="#fff"
     android:textStyle="bold" />

このように見える

ここに画像の説明を入力

このボタンの上に別の .png 画像 (arrow.png) をこのように右に追加したいと思います。

ここに画像の説明を入力

これは可能ですか？

前もって感謝します。 __________________________________________________________________________________________________________________________________________________________

編集

以下のLuksprogのアドバイスに従った後、ドローアブルに「red_btn_normal.xml」ができました

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ef4444" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</selector>

およびred_btn_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#ef4444" />

            <stroke
                android:width="1dp"
                android:color="#992f2f" />

            <corners android:radius="3dp" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <bitmap
            android:gravity="right"
            android:src="@drawable/arrow" />
    </item>


</layer-list>

そして、この「red_btn.xml」のようなボタンを作成します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/red_btn_normal"></item>

</selector>

そして最後に私のボタン

    <Button
                android:id="@+id/testButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Income"
                android:textSize="15dip"
                android:background="@drawable/red_btn"

    android:textColor="#fff"
     android:textStyle="bold" />

問題は、ボタンをクリックしたときに白い矢印しか表示されず、押されていないときに表示されないことです。コードの何が問題になっていますか? =)

4

2 に答える 2

12

ボタンに画像を配置し、描画可能なソースを使用して、その上にテキストを配置することの両方を組み合わせることが可能かどうか疑問に思っていますか?

はい、可能です。セレクターは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/red_btn_normal"></item>

</selector>

ここで、2 つのドローアブルは 2 つのlayer-listドローアブルであり、最初のアイテムは最初のセレクターからのアイテムであり、2 番目のアイテム.pngはビットマップ ドローベールとしてラップされた画像です。たとえば、次のようになりred_btn_pressed.xmlます。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <solid android:color="#ef4444" />

            <stroke
                android:width="1dp"
                android:color="#992f2f" />

            <corners android:radius="3dp" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <bitmap
            android:gravity="right"
            android:src="@drawable/arrow" />
    </item>


</layer-list>

そして、次のred_btn_normal.xmlようになります。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <gradient
                android:angle="270"
                android:endColor="#992f2f"
                android:startColor="#ef4444" />

            <stroke
                android:width="1dp"
                android:color="#992f2f" />

            <corners android:radius="3dp" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <bitmap android:src="@drawable/allowed" android:gravity="right"/>
    </item>

</layer-list>

のサイズで許可されている場合にのみ、矢印の画像がテキストの右側に表示されることに注意してください(の背景のButton一部として)。Buttonのテキストとその矢印イメージの間にある種の位置関係を課そうとしている場合は、クラスButtonを拡張して自分で行う必要があります。Button

于 2012-12-09T09:23:02.580 に答える
3

シンプルに行きました

<Button
                android:id="@+id/testButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Income"
                android:textSize="15dip"
                android:background="@drawable/red_btn"
android:drawableRight="@drawable/arrow"
    android:textColor="#fff"
     android:textStyle="bold" />
于 2012-12-09T12:16:01.400 に答える