如何将应用栏布局的内容水平对齐

Question

我有一个带有协调器布局的 activity，我有一个应用栏布局并包含一个滚动内容

默认情况下，应用栏布局的所有项目都是垂直排列的，而且当我覆盖应用栏布局的菜单项时，它是不可见的，所以我在应用栏布局中使用了一个按钮

我尝试通过在 xml 中写入来将方向更改为水平，但滚动内容覆盖了应用栏布局

请帮助我更正此问题以及如何为此布局包含菜单项

XML

<?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".AddItem">


    <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            android:background="#252A4E">

        <TextView
                android:text="Item :"
                android:layout_marginLeft="4pt"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="25pt" android:id="@+id/tvItem"
                android:layout_gravity="center_vertical"
                android:textColor="#F8F6F6" android:textSize="15pt"
                app:fontFamily="@font/averia_libre" />
        <TextView
                android:text="1"
                android:layout_marginLeft="4pt"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="25pt" android:id="@+id/tvElevatorNo"
                android:layout_gravity="center_vertical"
                android:textColor="#F8F6F6" android:textSize="15pt"
                app:fontFamily="@font/averia_libre"/>
        <ImageButton
                android:layout_marginLeft="72pt"
                android:onClick="AddElevator"
                android:layout_gravity="end"
                android:layout_width="62dp"
                android:layout_height="match_parent" app:srcCompat="@drawable/baseline_done_white_18dp"
                android:id="@+id/ibComplete" tools:srcCompat="@drawable/baseline_done_white_18dp"
                android:tint="#F9FBE7" android:background="#252A4E"/>


    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_add_item" android:layout_height="674dp"/>

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

Answer 1

AppBarLayout 扩展了 LinearLayout。因此，如果您需要创建更复杂的布局，则必须将视图封装在另一个 ViewGroup 中，例如 RelativeLayout 甚至 ConstraintLayout 等

类似于：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <TextView
            android:id="@+id/tvItem"
            android:layout_width="wrap_content"
            android:layout_height="25pt"/>

        <TextView
            android:id="@+id/tvElevatorNo"
            android:layout_width="wrap_content"
            android:layout_height="25pt"
            android:layout_toEndOf="@id/tvItem"/>

        <ImageButton
            android:id="@+id/ibComplete"
            android:layout_width="62dp"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"/>

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

Answer 2

你可以像这样使用约束布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="@color/colorPrimary">


    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#252A4E"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme">


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


            <TextView
                android:id="@+id/tvItem"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_gravity="center_vertical"
                android:layout_margin="8dp"
                android:gravity="center"
                android:text="Item :"
                android:textColor="#F8F6F6"
                android:textSize="15pt"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tvElevatorNo"
                android:layout_width="wrap_content"
                android:layout_height="25pt"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="8dp"
                android:gravity="center"
                android:text="1"
                android:textColor="#F8F6F6"
                android:textSize="15pt"
                app:layout_constraintBottom_toBottomOf="@+id/tvItem"
                app:layout_constraintStart_toEndOf="@+id/tvItem"
                app:layout_constraintTop_toTopOf="@+id/tvItem" />

            <ImageButton
                android:id="@+id/ibComplete"
                android:layout_width="62dp"
                android:layout_height="62dp"
                android:layout_marginEnd="8dp"
                android:background="#252A4E"
                android:onClick="AddElevator"
                android:tint="#F9FBE7"
                app:layout_constraintBottom_toBottomOf="@+id/tvElevatorNo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/tvElevatorNo"
                tools:srcCompat="@drawable/ic_back" />
        </androidx.constraintlayout.widget.ConstraintLayout>

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


    <include layout="@layout/content_add_item"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>



</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样

Answer 3

如果您想要这样的布局：
Coordinator layout> app Bar layout>然后是需要随屏幕滚动的东西。
然后只需在应用栏布局内添加约束布局，并在该约束布局内添加顶视图并将它们与约束对齐。
要启用此约束布局内容的滚动，您必须添加此属性：

app:layout_scrollFlags="scroll|exitUntilCollapsed"

在约束布局中。一定会成功的。
谢谢，希望对你有用。

如何将应用栏布局的内容水平对齐

How do I align the contents of app bar layout to horizontal

android

layout

android-appbarlayout

XML