【问题标题】:What exactly is "Touch Target Size" in Android Material DesignAndroid Material Design 中的“Touch Target Size”到底是什么
【发布时间】:2016-09-27 18:33:35
【问题描述】:

参考有关 Material Design 的 Android 文档,我经常发现我们被引导将按钮的“触摸目标”设置为 48dp 高度 (https://www.google.com/design/spec/components/buttons.html#buttons-style)。 但它是每个 Button 元素的默认值,还是我必须明确设置它以及如何设置?

【问题讨论】:

    标签: android button layout material-design


    【解决方案1】:

    如果您对默认材质按钮没问题,只需使用它即可。大多数事情都没问题。 Button 的 Material 主题定义为:

    <!-- Bordered ink button -->
    <style name="Widget.Material.Button">
        <item name="background">@drawable/btn_default_material</item>
        <item name="textAppearance">?attr/textAppearanceButton</item>
        <item name="minHeight">48dip</item>
        <item name="minWidth">88dip</item>
        <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
        <item name="focusable">true</item>
        <item name="clickable">true</item>
        <item name="gravity">center_vertical|center_horizontal</item>
    </style>
    

    如您所见,minHeight 属性设置为 48dp,这意味着该按钮的高度至少为 48dp。不好的是Button的背景有插图,这意味着额外的触摸区域是通过在按钮周围有一些透明像素来实现的。这使得按钮很难正确布局,如下面的 SO 帖子所示:

    How to align Material buttons with other UI elements

    这样的小部件设计确实限制了布局构建选项。该指南将触摸目标描述为应该影响小部件的外部附加触摸区域。应该这样做:

    • 用半径为 2dp 的圆形矩形覆盖默认背景
    • 将 minHeight 设置为 36dp
    • 使用 setTouchDelegate 改变触摸目标
    • 或覆盖 getHitRect 以更改触摸目标

    见:

    https://developer.android.com/reference/android/view/TouchDelegate.html

    https://developer.android.com/reference/android/view/View.html#getHitRect(android.graphics.Rect)

    【讨论】:

    • 感谢您的详细解释。所以你的意思是把minHeight设置为48dip就可以达到“触摸目标尺寸”的要求,还是通过导入的样式“Widget.Material.Button”制作的?我问这个问题是因为我很好奇没有指南可以使用所谓的“触摸目标大小”制作类似于材质按钮的自定义按钮。
    • 将 minHeight 设置为 48dp 会将触摸矩形和绘图矩形设置为 48dp,这就是“Widget.Material.Button”的作用。他们使用形状插图将绘图矩形从该尺寸缩小。我宁愿将 minHeight 设置为 36dp 并使用我提到的两种方法之一来扩展触摸矩形。
    • 在哪里可以找到可绘制的“@drawable/btn_default_material”?
    • 我猜是在 Google 存储库中的某个地方 :)
    【解决方案2】:

    Material Design 是一种设计规范,因此,它谈论了很多“什么”,而不是“如何”。触摸目标尺寸基于多年来发现的小部件应具有的最小尺寸,以便普通人的手指轻松交互。如果您坚持使用 Google 定义的主题和样式(例如 AppCompat 主题),您应该没问题。如果您使用完全自定义的主题(我个人建议您不要这样做),那么您必须使用 48dp 的 minWidth 和/或 minHeight 来设置小部件的样式。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-04-24
      • 2018-11-06
      • 1970-01-01
      • 1970-01-01
      • 2020-06-24
      • 2016-09-09
      • 2015-12-26
      • 1970-01-01
      相关资源
      最近更新 更多