【问题标题】:What should be the color of the Ripple, colorPrimary or colorAccent? (Material Design)Ripple、colorPrimary 或 colorAccent 的颜色应该是什么? (材料设计)
【发布时间】:2015-04-13 14:18:10
【问题描述】:

我已阅读 Material Design Guidelines,但如果不是黑色(带 alpha),我不知道波纹的颜色应该是什么。

例如,我有一个 colorPrimary = blue 和 colorAccent = red 的应用。实际上我使用的是 colorAccent(带 alpha),如果我想要与波纹不同的黑色颜色,我应该使用 colorPrimary(带 alpha)?

我检查了 Google 的所有应用,但他们从不使用带颜色的涟漪。

像我现在这样的图像:

【问题讨论】:

    标签: android colors material-design ripple design-guidelines


    【解决方案1】:

    Widget.Material.Button 样式使用btn_default_material.xml 作为其背景:

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
      <item android:drawable="@drawable/btn_default_mtrl_shape" />
    </ripple>
    

    请注意,波纹颜色为?attr/colorControlHighlightby default#40ffffff or #40000000(分别用于深色和浅色主题),如touch feedback guide 中所述。

    正如您所注意到的,涟漪用于触摸反馈的微妙指示,因此默认情况下它们不使用colorPrimarycolorAccent。这与 Android 4.4 (Kitkat) 中所做的更改一致,默认选择器颜色默认为中性。

    【讨论】:

    • 我认为谷歌的触摸反馈有问题。例如,滚动效果在 Play Store、Gmail、Chrome 中是中性色……但在 Youtube 中是红色,Play Books 是蓝色……他们应该在 Material Design Guidelines 中添加一个帖子来讨论这个问题。
    • 他们有其他指南,但应该更新...developer.android.com/design/style/touch-feedback.html
    【解决方案2】:

    这是 Roman Nurik 在推特上给我的这个问题的回复:

    罗马努里克
    @romanurik

    @dahnark @romainguy 它因情况而异,但您很少想使用强调色。我会说一般是中性的或主要的

    【讨论】:

    • 一般来说这是正确的,你不会想在大面积上使用彩色波纹。
    • 我希望远离材料规定并产生不​​同颜色的波纹,但需要波纹不透明度参数,以便我可以将其设置为 100%。
    【解决方案3】:

    对彩色波纹使用 26% 的 alpha。

    Android L 不支持颜色状态列表中的主题属性,&lt;ripple&gt; 元素没有 alpha 通道,但对于有界波纹,您可以执行以下操作:

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="?android:attr/colorAccent">
        <item android:id="@android:id/mask">
            <color android:color="#42ffffff" />
        </item>
    </ripple>
    

    这不适用于无限涟漪。或者,由于您知道自己的强调色,您可以定义 26% 的 alpha 版本或使用颜色状态列表。这两种方法中的任何一种都可以很好地处理无限的涟漪。

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="@color/accent_26" />
    

    res/values/colors.xml:

    <resources>
        ...
        <color name="accent">#ff33b5e5</color>
        <color name="accent_alpha26">#4233b5e5</color>
    </resources>
    

    res/color/accent_alpha26.xml:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/accent"
              android:alpha="0.26" />
    </selector>
    

    【讨论】:

    • 这不是问题,是关于 Google 指南建议在涟漪中使用原色与重音。您可以使用您的样式中的 colorControlHighlight 轻松设置波纹颜色。
    • 我是写Material styles and themes的Android框架工程师。彩色波纹的 alpha 为 26%。是的,您也可以使用后两个选项之一在您的主题或覆盖主题中进行设置。
    • colorAccent 是不透明的,因此这里的示例依赖颜色混合来实现 26% 的 alpha。默认的波纹颜色 colorControlHighlight 具有内置的不透明度,您可以使用 @color/white 作为遮罩颜色。
    • RippleDrawable 的当前实现将颜色拆分为前景(扩展)和背景(淡入),因此纯黑色在键盘聚焦时将显示 50% 黑色(仅背景)或 100%触摸时为黑色,按下状态动画结束(前景和背景)。这仍然会发生变化,因此我们没有公开任何用于单独控制它们的 API。
    • 它是涟漪材料规范的一部分,但我认为该规范的部分尚未发布(仍然是 WIP,正如每个版本之间的涟漪行为变化所证明的那样;))。
    【解决方案4】:

    这是您要查找的内容:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       ...
       <item name="colorControlHighlight">@color/ripple_material_dark</item>
       ...
    </style>
    

    【讨论】:

      【解决方案5】:

      作为参考,这些是 AppCompat 中定义的颜色。

      <color name="ripple_material_dark">#33ffffff</color>
      <color name="ripple_material_light">#1f000000</color>`
      

      【讨论】:

      • 为什么ripple_material_light 是深色而ripple_material_dark 是浅色,我错过了什么吗?
      • @iCantC 因为在深色主题上,涟漪需要很浅才能可见,反之亦然
      猜你喜欢
      • 2015-11-10
      • 1970-01-01
      • 2015-08-15
      • 2015-08-13
      • 2019-02-28
      • 2020-05-12
      • 1970-01-01
      • 2016-12-02
      • 2020-06-21
      相关资源
      最近更新 更多