对齐支持操作栏 appcompat 中的项目

Question

我有一个appCompatActivity 和一个supportActionBar 类似于whatsApp chat screen 接口。能够使用所有必要的组件自定义actionbar，我无法在最左侧的up/back 按钮上应用任何类型的填充/边距。但是，我在toolbar 中设置的其余项目都正确对齐。

这是我的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>

...

在活动中：

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 设置为负值，甚至图像也不会向左移动。如何仅将边距/填充对齐应用于此 toolbar？不是应用程序中使用的工具栏。

Answer 1

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

没有明确设置 contentInset:

将 contentInset 设置为 0dp

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

因此，如果您想实现与 WhatsApp 相同的功能，则必须使用自己的“后退按钮”可绘制对象并将其添加到您的 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="StackOverflow"
        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 中一样实现了这种连锁反应。