代码之家 › 专栏 › 技术社区 › user2511882

波纹对形状拉伸的影响

android-5.0-lollipop xml android

user2511882 · 技术社区 · 9 年前

试图在这里做一些非常简单的事情,并查找了一堆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>

涟漪.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>

按钮.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"


 />

这里怎么了。谢谢

10 回复 | 直到 9 年前

tasomaniac 8 年前

我的建议是不要使用 <ripple 标签我有两个原因:做你想做的事情并不是那么容易,你必须有两个不同的 .xml 每个背景的文件。我不喜欢 drawable-v21 文件夹

我的解决方案是将 Button 具有 FrameLayout 和使用 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移动到 框架布局 。您应该设置 onClickListener 到 框架布局 而不是 按钮 .

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

Quang Doan 9 年前

试试这个。

涟漪效果.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>

按钮.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"/>

建筑坡度

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

Gregory 5 年前

更简单的解决方案-使用这个可绘制的xml作为按钮的属性“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>

button.xml:

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

oiyio 6 年前

我也有类似的任务。让我解释一下我是如何解决这个问题的。它输出带有阴影和涟漪效果的圆形图像视图,不会超出圆形边界。

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

下面提供了圆形图像视图。

android:background="@drawable/buttons_inactive_coloring"

以下内容提供了阴影:

android:前景=“@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>

涟漪效应超出了圆的边界,这看起来不太好。小心点,别着急。

Mohamed Hocine 7 年前

这对我有用 可绘制/矩形.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>

以及波纹 可拉伸/撕裂.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"/>

希望这个帮助!!!

latifalbr 7 年前

这对我很有用。。

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

RHS.Dev 4 年前

试试这个:

卡片背面.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="20dp" />
                <solid android:color="?attr/cardBGColor" />
                <stroke android:width="1dp" android:color="?attr/borderColor"/>    
            </shape>
        </item>
</selector>

卡片_图片.xml

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

设置 android:background="@drawable/card_ripple"

caly__pso Mujahid Khan 5 年前

快速解决方案

    <?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/blue"
    tools:targetApi="lollipop">
    <item
        android:id="@android:id/mask"
        tools:targetApi="lollipop">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.1dp"
                android:color="#312D2D" />
            <solid android:color="#FFF" />
            <corners android:radius="50dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</ripple>

Aditya Vyas-Lakhan user1796260 9 年前

这将有所帮助

<com.abcd.ripplebutton.widget.RippleButton
        android:id="@+id/Summit"
        android:layout_width="260dp"
        android:layout_height="50dp"
        android:text="Login"
        android:textColor="@color/white"
        android:textStyle="bold"
        app:buttonColor="@color/Button"
        app:rippleColor="@color/white" />

有关详细信息,请参阅 this

Vlad 5 年前

对我来说只有这项工作

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#cccccc">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</ripple>

在布局中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:background="@drawable/ripple_white"/>

是的,应该可以点击