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

时间:2015-09-18 03:09:16

标签: android android-layout android-actionbar android-appcompat android-actionbar-compat

我的appCompatActivity supportActionBarwhatsApp 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应用边距/填充对齐?不是应用程序中使用的工具栏。

1 个答案:

答案 0 :(得分:2)

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

没有明确设置contentInset:

picture - without setting inset

将contentInset设置为0dp

picture - inset set to 0dp

请注意:如果您使用getSupportActionBar().setDisplayHomeAsUpEnabled(true),则无效。因为系统将使用的drawable具有无法删除的填充。请参阅以下屏幕截图:

enter image description here

因此,如果您尝试实现与WhatsApp相同的功能,则必须使用自己的“后退按钮”drawable并将其添加到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();
        }
    });

<强>结果:

result picture

请注意,我将后退按钮drawable和avatar包含在一个额外的布局中,其中selectableItemBackgroundBorderless设置为背景。因为我们在WhatsApp中实现了这种连锁反应。