首页 文章

单击按钮时如何在按钮上形成圆形纹波？

提问于
浏览 次
88

背景

在Android的拨号器应用程序上，当您开始搜索某些内容，然后单击EditText左侧的箭头按钮时，会对其产生圆形连锁效果：

enter image description here

问题

我也尝试过它，但我有一个矩形的：

<ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

这个问题

单击时如何使按钮具有圆形波纹效果？我是否必须创建一个新的drawable，或者是否有内置的方式？

android button rippledrawable

7 回答

  • 12

    如果您已经有一个背景图像，这里有一个看起来接近selectableItemBackgroundBorderless的波纹示例：

    <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

    ic_filter_state.xml：

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

    state_pressed_ripple.xml :(白色背景上的不透明度设置为10％）1AFFFFFF

    <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>
    回复于
  • 10

    如果您使用的是AppCompat主题，则可以将视图的背景设置为：

    android:background="?selectableItemBackgroundBorderless"

    这将在21及以上添加圆形纹波，在21以下添加方形背景 .

    回复于
  • 39

    创建并设置一个可绘制的波纹作为背景 . 像这样的东西 .

    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>
    回复于
  • 34

    具有圆形波纹效果的另一个属性，特别适用于动作栏：

    android:background="?actionBarItemBackground"
    回复于
  • 221

    您可以使用xml中的 android:radius 属性创建圆形波纹绘制 .

    例：

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

    请注意，您的 your_radius 应该小于您的视图宽度和高度 . 例如：如果您的视图大小 60dp x 60dp your_radius 应该在 30dp 附近（宽度/ 2或高度/ 2） .

    适用于Android 5.0及更高版本 .

    回复于
  • 2

    只需将此背景添加到您的视图 "android:background=?android:attr/actionBarItemBackground"

    回复于
  • 1

    如果你想要更通用的XML文件，我有两个文件：

    1） btn_ripple_background 代码：

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

    2） ripple_circuler_shape 代码：

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

    最后的用法： android:foreground="@drawable/ripple_btn_background"

    回复于

相关问题