如何在 Android 工具栏中居中按钮

Question

我是 Android 应用程序开发新手。我正在尝试创建一个工具栏，上面有 3 个按钮，左侧中间和中间。我的左右按钮位置正确，但中间按钮显示在页面中间而不是工具栏中间。想知道是否有人可以帮忙解决这个问题。谢谢

还想知道是否有人可以帮助解决工具栏上方的空白区域

活动_主要：

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        >


    <include
        android:id="@+id/app_bar_main"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/menu_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="Menu" />

        <Button
            android:id="@+id/add_new_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:text="Add New" />

        <Button
            android:id="@+id/home_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Home" />

    </RelativeLayout>


    <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"
        android:background="#141619"
        android:fitsSystemWindows="true"
        app:itemIconTint="#141619"
        app:itemTextColor="#FFFFFF"
        app:menu="@menu/activity_main_drawer" >

    </com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

app_bar_main：

<?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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.MPL.AppBarOverlay">
        
    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

工具栏布局：

<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#141619"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

    />

Answer 1

我已经解决了您所有布局的问题。

1. 将您的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:id="@+id/drawer_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:fitsSystemWindows="true"
       tools:openDrawer="start">
   
   
       <RelativeLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent">
   
   
           <include
               android:id="@+id/app_bar_main"
               layout="@layout/app_bar_main" />
   
   
       </RelativeLayout>
   
   
       <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"
           android:background="#141619"
           android:fitsSystemWindows="true"
           app:itemIconTint="#141619"
           app:itemTextColor="#FFFFFF">
   
       </com.google.android.material.navigation.NavigationView>
   </androidx.drawerlayout.widget.DrawerLayout>
   

2. 将 app_bar_main 更改为以下

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="#282941"
       android:fitsSystemWindows="true"
       android:focusable="true"
       android:focusableInTouchMode="true"
       android:minHeight="?attr/actionBarSize">
   
       <RelativeLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:gravity="center_vertical"
           android:paddingEnd="16dp">
   
           <Button
               android:id="@+id/menu_button"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentLeft="true"
               android:text="Menu" />
   
           <Button
               android:id="@+id/add_new_button"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:gravity="center"
               android:layout_centerInParent="true"
               android:text="Add New" />
   
           <Button
               android:id="@+id/home_button"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentRight="true"
               android:text="Home" />
       </RelativeLayout>
   </androidx.appcompat.widget.Toolbar>
   

就是这样，您不必创建任何其他布局。现在，无论您想要在何处拥有此工具栏，都可以将 app_bar_main.xml 包含在布局中，然后您将获得该工具栏。然后在您的活动中，如果您想访问工具栏和工具栏中的按钮，请执行以下操作：

Toolbar toolbar = findViewById(R.id.account_toolbar);
setSupportActionBar(toolbar);
Button btnEdit = toolbar.findViewById(R.id.menu_button);

如果您有任何疑问，请告诉我。我会尽力帮助你。

Answer 2

我不知道你想做的是否是一个好主意。 从设计的角度来看，工具栏中的空间有限，您应该只放置与上下文最相关的操作，所有其他操作都将隐藏在经典的“三点”菜单中。

您可以在这里查看我的意思https://developer.android.com/training/appbar/actions https://material.io/components/app-bars-top#anatomy

尽管如此，为了实现您想要做的事情，我将使用约束布局而不是相对布局来实现，这使您的生活更轻松并且是最新的；）https://developer.android.com/training/约束布局

Answer 3

首先，创建

title_menu.xml

布局。然后确保

android:layout_height="wrap_content"

和

android:gravity="center"

<?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="wrap_content"
    android:gravity="center">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Button"/>
</LinearLayout>

其次，在 Activity 的

onCreate

方法中添加以下代码。

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.title_menu);