web-dev-qa-db-ja.com

背景が透明な形状の波紋

アプリで次の形状を使用しています

<?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/primary_light"/>
            <size Android:height="80dp" Android:width="80dp"/>
        </shape>
    </item>

    <item Android:state_focused="true">
        <shape Android:shape="oval">
            <stroke Android:color="@color/primary_light" Android:width="5dp"/>
            <size Android:height="80dp" Android:width="80dp"/>
        </shape>
    </item>

    <item>
        <shape Android:shape="oval">
            <solid Android:color="@Android:color/transparent"/>
            <size Android:height="80dp" Android:width="80dp"/>
        </shape>
    </item>
</selector>

それは私のdrawableフォルダにあります。現在、アプリをLollipopに更新していますが、使用した円形ボタンに関するリップルフィードバックを提供したいと考えています。 drawable-v21フォルダーで、リップルセレクターに変更しました。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/primary_light">
    <item>
        <selector>
            <item Android:state_focused="true">
                <shape Android:shape="oval">
                    <stroke Android:color="@color/primary_light" Android:width="5dp"/>
                    <size Android:height="80dp" Android:width="80dp"/>
                </shape>
            </item>

            <item Android:id="@Android:id/mask">
                <shape Android:shape="oval">
                    <solid Android:color="@Android:color/transparent"/>
                    <size Android:height="80dp" Android:width="80dp"/>
                </shape>
            </item>
        </selector>
    </item>
</ripple>

しかし、残念ながら、Lollipopで上記のドロアブルを使用しても、波及効果は生成されません。 <solid Android:color="@Android:color/transparent"/>が原因ですか？

誰が私が間違っている場所を教えてもらえますか？ありがとう

androidrippledrawable
31
Sudara

いくつかの試行錯誤の後、selectorとitemの階層を誤解しているようです。

以下は完璧に機能します。

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="@color/primary_light">
        <item Android:id="@Android:id/mask">
               <shape Android:shape="oval">
                       <solid Android:color="@Android:color/white"/>
                       <size Android:height="80dp" Android:width="80dp"/>
               </shape>
        </item>
</ripple>
52
Sudara

これは透明な背景で動作します：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?android:colorControlHighlight"
    Android:exitFadeDuration="@Android:integer/config_shortAnimTime">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
<item Android:id="@Android:id/mask">
    <shape Android:shape="rectangle">
        <corners Android:radius="3dp"/>
        <!-- This color is needed to be set - doesn't affect anything -->
        <solid Android:color="@Android:color/white"/>
    </shape>
</item>
<!-- This is the background for your button -->
<item>
    <!-- Use the shape you want here -->
    <shape Android:shape="rectangle">
        <!-- Use the solid tag to define the background color you want -->
        <solid Android:color="@Android:color/transparent"/>
    </shape>
</item>
</ripple>

これは、この回答から少し変更されました： 透明なリップル

25
box

次のコードは、透明ボタンの波及効果を持つカスタムシェイプで機能します-

main_activity_buttons_ripple_with_background.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:color="#888888"
    tools:targetApi="Lollipop">

    <!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <corners Android:radius="25dp" />
            <!-- This color is needed to be set - doesn't affect anything -->
            <solid Android:color="#000" />
        </shape>
    </item>

    <!-- This is the background for your button -->
    <item>
        <!-- Use the shape you want here -->
        <shape Android:shape="rectangle">
            <!-- Use the solid tag to define the background color you want -->
            <solid Android:color="@Android:color/transparent" />
            <stroke
                Android:width="1dp"
                Android:color="#FFF" />
            <corners Android:radius="25dp" />
        </shape>
    </item>

</ripple>

styles.xml

<style name="MainActivityButtonsStyle">
<item name="Android:background">@drawable/main_activity_buttons_ripple_with_background</item>
<item name="Android:textAllCaps">false</item>
<item name="Android:layout_margin">15dp</item>
<item name="Android:paddingLeft">20dp</item>
<item name="Android:paddingRight">20dp</item>
<item name="Android:layout_centerHorizontal">true</item>
<item name="Android:layout_width">wrap_content</item>
<item name="Android:layout_height">50dp</item>
<item name="Android:textColor">#FFF</item>
<item name="Android:textSize">18sp</item>

activity_main.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1">

        <Button
            Android:layout_alignParentTop="true"
            style="@style/MainActivityButtonsStyle"
            Android:text="@string/button_search_by_id" />

    </RelativeLayout>

</LinearLayout>
3
Hrishikesh Kadam

リップルマスクを指定すると、透明または半透明の背景にリップル効果を与えることができます。リップルマスクはDrawableですが、ピクセルごとのリップルアルファを設定するアルファ値のみが使用されます。プログラムで作成する例を次に示します。

var background = new Android.graphics.drawable.GradientDrawable();
background.setShape(Android.graphics.drawable.GradientDrawable.RECTANGLE);
background.setColor(0x77FFFFFF); // semi-transparent background
background.setCornerRadius(10);
background.setStroke(3, 0xFF1144FF); // border color

var mask = new Android.graphics.drawable.GradientDrawable();
mask.setShape(Android.graphics.drawable.GradientDrawable.RECTANGLE);
mask.setColor(0xFF000000); // the color is irrelevant here, only the alpha
mask.setCornerRadius(5); // you probably want the same corner as the background

var rippleColorLst = Android.content.res.ColorStateList.valueOf(
    Android.graphics.Color.argb(255,50,150,255)
);

// aaaand
var ripple = new Android.graphics.drawable.RippleDrawable(rippleColorLst,background,mask);
yourButton.setBackground(ripple);

（JavaScript/NativeScriptコードについては申し訳ありませんが、おそらく理解できるでしょう）

2
Tyg