材料设计 - 操作栏标题和内容的左边距不匹配

7

我正在尝试按照布局-度量和关键线的指南设置屏幕边距。具体来说,移动屏幕上的列表内容应该有72 dp的边距,并与指南中显示的标题对齐:

enter image description here

作为Android Studio自动生成res/dimens.xml中的margin值,我认为通过添加我的自定义“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(模拟器,Lollipop 22)。

enter image description here

我正在使用一个自定义主题,其父级为Theme.AppCompat.Light.DarkActionBar,但我只更改了颜色,因此我认为这不是我的问题的根源。
我错过了什么?
1个回答

6

从您的TextViewListView中删除此内容:

android:layout_marginLeft="@dimen/content_horizontal_margin"

您的父标签已经指定了填充应该是什么:

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

它关闭的原因是您正在填充,然后设置边距。

此外,仅供参考,这里是 Padding和Margin之间的区别

更新

根据与@0X0nosugar的讨论,我们已经达成了以下代码以实现您的目标:

为了更改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>

这应该会帮助你实现你的目标!你做了很好的研究!


让我正确理解问题,您希望所有元素都对齐在图像上的红线上,还是与该线保持相同距离? - TejjD
我需要所有元素都对齐在红线上(=操作栏标题的开头)。 - Bö macht Blau
是的,但最初我将它们移动了56dp。所以它们被移动了16dp + 56dp = 72dp。因此它们应该与标题对齐,但它们没有。- 我只是将填充设置为72dp并像您建议的那样省略了边距。相同的结果,看起来完全像我的屏幕截图 :( - Bö macht Blau
如果是这种情况,那么从相对布局中删除右侧和左侧的填充,同时也不要在父元素中留下填充。看看会发生什么。然后只在父元素内部的元素上放置填充。 - TejjD
让我们在聊天中继续这个讨论 - Bö macht Blau
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接