工具栏中的 ConstraintLayout 未将 match_parent 应用于宽度或高度

Posted 2023-03-17

【中文标题】工具栏中的 ConstraintLayout 未将 match_parent 应用于宽度或高度

【英文标题】：ConstraintLayout in Toolbar not applying match_parent for width or height

【发布时间】：2019-11-04 11:11:51

【问题描述】：

我的应用顶部有一个Toolbar，其中包含一个ConstraintLayout，而后者又包含一个ImageView、一个TextView 和另一个TextView（标题）。我希望标题在Toolbar 内居中，所以我将标题的约束设置为两边相等（8 和 8）。但是在运行该应用程序并在 android Studio 中检查布局预览后，我意识到尽管ConstraintLayout 具有android:layout_width="match_parent" 和android:layout_height="match_parent" 属性，但它并没有占用适当的空间，从而导致标题的居中关闭（见图）。关于我缺少什么的任何想法？

<?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_
    android:layout_>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/home_toolbar"
        android:layout_
        android:layout_
        android:background="@drawable/home_toolbar_gradient"
        android:elevation="4dp"
        android:minHeight="70dp"
        android:theme="@style/AppTheme"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_
            android:layout_
            tools:layout_editor_absoluteX="16dp"
            tools:layout_editor_absoluteY="19dp">

            <ImageView
                android:id="@+id/weatherImg"
                android:layout_
                android:layout_
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:contentDescription="weather"
                android:src="@mipmap/weather_placeholder_icon"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="HardcodedText" />

            <TextView
                android:id="@+id/weatherTxt"
                android:layout_
                android:layout_
                android:layout_gravity="start"
                android:layout_marginStart="8dp"
                android:fontFamily="@font/montserrat_bold"
                android:gravity="start"
                android:text="@string/home_weather_text_placeholder"
                android:textAlignment="center"
                android:textColor="@android:color/white"
                android:textSize="15sp"
                app:layout_constraintBottom_toBottomOf="@+id/weatherImg"
                app:layout_constraintStart_toEndOf="@+id/weatherImg"
                app:layout_constraintTop_toTopOf="@+id/weatherImg" />

            <TextView
                android:id="@+id/title_home"
                android:layout_
                android:layout_
                android:layout_gravity="center"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                android:fontFamily="@font/montserrat_bold"
                android:gravity="center"
                android:text="@string/home"
                android:textAlignment="center"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                app:layout_constraintBottom_toBottomOf="@+id/weatherImg"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@+id/weatherImg" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.appcompat.widget.Toolbar>

    <!-- Using a view with a gradient to create a drop navbar_shadow effect for the navbar -->
    <View
        android:layout_
        android:layout_
        android:layout_above="@id/bottom_nav_bar"
        android:background="@drawable/navbar_shadow"
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@drawable/nav_selected_item_color"
        app:itemTextColor="@drawable/nav_selected_item_color"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_bar">


    </com.google.android.material.bottomnavigation.BottomNavigationView>

</androidx.constraintlayout.widget.ConstraintLayout> 

P.S：我不知道这是否重要，但我也有一个 menu 用于工具栏，其中包含属性为 showAsAction="always" 的项目

【参考方案1】：

试试这个：你的约束是正确的。 工具栏：

要删除左边的空格添加 -> app:contentInsetStart

要删除右空格添加 -> app:contentInsetEnd

<?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_
            android:layout_>

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/home_toolbar"
            android:layout_
            android:layout_
            android:background="@color/colorPrimary"
            android:elevation="4dp"
            android:minHeight="70dp"
            android:theme="@style/AppTheme"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:contentInsetStart="0dp"
            app:contentInsetEnd="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_
                android:layout_>

            <ImageView
                    android:id="@+id/weatherImg"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginBottom="8dp"
                    android:contentDescription="weather"
                    android:src="@drawable/ic_cloud_black"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:ignore="HardcodedText"/>

            <TextView
                    android:id="@+id/weatherTxt"
                    android:layout_
                    android:layout_
                    android:layout_gravity="start"
                    android:layout_marginStart="8dp"
                    android:gravity="start"
                    android:text="00"
                    android:textAlignment="center"
                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    app:layout_constraintBottom_toBottomOf="@+id/weatherImg"
                    app:layout_constraintStart_toEndOf="@+id/weatherImg"
                    app:layout_constraintTop_toTopOf="@+id/weatherImg"/>

            <TextView
                    android:id="@+id/title_home"
                    android:layout_
                    android:layout_
                    android:layout_gravity="center"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:gravity="center"
                    android:text="home"
                    android:textAlignment="center"
                    android:textColor="@android:color/white"
                    android:textSize="18sp"
                    app:layout_constraintBottom_toBottomOf="@+id/weatherImg"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/weatherImg"/>

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.appcompat.widget.Toolbar>
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

工具栏的顶部和底部都没有吗？

【参考方案2】：

我知道这个答案可能来得有点晚，但是对于 android:layout_height 属性，请将值设置为 ?actionBarSize。这将使您的约束布局占据工具栏的整个高度。