ボタンにシェイプとセレクターを同時に適用するにはどうすればよいですか?


83

次のようなボタンの形状を適用しました。

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >
    <gradient android:startColor="#DD000000" android:endColor="#DD2d2d2d"  android:angle="90"></gradient>
    <corners android:radius="15dip"></corners>

</shape>

次に、次のようなセレクターを使用します。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/active"
      android:state_pressed="true" />
<item android:drawable="@drawable/passive"/>

このボタンにも。出来ますか ...???

回答:


186

このように使用します:

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

   <item android:state_pressed="true" >
       <shape>.......</shape>
   </item>
   ..........
   ..........
</selector>

8
はい、それが使用して働いていた:<セレクタのxmlnsを:アンドロイド= " schemas.android.com/apk/res/android "> <項目アンドロイド:state_pressed ="真"> <形状は、Android:形状= "矩形"> <コーナーをアンドロイド:radius = "15dip"> </ kernels> <solid android:color = "#febd26" /> </ shape> </ item> <item> <shape android:shape = "rectangle"> <gradient android:startColor = "#DD000000" android:endColor = "#DD2d2d2d" android:angle = "90"> </ gradient> <corners android:radius = "15dip"> </ kernels> </ shape> </ item> </ selector>
Khawar Raza 2011

7
@KhawarRaza将来的には、そのような情報を質問に入れてください。フォーマットして簡単に見つけることができます。コメントは時間の経過とともに消える傾向があります。
ティムポスト

