对齐工具栏图标的图标 - Android的材料设计 [英] Align an icon with the Toolbar icon - Android Material Design

问题描述

在新材料设计（使用AppCompat），我想调整一些动作图标，新的工具栏的抽屉图标。是这样的：

我觉得我期待中的所有指标正常......

<一个href="http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-touch-target-size"相对=nofollow>触摸目标大小

现在的问题是，我不能完全一致，因为16像素的那个左填充后，图标应该开始，但图标本身也有一些填充（从物质github上的图标），如：

也许是愚蠢的，但我不知道我错过了什么。我怎样才能兼顾填充在图像内以正确对齐？我有同样的问题与调整单选按钮或复选框与操作栏中的图标。

我想这块code：

 ＆LT; RelativeLayout的
    机器人：ID =@ + ID / image_button
    机器人：layout_width =72dp
    机器人：layout_height =WRAP_CONTENT＆GT;

    ＆LT; ImageView的
        机器人：layout_width =32dp
        机器人：layout_height =48dp
        机器人：layout_marginLeft =16DP
        机器人：layout_marginStart =16DP
        机器人：SRC =@可绘制/ ic_label_grey600_48dp/＆GT;
＆LT; / RelativeLayout的＆GT;
 

但看起来并不一致，我（像在第一张截图我张贴）。这里看起来也完全一致：

和看起来喜欢走在考虑更多的东西比72px和填充的16px的。

---

更新

好吧，让我告诉你们更多的例子，有些code。成像我的列表项有一个单选按钮的标签文本。

 ＆LT;单选按钮
     风格=安卓？textAppearanceMedium
     机器人：layout_width =WRAP_CONTENT
     机器人：layout_height =48dp
     机器人：layout_marginLeft =16DP
     机器人：以下属性来=32dp
     机器人：单线=真/＆GT;
 

结果：

我没有真正看到一个规则来设置marginLeft及以下属性来以正确的价值观，而无需使用自定义的按钮，一个单选按钮（并知道该按钮的尺寸）...＆LT; - 这是个不错的选择因为是采取来回我accentColor（材料新东西）的颜色按钮。

它也像新的Gmail应用程序面临一定的调整问题（见当我选择一个邮件，在1不再与邮件标题排列）：

解决方案

  

现在的问题是，我不能完全一致，因为在那之后   16像素的左填充，该图标应该开始，但图标本身具有   也有一些填充（从物质github上的图标）

是的，此图标必须有一些填充它，这取决于屏幕分辨率的图标将显示各不相同。 填充不同的屏幕密度：
MDPI＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; 4PX * 1.0 = 4PX
华电国际＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; 4PX * 1.5 = 6px
xhdpi＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; 4PX * 2.0 = 8像素
xxhdpi＆NBSP;＆NBSP;＆NBSP; 4PX * 3.0 = 12px的
xxxhdpi＆NBSP; 4PX * 4.0 = 16px的
这是包含在图标绘制的填充，你不应该将其删除。

http://www.google.com/设计/规格/风格/ icons.html＃图标，系统图标

In the new Material Design (using AppCompat), I am trying to align some action icons with the drawer icon of the new toolbar. Something like:

I think I am looking in all the metrics correctly...

Touch Target Size

The problem is that I can't perfectly align it, because after that left padding of 16px, the icons should start, but the icon itself has also some "padding" (icon from material github), like:

Maybe is silly but I do not know what I am missing. How can I take into account the padding inside the image to properly align it? I have same problem with aligning radio buttons or checkbox with that action bar icon.

I tried this piece of code:

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

But does not look align to me (like in the first screenshot I posted). Here also looks perfectly align:

And looks likes is taking in account something more than that 72px and 16px of padding.

---

UPDATE

Ok, let me show you guys more examples and some code. Imaging that my list item has a radio button with a label text.

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

Result:

I don't actually see a rule to set marginLeft and paddingLeft to the right values without using a custom button as a radio button (and knowing the dimensions of that button) ... <-- Which is a bad option because the color button is taken fro my accentColor (new stuff of Material).

It also looks like new Gmail app is facing some alignment issues (see when I select a mail, the 1 is not aligned anymore with the mail title):

解决方案

The problem is that I can't perfectly align it, because after that left padding of 16px, the icons should start, but the icon itself has also some "padding" (icon from material github)

Yes, the icon must have some padding and it varies depending on which screen resolution the icon will be displayed. The padding for different screen density:
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
This is the padding included in the icon drawable and you shouldn't remove it.

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

这篇关于对齐工具栏图标的图标 - Android的材料设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！