工具栏标题的项目对齐问题？答案

【问题标题】：Toolbar header's item alignment issue?工具栏标题的项目对齐问题？
【发布时间】：2017-08-10 13:35:31
【问题描述】：

今天我遇到了Toolbar 自定义标头中的一个奇怪问题。
我在中心使用TextView，在Toolbar 右侧使用ImageView。所以我在xml中使用了下面的代码行，请检查一次。

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:theme="@style/AppTheme.NoActionBar.AppBarOverlay">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#3EC3D6"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/headerTxt"
                        style="@style/Base.TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="marquee"
                        android:gravity="center"
                        android:layout_gravity="center"
                        android:maxLines="1"
                        android:text="Tile"
                        android:textColor="@android:color/black" />


                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/chat_new_icon"
                        android:layout_gravity="right"
                        />

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

并从上面的代码中获取这些输出。

我已经使用RelativeLayout 解决了这个问题，但它也不起作用。请检查下面的代码

<android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#3EC3D6"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/headerTxt"
                        style="@style/Base.TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="marquee"
                        android:gravity="center"
                        android:layout_gravity="center"
                        android:layout_centerInParent="true"
                        android:maxLines="1"
                        android:text="Tile"
                        android:textColor="@android:color/black" />


                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/chat_new_icon"
                        android:layout_alignParentRight="true"
                        android:layout_gravity="right"
                        />

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

如果得到另一个意外结果，请检查一次。

我已经参考了这个解决方案，但它对我不起作用。请检查一次链接。
1. First Link
2. Second Link
3. Third Link
4. Forth Link

我需要TextView 应该在Toolbar 的中心和ImageView 应该在Toolbar 的右侧。请帮我解决这个问题。

【问题讨论】：

尝试添加 app:contentInsetEnd="0dp" app:contentInsetEndWithActions="0dp" app:contentInsetLeft="0dp" app:contentInsetRight="0dp" app:contentInsetStart="0dp" app:contentInsetStartWithNavigation=工具栏中的“0dp”
@DivyeshPatel 试过你的建议没用 :(
从您在问题中发布的第一个布局中删除 Toolbar 内的 LinearLayout。
没问题。 @ 987654327@，我的回答解释了为什么不居中，以及如何准确设置孩子@ 987654343@s，以防我的cmets不太清楚。请注意，那里的LinearLayout 仅用于垂直堆叠这两个TextViews。它不会填满Toolbar，也不会包含所有内容。
@MikeM。感谢有价值的评论作品:)

标签： android android-layout layout android-toolbar text-alignment

【解决方案1】：

只需更新您的代码...编辑您的相关布局实现

<RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/headerTxt"
                        style="@style/Base.TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="marquee"
                        android:layout_centerInParent="true"
                        android:maxLines="1"
                        android:text="Tile"
                        android:textColor="@android:color/black" />


                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/chat_new_icon"
                        android:layout_toRightOf="@+id/headerTxt"
                         android:layout_centerVertical="true"
                        />

                </RelativeLayout>

【讨论】：

请您提供您的@style/AppTheme.NoActionBar.PopupOverlay
请查看<style name="AppTheme.NoActionBar.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
@RavindraKushwaha 我已经发布了带有完整工具栏布局的第二个答案，请检查...

【解决方案2】：

这是有效的......

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:local="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#3EC3D6"
    app:layout_collapseMode="pin"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/headerTxt"
            style="@style/Base.TextAppearance.AppCompat.Medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:text="Tile"
            android:textColor="@android:color/black" />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/headerTxt"
            android:src="@drawable/delete_icon" />

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

【讨论】：

我已经尝试了第二个解决方案，但它也不起作用，请检查上面代码的输出。 ibb.co/m7Zqzv
我再次提到代码和屏幕截图将输出什么，我发布了它

【解决方案3】：

这就是我的结局

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:local="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#3EC3D6"
    app:layout_collapseMode="pin"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/headerTxt"
            style="@style/Base.TextAppearance.AppCompat.Medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:text="Tile"
            android:textColor="@android:color/black" />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/headerTxt"
            android:src="@drawable/delete_icon" />

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

【讨论】：

我需要@MohdSaquib 那，标题应该在中间，图像在右边..
在我的解决方案中，我认为您的要求已满足，由于操作栏属性，它不会完美地出现在中心，其余部分如图 i 共享所示。4
我需要它中心兄弟..这就是我在 SO 上问的问题。感谢我们的价值打包时间

【解决方案4】：

@MikeM. 建议对我有用。有关该问题的更多详细信息，请参阅此链接click here

为了摆脱这个问题，我已经删除了Toolbar 内的LinearLayout，并在android:layout_gravity 的帮助下设置了视图的重力，请参考以下解决方案

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#3EC3D6"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay">

                <TextView
                    android:id="@+id/headerTxt"
                    style="@style/Base.TextAppearance.AppCompat.Medium"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:ellipsize="marquee"
                    android:maxLines="1"
                    android:text="Tile"
                    android:textColor="@android:color/black" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginRight="10dp"
                    android:src="@drawable/chat_new_icon" />


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

从上面的代码中得到预期的结果，请检查一次。

【讨论】：