あなたが提案したようにitem要素の中にshape要素を追加しようとしましたが、[ github.com/vinc3m1/RoundedImageView#usage]の属性09-13 15:25:02.868: ERROR/AndroidRuntime(9129): FATAL EXCEPTION: main android.view.InflateException: Binary XML file line #13: Error inflating class <unknown>. としてセレクターを設定しているのであまり役に立たないメッセージでエラーになりandroid:backgroundます。誰かがこれを行う方法について何かアイデアがありますか?RoundedImageView
toobsco42 2013

この手法を使おうとすると、エラーメッセージが表示され続けました。AZ_の答えは私にとってよりうまくいきました。
アランネルソン

@Alan Nelson、私の答えは単なるスケルトンですが、AZ_が例を示しています。
ハンリー

26

ポイントの答えの詳細

でカラーリソースを作成する

res / values / colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>


    <item name="yellow" type="color">#F7B500</item>
    <item name="yellow_dark" type="color">#AC7E00</item>

    <integer-array name="androidcolors">
        <item>@color/yellow</item>
        <item>@color/yellow_dark</item>
    </integer-array>

</resources>

でドローアブルを作成する

res / drawable / bg_yellow_round.xml

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

    <solid android:color="@color/yellow" />

    <stroke
        android:width="2dp"
        android:color="@color/yellow" />

    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />

</shape>

別のドローアブルを作成します。同じ場所でトランジションを行い、名前を付けます。

res / drawable / bg_yellow_dark_round.xml

<solid android:color="@color/yellow_dark" />

<stroke
    android:width="2dp"
    android:color="@color/yellow_dark" />

<corners
    android:bottomLeftRadius="20dp"
    android:bottomRightRadius="20dp"
    android:topLeftRadius="20dp"
    android:topRightRadius="20dp" />

次に、でカラー状態リストを作成します。

res / color / btn_selector_yellow.xml

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

    <item android:drawable="@color/yellow" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/bg_yellow_dark_round" android:state_pressed="true"/>
    <item android:drawable="@drawable/bg_yellow_round"/>

</selector>

次のようにボタンに設定します

<Button
                android:id="@+id/button1"
                android:layout_width="248dp"
                android:layout_height="44dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="20dp"
                android:background="@color/btn_selector_yellow"
                android:text="AZ_ is so cool" />

今、これはからの移行を行います 薄黄色

ダークイエロー


これは機能しますが、波及効果のために実装するようにガイドすることもできますか?
hardik9850 2017年


または、これを見るとgoogle.com/

11

shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/star_off"/>
    <corners android:radius="5dp"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

セレクター.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime">

    <item android:drawable="@color/tab_focused" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@color/tab_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/shape"/>

</selector>

1
@ drawable /shape.xmlの代わりに@drawable / shapeを使用する
Khizar Hayat

4

内部のセレクターを使用してシェイプを作成することもできます。形状がさまざまな状態で色を変えているだけの場合、これは非常にクリーンです。

color / color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/blue_dark" android:state_pressed="true" />
    <item android:color="@color/blue_light" />
</selector>

drawable / shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/color_selector" />
    <corners android:bottomLeftRadius="6dip" android:bottomRightRadius="6dp" />
    <padding android:bottom="0dip" android:left="0dip" android:right="0dip" android:top="0dip" />
</shape>

これは私にはうまくいきません、色のセレクターは決して使われません...私はそれがずっときれいであることに同意しますが
Gyome 2015

@Gyomeそれは働いています。このリンクを参照してくださいstackoverflow.com/questions/1219312/android-selector-text-color–
Ji Fang

3
これは古いことは知っていますが、念のため、この方法はAndroid5.0以降でのみ機能します。
lionscribe 2017

4

手遅れだとは思いますが、ここに解決例があります

 <TextView
            android:id="@+id/txt_out_going_calls"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="04dp"
            android:layout_weight="1"
            android:background="@drawable/header_text_view_selector"
            android:gravity="center"
            android:text="@string/outgoing_calls_tab_button_text"
            android:textColor="@color/home_text_color" />

と私 header_text_view_selector

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

        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/home_fragment_tab_color_selected"/>
            <corners android:radius="25dip" />
            <padding android:bottom="08dip" android:left="9dip" android:right="9dip" android:top="08dip" />
        </shape>
    </item>
    <item android:state_selected="false">

        <shape>
            <solid android:color="@color/home_fragment_tab_color_simple"/>
            <corners android:radius="25dip" />
            <padding android:bottom="08dip" android:left="9dip" android:right="9dip" android:top="08dip" />
        </shape>
    </item>
</selector>

だから基本的にtextviewはセレクターで丸みを帯びたものを作成しています。ここではim処理のみstate_selectednot_selected。それが役に立てば幸い


3

これが私のやり方です、そしてそれはうまくいきます!

<item android:state_pressed="true">

    <shape android:shape="oval">


        <gradient android:centerX=".6"
            android:centerY=".40"
            android:endColor="@color/colorPrimary"
            android:gradientRadius="20"
            android:startColor="@color/colorPrimary"
            android:type="radial" />

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

        <size android:width="55dp"
            android:height="55dp" />

    </shape>
</item>

<item android:state_focused="false">
    <shape android:shape="oval">


        <gradient android:centerX=".6"
            android:centerY=".40"
            android:endColor="@android:color/transparent"
            android:gradientRadius="20"
            android:startColor="@android:color/transparent"
            android:type="radial" />

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

        <size android:width="55dp"
            android:height="55dp" />

    </shape>
</item>


0

画像を使用するときはシェイプ名を使用し、画像を使用するときはセレクターを使用します。問題なく試してみてください。それはあなたが求めていたものですか?


2
シェイプxmlをドローアブルに入れて、セレクターにandroid:drawable = "@ drawable / shape_xml"を渡し、ビューでセレクターを使用します
。...– Vineet Shukla 2011

1
コードスニペットを使用して、より適切な形式で例を記述してください。
Roy Lee

0

私の例は、state_pressedの付いた丸ボタンです。以下のコード:

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


    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@color/light_primary_color" />
        </shape>

    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/accent_color" />
        </shape>
    </item>

</selector>

0

再利用しやすくするために、単一のプロパティに状態を設定できます。形を複製しないでください

<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
>
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp"/>
            <solid
                android:state_enabled="false"
                android:color="@color/transparent"
            />
            <solid
                android:state_enabled="true"
                android:color="@color/background"
            />
            <stroke
                android:width="@dimen/dividerHeight"
                android:color="@color/dividerLight"
            />
        </shape>
    </item>
</selector>

この方法を使用して無効にすると、プログラムで背景を設定することができました。


これはうまくいかないようです。セレクターには複数のアイテムの子が必要であり、各アイテムに状態を​​設定する必要があると思います。
bmaupin
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.