在支持 actionbar appcompat 中对齐项目

Question

我有一个 appCompatActivity，其 supportActionBar 类似于 whatsApp chat screen 界面。在能够使用所有必要的组件自定义 actionbar 之后，我无法在最左侧的 up/back 按钮上应用任何类型的 padding/margin。但是，我在 toolbar 中设置的其余项目已正确对齐。

这是我的 activity 的 layout 的样子：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/relMainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/avatar"
            android:layout_width="@dimen/action_bar_avatar_size"
            android:layout_height="@dimen/action_bar_avatar_size"/>

        <TextView
            android:id="@+id/txtUserName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

...

在activity中：

mImageViewAvatar = (ImageView) findViewById(R.id.avatar);
        mTextViewUserName = (TextView) findViewById(R.id.txtUserName);
        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    mImageViewAvatar.setBackgroundImage(Contacts.getImage());
        mTextViewUserName.setText(recipientId);

我已经尝试将我的 layout_marginLeft 设置为负值，即使图像也不会向左移动。如何仅将 margin/padding 对齐应用于此 toolbar？不是应用程序中使用的工具栏。

Answer 1

我猜你正在分别寻找 app:contentInsetLeft app:contentInsetStart。将这些属性设置为 0dp 将删除填充 - 请参见以下两个屏幕截图：

没有明确设置 contentInset:

将 contentInset 设置为 0dp

请注意：如果您使用getSupportActionBar().setDisplayHomeAsUpEnabled(true)，这将不起作用，因为系统将使用的可绘制对象有一个不能填充的填充被删除。请参阅以下屏幕截图：

因此，如果您想实现与 WhatsApp 相同的效果，则必须使用自己的 "back-button" 可绘制对象并将其添加到 Toolbar 布局中。

编辑

我就是这样做的：

*.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <LinearLayout
        android:id="@+id/layout_back_button"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center_vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_arrow_back" />

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/avatar" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="Whosebug"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textSize="20dp" />

</android.support.v7.widget.Toolbar>

Java代码

    Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(tb);
    getSupportActionBar().setTitle(null);
    View view = findViewById(R.id.layout_back_button);
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            onBackPressed();
        }
    });

结果：

请注意，我将可绘制的后退按钮和头像包裹在一个额外的布局中，该布局将 selectableItemBackgroundBorderless 设置为背景。由于我们在 WhatsApp 中实现了这种连锁反应。

在支持 actionbar appcompat 中对齐项目

Aligning items in support actionbar appcompat

android

android-layout

android-actionbar

android-appcompat

android-actionbar-compat

编辑