【问题标题】:How to have padding for ripple effect如何填充波纹效果
【发布时间】:2021-12-11 01:43:12
【问题描述】:

以前,我使用StateDrawable 来实现带有阴影效果的自定义卡片视图 - https://stackoverflow.com/a/33829309/72437。这是由于CardView 的限制,无法在其cardBackgroundColor 中接受选择器

现在,我想添加涟漪效果。我使用以下 XML。

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

但是,这会产生副作用,绿色波纹会一直延伸到阴影区域。

我想避免绿色波纹接触阴影区域。我尝试添加填充信息。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#00ff00">
    <item>
        <shape android:shape="rectangle">
            <padding android:top="10dp" android:right="10dp" android:bottom="10dp" android:left="10dp" />
        </shape>
    </item>

    <item android:drawable="@drawable/statelist_item_background"/>
</ripple>

但是,这并没有什么不同。在ripple 标签内添加填充信息没有区别。

我可以知道如何填充波纹效果吗?

【问题讨论】:

  • 使用 layout_margin。涟漪效应不会超出您的利润范围
  • 你有解决办法吗?

标签: android


【解决方案1】:

您可以使用inset 标签来定义您需要的填充。有一个inset 属性来定义全局填充或每个方向的 4 个属性。

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:inset="10dp">
    <ripple
        android:color="#00ff00">
        <item android:drawable="@drawable/statelist_item_background"/>
    </ripple>
</inset>

【讨论】:

    【解决方案2】:

    首先创建可绘制文件(例如:bg_ripple.xml)

    <?xml version="1.0" encoding="utf-8"?>    
    <inset xmlns:android="http://schemas.android.com/apk/res/android"
        android:inset="4dp">
    
        <ripple android:color="@color/gray_light">    
    
            <item android:id="@android:id/mask">
                <shape android:shape="rectangle">
                    <!-- this color does not matter, it's a mask shape -->
                    <solid android:color="@color/blue" />
                    <corners android:radius="@dimen/button_corner_radius" />
                </shape>
            </item>
    
            <item android:id="@android:id/background">
                <shape android:shape="rectangle">
                    <corners android:radius="@dimen/button_corner_radius" />
                    <stroke
                        android:width="2dp"
                        android:color="@color/red"
                        />
                    <solid android:color="@color/white" />
                </shape>
            </item>
    
        </ripple>
    </inset>
    

    第二次将其作为背景添加到按钮

    <Button        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/click_me"
        android:background="@drawable/bg_ripple"
        />
    

    【讨论】:

      【解决方案3】:

      您应该将此添加到您的 CarView:

      <CardView
          ...
          style="@style/MyCardViewStyle"
          android:foreground="?attr/selectableItemBackground">
      </CardView>
      

      然后,将其添加到您的样式中:

      <style name="MyCardViewStyle">
          <item name="colorControlHighlight">@color/my_awesome_color</item>
      </style>
      

      它将为您的波纹效果提供您想要的令人敬畏的颜色,而无需自己创建您的波纹,并且会自动检测边界,因此您无需查找是否可以添加填充到涟漪。

      【讨论】:

      • 我不使用卡片视图。请再次查看我的问题
      • 您是说它不支持 backgroundColor 中的选择器。它做到了,你会使用它,对吧?
      • 是的。如果 CardView 在 backgroundColor 中接受选择器,我宁愿不用费力地使用 StateDrawable 实现阴影效果。但是,我 100% 确定当前状态,根据 android 中的问题报告,CardView 无法这样做 - code.google.com/p/android/issues/detail?id=78198
      • 对于按下状态的阴影,您可以扩展 CardView 并在状态更改时设置动画高度。对于波纹,我建议您改用前景属性,它可以提供更好的用户反馈,因为波纹是可见的,无论 CardView 中是什么。请注意,您的 CardView 对按下状态没有阴影反馈不是强制性的。我在我的应用程序中单独使用前景波纹。另外,不要过度卡片化你的 UI(参见 Material Design Guidelines)。似乎您在卡片中放入的内容很少,它们在列表中。在此处添加 CardViee 可防止对用户进行快速眼睛扫描。
      • 使用卡片视图前景将不起作用。如果您倾向于使用非透明颜色,它将阻止卡片视图内容。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-05-01
      • 2011-11-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-10
      相关资源
      最近更新 更多