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

时间:2014-10-29 04:57:20

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

在新的Material Design(使用AppCompat)中,我试图将一些动作图标与新工具栏的抽屉图标对齐。类似的东西:

enter image description here

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

Touch Target Size

enter image description here

问题在于我无法完美地对齐它,因为在剩下16px的填充后,图标应该开始,但图标本身也有一些“填充”(来自材质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

enter image description here

我实际上没有看到将marginLeft和paddingLeft设置为正确值的规则,而不使用自定义按钮作为单选按钮(并且知道该按钮的尺寸)......&lt; - 这是一个不好的选择因为颜色按钮来自我的accentColor(新材料)。

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

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:2)

  

问题在于我无法完美地对齐它,因为在那之后   左边填充16px,图标应该开始,但图标本身有   还有一些“填充”(来自材料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
这是图标drawable中包含的填充,您不应该删除它。 icon live area

enter image description here

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