如何在 Android xml 中对齐自定义工具栏上的 UI 控件

Question

我正在 Xamarin.Android 中创建一个布局，并且我正在使用带有图像按钮、TextView 和另一个标签的自定义工具栏。我需要做的是确保图像按钮 BackButton 一直左对齐到父容器的左侧，TextView 居中对齐，MenuButton 图像按钮一直右对齐到父容器的右侧。下面您将看到我在设计模式下的视图：

axml代码：

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ToolBar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"
    android:popupTheme="@android:style/ThemeOverlay.Material.Light">
    <ImageButton
        android:id="@+id/BackButton"
        android:layout_width="wrap_content"
        android:background="@drawable/RedButton"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:src="@drawable/back48x48"
        style="@style/back_button_text" />
    <TextView
        android:id="@+id/AppNameView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="12dp"
        android:textSize="25dp"
        android:text="Just a Label ok" />
    <ImageButton
        android:id="@+id/MenuButton"
        android:layout_width="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_centerVertical="true"
        android:background="@drawable/RedButton"
        android:layout_alignParentRight="true"
        android:gravity="right"
        android:layout_height="wrap_content"
        android:src="@drawable/menu48x48"
        style="@style/menu_button_text" />
</Toolbar>

只是想知道最好的方法。

这是在下面包含的另一个 axml 中调用的方式：

RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:gravity="center_vertical|center_horizontal">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:rowCount="3"
        android:columnCount="3">

Answer 1

在您的工具栏中放置一个 RelativeLayout 并执行以下操作：

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ToolBar"
    android:contentInsetStart="0dp"
    android:contentInsetLeft="0dp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"
    android:popupTheme="@android:style/ThemeOverlay.Material.Light">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    <ImageButton
        android:id="@+id/BackButton"
        android:layout_width="wrap_content"
        android:background="@drawable/RedButton"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:src="@drawable/back48x48"
        android:layout_alignParentLeft="true"
        style="@style/back_button_text" />
    <TextView
        android:id="@+id/AppNameView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="12dp"
        android:textSize="25dp"
        android:text="Just a Label ok" />
    <ImageButton
        android:id="@+id/MenuButton"
        android:layout_width="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_centerVertical="true"
        android:background="@drawable/RedButton"
        android:layout_alignParentRight="true"                      
        android:layout_height="wrap_content"
        android:src="@drawable/menu48x48"
        style="@style/menu_button_text" />
    </RelativeLayout>
</Toolbar>

后退按钮上的 alignParentLeft 属性和另一个按钮上的 alignParentRight 保证它们将粘在包含它们的 RelativeLayout 的左侧和右侧。之前它不起作用，因为工具栏不是 RelativeLayout。

要删除工具栏的默认边距，请按照以下问题的说明进行操作：Android API 21 Toolbar Padding

属性 contentInsetStart 和 contentInsetLeft 必须为零。

Answer 2

我知道这个问题已经得到解答，但你不能只使用 layout_gravity 而不是 relativelayout 吗？？

赞：

  android:layout_gravity="right"
  android:layout_gravity="center"
  android:layout_gravity="left"

我写这个，因为如果你想稍后在代码中向工具栏添加东西，它会把相对布局推到一边，包括它的所有内容……至少我是这么认为的！:)

如何在 Android xml 中对齐自定义工具栏上的 UI 控件

How to align UI controls on a Custom Toolbar in Android xml

android

toolbar

xamarin.android