将溢出菜单项的图标与工具栏标题对齐

Question

编辑：我现在有一个自定义 Toolbar，布局与我的 activity_main.xml 不同（toolbar.xml）。新布局现在仅包含一个 TextView 标题。然而，Toolbar 有一个 overflow menu，它只包含一个项目（设置图标）并且它被设置为 showAsAction="always"。但是，在布局预览中我看不到实际的设置图标，因此我无法 align 我的标题 TextView 和图标以避免任何错位（见图）。有什么想法吗？

toolbar.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 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="70dp"
    android:background="@drawable/toolbar_gradient"
    android:elevation="4dp"
    app:titleTextColor="@android:color/white"
    app:layout_scrollFlags="scroll|enterAlways">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/toolbar_title_placeholder"
        android:fontFamily="@font/montserrat_semibold"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>

如下图所示，我的标题 TextView 与 overflow menu item（设置图标）没有对齐。有什么办法可以解决这个问题吗？

Answer 1

添加 CoordinatorLayout & AppBarLayout 与 app:elevation="0dp".

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <com.google.android.material.appbar.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme.AppBarOverlay"
                app:elevation="0dp">

                <androidx.appcompat.widget.Toolbar
                  android:id="@+id/toolbar"
                  android:layout_width="match_parent"
                  android:layout_height="?attr/actionBarSize"
                  android:background="?attr/colorPrimary"
                  app:popupTheme="@style/AppTheme.PopupOverlay"
                  app:titleTextAppearance="@style/Toolbar.TitleText"
                  app:layout_scrollFlags="scroll|enterAlways"
                    > 
                 //Your work
                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.AppBarLayout>

     <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       >

      //Your work
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 2

70dp 是工具栏的 non-standard 高度，这是布局的根本问题。如果您保持 70dp 工具栏高度不变，则需要调整工具栏布局。

这是一种只修改 XML 布局的方法。工具栏中的 7dp 填充将使图标向下移动。对文本视图的相应更改使其保持对齐。

<androidx.appcompat.widget.Toolbar 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="70dp"
    android:background="@android:color/holo_blue_light"
    android:elevation="4dp"
    android:paddingTop="7dp"
    app:layout_scrollFlags="scroll|enterAlways"
    app:titleTextColor="@android:color/white">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="center_horizontal|top"
        android:gravity="center"
        android:text="@string/toolbar_title_placeholder"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>

要了解发生了什么，请进行更改并运行应用程序。在 Android Studio 中，转到“工具”->“布局检查器”并选择您的设备和应用程序。您将看到的是您可以检查的布局转储。

此方法适用于您发布的内容。它可能会对其他视图的放置产生副作用，因此请注意。

另一种方法涉及检索与设置图标对应的视图的代码。如果我记得的话，它并不漂亮。

顺便说一句，您在 Android Studio 中看不到设置图标，因为菜单项是在运行时添加的。

Answer 3

我们知道 Android 在设计模式中有一些特定的规则，如工具栏大小、图标大小等。

Android 更喜欢在工具栏中使用 actionBarSize。

?android:attr/actionBarSize

在您的情况下，如果您需要自定义大小的工具栏，那么您应该创建自己的自定义工具栏，如下所示：

 <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:background="@color/colorWhite"
                android:contentInsetLeft="0dp"
                android:contentInsetStart="0dp"
                android:elevation="0.1dp"
                android:paddingEnd="10dp"
                android:paddingStart="10dp"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                tools:targetApi="lollipop">

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


                    <LinearLayout
                        android:id="@+id/search_layout"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="start"
                        android:orientation="horizontal">


                        <ImageView
                            android:id="@+id/toolbar_start_image_view"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:padding="5dp"
                            android:src="@drawable/ic_search_black_24dp"

                            />


                    </LinearLayout>


                    <TextView
                        android:id="@+id/toolbar_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:fontFamily="@font/bold"
                        android:gravity="center"
                        android:text="Visit Tulsipur"
                        android:textColor="@color/colorBlack"
                        android:textSize="18sp" />

                    <LinearLayout
                        android:id="@+id/notification_layout"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="end"
                        android:orientation="horizontal">


                        <ImageView
                            android:id="@+id/toolbar_end_image_view"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:padding="5dp"
                       android:src="@drawable/ic_notifications_none_black_24dp"

                            />


                    </LinearLayout>

                </LinearLayout>

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

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

现在您可以在定义的 ImageView/Layout 中设置点击。

输出

将溢出菜单项的图标与工具栏标题对齐

Aligning an overflow menu item's icon with the Toolbar Title

android

android-optionsmenu

android-toolbar

android-constraintlayout