【问题标题】:Align an icon with the Toolbar icon - Android Material Design将图标与工具栏图标对齐 - Android Material Design
【发布时间】:2014-12-24 17:25:22
【问题描述】:

在新的 Material Design(使用 AppCompat)中,我试图将一些操作图标与新工具栏的抽屉图标对齐。比如:

我认为我正在正确查看所有指标...

Touch Target Size

问题是我无法完美对齐它,因为在 16px 的左侧填充之后,图标应该开始,但图标本身也有一些“填充”(来自材料 github 的图标),例如:

也许很傻,但我不知道我错过了什么。如何考虑图像内部的填充以正确对齐它?我在将单选按钮或复选框与该操作栏图标对齐时遇到了同样的问题。

我试过这段代码:

<RelativeLayout
    android:id="@+id/image_button"
    android:layout_width="72dp"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="32dp"
        android:layout_height="48dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_label_grey600_48dp" />
</RelativeLayout>

但看起来与我不一致(就像我发布的第一个屏幕截图一样)。这里看起来也完美对齐:

并且看起来像考虑了超过 72px 和 16px 的填充。


更新

好的,让我向你们展示更多示例和一些代码。想象我的列表项有一个带有标签文本的单选按钮。

<RadioButton
     style="?android:textAppearanceMedium"
     android:layout_width="wrap_content"
     android:layout_height="48dp"
     android:layout_marginLeft="16dp"
     android:paddingLeft="32dp"
     android:singleLine="true"/>

结果:

在不使用自定义按钮作为单选按钮(并且知道该按钮的尺寸)的情况下,我实际上没有看到将 marginLeft 和 paddingLeft 设置为正确值的规则...

新的 Gmail 应用似乎也面临一些对齐问题(请参阅当我选择邮件时,1 不再与邮件标题对齐):

【问题讨论】:

  • 也许将您的版本发布为屏幕截图和代码,以便我们了解您的实际想法?
  • 我用单选按钮做了一个例子。仅将文本与操作栏对齐是可以的(不是单选按钮标签)。同样正如我所说,对齐图标也存在问题(您不知道内部填充)。
  • 在你的适配器中,在 newView/bindView 为什么不手动调整图标的边距?
  • 问题是单选按钮(如图像)在按钮本身内部有一些填充,我需要知道该值才能正确调整它。

标签: android android-layout android-actionbar material-design android-icons


【解决方案1】:

问题是我无法完美对齐它,因为在那之后 左填充 16px,图标应该开始,但图标本身有 还有一些“填充”(来自材料 github 的图标)

是的,图标必须有一些填充,并且根据图标显示的屏幕分辨率而有所不同。 不同屏幕密度的填充:
mdpi        4px * 1.0 = 4px
hdpi         4px * 1.5 = 6px
xhdpi       4px * 2.0 = 8px
xxhdpi     4px * 3.0 = 12px
xxxhdpi 4 像素 * 4.0 = 16 像素
这是图标可绘制中包含的填充,您不应将其删除。

http://www.google.com/design/spec/style/icons.html#icons-system-icons

【讨论】:

  • 谢谢!我正在寻找那个。所以......创建一个样式(在 res 文件夹中)是否有意义,取决于 dpi,填充会有所不同?我的单选按钮示例呢?它也遵守这些规则吗?
  • 我现在无法回复你,因为我没有测试它。接下来的几天,我还必须对齐一些单选按钮,所以我会让你知道。请注意,具有 Material Design 的 Google 应用在对齐方面仍然存在一些问题,而 AppCompat 小部件可能存在一些问题。
猜你喜欢
  • 2019-12-22
  • 1970-01-01
  • 2016-11-30
  • 1970-01-01
  • 1970-01-01
  • 2018-05-14
  • 1970-01-01
  • 2015-03-20
  • 1970-01-01
相关资源
最近更新 更多