波纹对形状可绘制的影响

Question

试图在这里做一些非常简单的事情,并查找了一堆SO资源,但无济于事.我试图在一个使用drawable类型的背景的按钮上获得涟漪效果shape drawable.相关文件:

background_button:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1px"
        android:color="#80ffffff" />
    <solid android:color="@android:color/transparent" />
</shape>

ripple.xml的内部drawable-v21文件夹:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/background_button"/>
</ripple>

Button.xml:

   <Button
                    android:id="@+id/login_button"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:layout_weight="1"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:background="@drawable/ripple"


 />

这里有什么问题.谢谢!

Answer 1

我的建议是不要使用<ripple标签.我有两个原因:要完全按照自己的意愿去做并不容易.xml,每个背景都需要2个不同的文件.我不喜欢有drawable-v21文件夹.

我的解决方案是包装你的Buttonwith FrameLayout和use android:foreground属性.这样你可以拥有你想要的任何背景,你可以保持涟漪效果.

<FrameLayout
    android:id="@+id/login_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_weight="1"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:foreground="?attr/selectableItemBackground">

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/background_button"/>
</FrameLayout>

请注意,我将所有属性和id移动到FrameLayout.你应该设置onClickListener到FrameLayout代替Button.

顺便说一句,?attr/selectableItemBackground很棒.尽可能多地使用它.对于Android 4.0到4.3的旧设备,它将蓝色Holo颜色替换为灰色.

Answer 2

试试这个.

ripple_effect.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#2797e0"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="#2797e0" />
    </shape>
</item>

button.xml

 <Button
                android:id="@+id/login_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_weight="1"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:background="@drawable/ripple_effect"/>

的build.gradle

   compile 'com.android.support:appcompat-v7:23.1.1'

Answer 3

更简单的解决方案 - 使用这个 drawable-xml 作为 Button 的属性“android:background”的值：

可绘制/bkg_ripple.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
</ripple>

按钮.xml：

<Button
    android:id="@+id/mybutton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ...
    android:background="@drawable/bkg_ripple"
/>

Answer 4

我有类似的任务。让我解释一下我是如何解决它的。它输出带有阴影和波纹效果的圆形图像视图，不会超出圆形边界。

<ImageView
    android:id="@+id/iv_undo"
    android:layout_width="@dimen/iv_width_altmenu"
    android:layout_height="@dimen/iv_height_altmenu"
    android:src="@drawable/undo"
    android:elevation="@dimen/elevation_buttons"
    android:foreground="@drawable/ripple_effect"
    android:background="@drawable/buttons_inactive_coloring"
   />

以下提供了涟漪效应：

android:foreground="@drawable/ripple_effect"

下面提供圆形imageView。

android:background="@drawable/buttons_inactive_coloring"

以下提供阴影：

android:foreground="@drawable/ripple_effect"

您可能面临的另一个问题是涟漪效应超出了圆形边界。为了解决，使用以下文件（ripple_effect.xml）

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/button_active"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="@color/button_active" />
        </shape>
    </item>
</ripple>

如果您不使用以下内容：

<item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="@color/button_active" />
        </shape>
    </item>

涟漪效应超出了圆形边界，这看起来不太好。小心谨慎。

Answer 5

这对我 有用 drawable/rect.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="1dp" android:color="#FF4C71F5" />
    <padding android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />
    <corners android:radius="5dp" />
    <solid android:color="#00000000" />

</shape>

和波纹 drawable/rip.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="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

和你的按钮

 <Button
                android:id="@+id/nm"
                android:layout_width="80dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@drawable/rect"
                android:enabled="true"
                android:text="@string/vnm"
                android:textColor="@color/colorpr"
                android:textStyle="bold"
                android:foreground="@drawable/rip"/>

希望这有帮助！！！

Answer 6

这对我来说工作..

<?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="@color/smooth_white"
    tools:targetApi="lollipop">
    <item android:drawable="@drawable/button_green_background" />
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/smooth_white" />
        </shape>
    </item>
</ripple>

重点是部分

<item android:drawable="@drawable/button_green_background" />