将图标与工具栏图标对齐 - Android Material Design

Question

将图标与工具栏图标对齐 - Android Material Design

androidandroid-layoutandroid-actionbarmaterial-designandroid-icons

10

在新的 Material Design（使用 AppCompat），我正在尝试将一些操作图标与新工具栏的抽屉图标对齐。类似这样：

enter image description here

I think我正确地查看了所有指标... 触控目标大小

enter image description here

问题在于我无法完美对齐它，因为在16像素的左填充之后，图标应该开始，但图标本身也有一些“填充”（来自Material GitHub的图标），例如：

enter image description here

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

我尝试了这段代码：

<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>

但是对我来说看起来并没有对齐（就像我发布的第一张截图一样）。在这里看起来完全对齐：

enter image description here

看起来似乎考虑了比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"/>

结果：

enter image description here

我实际上没有看到设置marginLeft和paddingLeft的规则，以正确的值而不使用自定义按钮作为单选按钮（并知道该按钮的尺寸）... <-- 这是一个糟糕的选择，因为颜色按钮是从我的accentColor（Material的新内容）中获取的。

此外，新的Gmail应用程序似乎遇到了一些对齐问题（当我选择邮件时，1不再与邮件标题对齐）。

enter image description here

- Ferran Negre

可以把你的版本发帖并附上代码截图，这样我们就能看到你实际编写的内容了吗？ - Derk-Jan

我用单选按钮做了一个示例。仅将文本与操作栏对齐是可以的（而不是单选按钮标签）。另外，正如我所说，还存在对齐图标的问题（您不知道内部填充）。 - Ferran Negre

在你的适配器中，在newView/bindView中，为什么不手动调整图标的边距呢？ - Codeversed

问题在于单选按钮（就像图像一样）在按钮本身内部有一些填充，我需要知道该值以正确调整它。 - Ferran Negre

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vovahost · Accepted Answer

问题在于我无法完美地对齐它，因为在左侧填充16px之后，图标应该开始显示，但图标本身也有一些“填充”(来自material github的图标)。

是的，图标必须有一些填充，并且它取决于将显示该图标的屏幕分辨率。不同屏幕密度的填充：
mdpi        4px * 1.0 = 4px
hdpi         4px * 1.5 = 6px
xhdpi       4px * 2.0 = 8px
xxhdpi     4px * 3.0 = 12px
xxxhdpi 4px * 4.0 = 16px
这是包含在图标可绘制对象中的填充，您不应该删除它。 icon live area

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