Android

Question

考虑到在 Activity 上膨胀的菜单，我正在尝试将文本集中在工具栏上。我在 SO 上找到了很多解决方案，但没有找到任何涵盖菜单也膨胀的情况。

如果我只给 ImageView 充气而不给 menu 充气，一切都很好。如果我膨胀 ImageView 和 menu，那么 image 不会显示在 Toolbar 的中心，而是显示在它自己的 space 中心（介于汉堡包和菜单）

结论：

我需要将 ImageView 集中在 Toolbar 上，无论后面的东西是否膨胀。我现在充气的menu只有一个item（一个开关，一直可见）

这是我当前的代码：

 <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                app:elevation="0dp">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:contentInsetLeft="0dp"
                    app:contentInsetStartWithNavigation="0dp"
                    app:theme="@style/ToolbarTheme">

                    <ImageView
                        android:id="@+id/toolbar_logo"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/app_logo" />

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

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

Activity:

...    
@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_toolbar_user_visibility, menu);
        return true;
    }
...

如何在菜单展开后使 ImageView 居中？

Answer 1

If I inflate the imageView and the menu then the image doesn't get displayed in the center of toolbar, but center on its own space (between hamburger and menu).

发生这种情况是因为，您在 Toolbar 中添加了 ImageView，并且由于您的 Toolbar 用作 ActionBar，所以它使用了一些 left space 用于 back 或 drawer 图标，right space 用于选项 menu。

Toolbar = "Back arrow" + "Middle area(Title/Image)" + "Option menu"

解决方案：

1. 添加一个 RelativeLayout 作为 AppBarLayout.

的直接子代

2.把Toolbar和ImageView放在RelativeLayout.

里面

3. 将属性 android:layout_centerInParent="true" 添加到 imageView 以显示在 Toolbar 的 center。

这是工作代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        app:elevation="0dp">

        <RelativeLayout
            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="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:contentInsetLeft="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:id="@+id/toolbar_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_launcher" />
        </RelativeLayout>

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

    <!-- Your Content here -->

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

在您的 activity 中，添加以下行：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);
getSupportActionBar().setTitle(""); // hide title
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

输出：

希望对你有所帮助~

Answer 2

您可以创建单独的布局，让您忽略工具栏本身并自由对齐并将其包含在工具栏布局之后。按 getSupportActionBar().setDisplayShowTitleEnabled(false); 删除标题。（这是 offcurse a drawer activity 和 fragments 但你可以忽略）

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
    tools:context=".MainActivity"
    android:background="@color/splashback"
    android:id="@+id/drawer_layout"
    android:layoutDirection="rtl"
    >

    <!-- your main fragment content layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/content_main"/>

    <!-- your action bar (customised) layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/drawer_toolbar"/>

    <!-- GO TO CENTER MORON LOGO layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/toolbarlogo"/>

    <!-- drawer -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_menu"
        app:headerLayout="@layout/drawer_head"
        android:fitsSystemWindows="true"

        />


</androidx.drawerlayout.widget.DrawerLayout>

drawer_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        android:id="@+id/toolbarx"
        android:layoutDirection="rtl"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        />

</LinearLayout>

toolbarlogo.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize" android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:src="@drawable/logotoolbar"
        android:layout_gravity="center"
        />

</LinearLayout>

Android - 工具栏上的中心图像，菜单膨胀

Android - Center image on Toolbar with menu inflated

menu

android-layout

android-toolbar