材质设计-操作栏标题和内容的左边距不匹配 [英] Material design - left margins for action bar title and content don't match

问题描述

我正在尝试按照布局-的准则设置屏幕边距-指标和关键点.具体来说，移动屏幕上的列表内容的边距应为72 dp，并与指南中的标题对齐:

I'm trying to set screen margins following the guidelines for Layout - Metrics and keylines. Specifically, list content on mobile screens should have a margin of 72 dp and align with the title as shown in the guide:

随着Android Studio在res/dimens.xml中自动生成边距值，我认为我可以通过添加自己的内部"边距来使内容与标题对齐:

As Android Studio automatically generates margin values in the res/dimens.xml, I thought that I'd get my content to align with the title by adding my own 'inner' margin:

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <!-- 16 + 56 = 72 = "Content left margin from screen edge" -->
    <dimen name="content_horizontal_margin">56dp</dimen>
</resources>

myactivity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin">

    <TextView
        android:id="@+id/tvEditPlaylistInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="@dimen/content_horizontal_margin"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="test" />

    <ImageButton
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:src="@drawable/action_current"
        android:layout_alignBottom="@id/tvEditPlaylistInfo"
        android:layout_toRightOf="@id/tvEditPlaylistInfo"
        android:layout_marginLeft="16dp"/>

    <ListView
        android:id="@+id/lvAudioFiles"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/content_horizontal_margin"
        android:layout_below="@id/tvEditPlaylistInfo">
    </ListView>

</RelativeLayout>

但是不知何故，我的内容被关闭"了8dp(模拟器，棒棒糖22).

But somehow my content is "off" by about 8dp (emulator, Lollipop 22).

我正在将自定义主题与父级Theme.AppCompat.Light.DarkActionBar一起使用，但是我只更改了颜色，因此我认为这不是问题的根源.

I'm using a custom theme with parent Theme.AppCompat.Light.DarkActionBar but I only changed colors so I think that is not the source of my problem.

我想念什么?

推荐答案

从您的TextView和ListView中删除此内容:

Remove this from your TextView and ListView:

android:layout_marginLeft="@dimen/content_horizontal_margin"

您的父标签已经指定了填充内容:

Your parent tag already specifies what the padding should be:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin">

关闭它的原因是因为您要填充，然后设置边距.

The reason why it is off is because you are padding, and then setting a margin.

此外，仅出于兴趣考虑，这是填充和边距之间的区别.

Also, just for interest, here is The difference between Padding and Margin.

更新

根据与@ 0X0nosugar的讨论，到了下面的代码可以帮助实现您的目标的地步:

As per the discussion with @0X0nosugar, we've come to a point where the following code assists with achieving your objective:

为了更改ActionBar，应在您的onCreate()中添加以下内容:

ActionBar actionBar = getSupportActionBar(); 

if (actionBar != null) 
{ 
    View customView = getLayoutInflater().inflate(R.layout.custom_action_bar, null); 
    actionBar.setDisplayShowTitleEnabled(false); 
    actionBar.setDisplayShowCustomEnabled(true); 
    actionBar.setCustomView(customView); 
}

为工具栏创建自定义视图

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:background="@color/accent_deeporangeA400" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="MyMusicApp" 
    android:id="@+id/ab_title" 
    android:layout_centerVertical="true" 
    android:layout_alignParentLeft="true" 
    android:layout_marginLeft="@dimen/activity_horizontal_margin" 
    android:textAppearance="?android:attr/textAppearanceLarge"/> 

</RelativeLayout>

这应该可以帮助您实现目标！您的研究很好！

This should help you achieve your objective! Good researching on your part!

这篇关于材质设计-操作栏标题和内容的左边距不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！