web-dev-qa-db-ja.com

ボタンに形状とセレクターを同時に適用する方法は?

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

<?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"/>

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

74
Khawar Raza

この方法を使用します。

<?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>
171
Hanry

ポイント回答の詳細

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

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" />

ここで color state list を作成します

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" />

これで移行が行われますfrom light yellow

to

dark yellow

25
AZ_

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>

selector.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>
10
Renan Bandeira

内部のセレクターを使用する図形を作成することもできます。形状がさまざまな状態で色を変えているだけであれば、これはかなりきれいです。

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>
4
Till

これが私のやり方であり、うまくいきます!

<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>
3
user3530687

より再利用可能にするために、単一のプロパティに状態を設定できます。 図形の複製を避ける

<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>

この方法を使用して無効にすると、プログラムでバックグラウンドを設定できました。

1
Gibolt

私の例は、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>
1
vrbsm

遅すぎることはわかっていますが、解決済みの例を次に示します

 <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を作成します。ここでは、state_selectednot_selectedのみを処理しています。それが役に立てば幸い

1
Nouman Ghaffar

画像を使用するときはシェイプ名を使用し、画像を使用するときはセレクターを使用します。問題が発生しないようにしてください。それはあなたが尋ねていたものですか?

0
Vineet Shukla