在约束布局内的线性布局中将元素置于其他元素之下

Posted

技术标签:

【中文标题】在约束布局内的线性布局中将元素置于其他元素之下【英文标题】:Place elements under others in Linear Layout inside Constraint Layout 【发布时间】:2020-06-29 08:01:52 【问题描述】:

我正在尝试将一组元素放在我的 LinearLayout 内的列中。问题是它不能识别像“layout_below”这样的指令(它说它是无效的):结果如下:

我期望的结果是第一行的第一个 TextView 和 Spinner,第二行的“Release” TextView 和 EditText,第三行的其他三个元素。这是代码:

<?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:id="@+id/linearLayout2"
    android:layout_
    android:layout_>

    <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:layout_marginStart="49dp"
        android:layout_marginLeft="49dp"
        android:layout_marginEnd="49dp"
        android:layout_marginRight="49dp"
        android:text="Search"
        android:textColor="#ffffff"
        android:textSize="@dimen/_20ssp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <EditText
        android:id="@+id/search_field"
        android:layout_
        android:layout_
        android:layout_marginStart="1dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/search_layout"
        android:ems="10"
        android:fontFamily="@font/nunito_bold"
        android:hint="Search here"
        android:inputType="textPersonName"
        android:paddingLeft="20dp"
        android:paddingTop="10dp"
        android:paddingRight="20dp"
        android:paddingBottom="10dp"
        android:textColor="@color/colorPrimary"
        android:textColorHint="@color/colorPrimary"
        android:textSize="16sp"
        app:layout_constraintEnd_toStartOf="@id/search_btn"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <ImageButton
        android:id="@+id/search_btn"
        android:layout_
        android:layout_
        android:layout_marginTop="8dp"
        android:background="@color/cardview_shadow_end_color"
        android:paddingTop="17dp"
        app:layout_constraintBottom_toTopOf="@id/checkbox_adv"
        app:layout_constraintEnd_toEndOf="@id/textView2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@+id/search_field"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:srcCompat="@mipmap/search_button" />


    <CheckBox
        android:id="@+id/checkbox_adv"
        android:layout_
        android:layout_
        android:text="Advanced search"
        android:layout_marginEnd="@dimen/_30sdp"
        android:textColor="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="@id/hiddenTab"
        app:layout_constraintEnd_toEndOf="@+id/search_btn"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@+id/search_field"
        app:layout_constraintTop_toBottomOf="@+id/search_field" />

    <LinearLayout
        android:id="@+id/hiddenTab"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        android:visibility="gone"
        android:layout_marginTop="@dimen/_7sdp"
        app:layout_constraintBottom_toTopOf="@id/popular_rc_view"
        app:layout_constraintEnd_toEndOf="@id/search_btn"
        app:layout_constraintStart_toStartOf="@id/search_field"
        app:layout_constraintTop_toBottomOf="@+id/checkbox_adv"
        tools:visibility="visible">

        <!-- LINE 1 -->

        <TextView
            android:id="@+id/textGenre"
            android:layout_
            android:layout_
            android:gravity="center"
            android:text="Genre:"
            android:textColor="@color/colorPrimary"
            android:textAlignment="gravity" />

        <Spinner
            android:id="@+id/spinnerGenre"
            android:layout_
            android:layout_
            android:layout_below="@+id/spinner"
            android:layout_margin="10dp"
            android:textColor="@color/colorPrimary"
            android:entries="@array/genre_list" />

        <!-- END OF LINE 1 -->

        <!-- LINE 2 -->

        <TextView
            android:id="@+id/textYear"
            android:layout_
            android:layout_
            android:gravity="center"
            android:text="Release:"
            android:layout_below="@+id/genresTextView"
            android:textColor="@color/colorPrimary"
            android:textAlignment="gravity" />

        <EditText
            android:id="@+id/releaseYear"
            android:layout_
            android:layout_
            android:layout_below="@+id/spinner"
            android:layout_margin="10dp"
            android:textColor="@color/colorPrimary" />

        <!-- END OF LINE 2 -->

        <!-- LINE 3 -->

        <TextView
            android:id="@+id/textVote"
            android:layout_
            android:layout_
            android:gravity="center"
            android:text="Rating:"
            android:layout_below="@+id/genresTextView"
            android:textColor="@color/colorPrimary"
            android:textAlignment="gravity" />

        <Spinner
            android:id="@+id/spinnerOperator"
            android:layout_
            android:layout_
            android:layout_below="@+id/spinner"
            android:layout_margin="10dp"
            android:textColor="@color/colorPrimary"
            android:entries="@array/operator_list" />

        <Spinner
            android:id="@+id/spinnerVote"
            android:layout_
            android:layout_
            android:layout_below="@+id/spinner"
            android:layout_margin="10dp"
            android:textColor="@color/colorPrimary"
            android:entries="@array/vote_list" />

        <!-- END OF LINE 3 -->

    </LinearLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/popular_rc_view"
        android:layout_
        android:layout_
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/hiddenTab" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_
        android:layout_
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:scaleType="center"
        android:src="@drawable/recent_icon"
        android:text="Most Recent"
        android:visibility="invisible"
        app:backgroundTint="@color/design_default_color_on_primary"
        app:elevation="6dp"
        app:layout_constraintBottom_toTopOf="@+id/fab2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        app:maxImageSize="35dp"
        app:pressedTranslationZ="12dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_
        android:layout_
        android:layout_marginTop="18dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:scaleType="center"
        android:src="@drawable/rated_icon"
        android:text="Most Rated"
        android:visibility="invisible"
        app:backgroundTint="@color/design_default_color_background"
        app:elevation="6dp"
        app:layout_constraintBottom_toTopOf="@+id/fab1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        app:maxImageSize="35dp"
        app:pressedTranslationZ="12dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_
        android:layout_
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:scaleType="center"
        android:src="@drawable/pop_icon"
        android:text="Most Popular"
        android:visibility="invisible"
        app:backgroundTint="@color/design_default_color_background"
        app:elevation="6dp"
        app:layout_constraintBottom_toTopOf="@+id/fab"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        app:maxImageSize="35dp"
        app:pressedTranslationZ="12dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_
        android:layout_
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="20dp"
        android:scaleType="centerInside"
        android:src="@drawable/filter"
        app:backgroundTint="@color/colorPrimary"
        app:elevation="6dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        app:maxImageSize="35dp"
        app:pressedTranslationZ="12dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

【问题讨论】:

【参考方案1】:

无法识别属性android:layout_below,因为它是RelativeLayout 的属性,LinearLayout 没有那种属性。

为了获得您想要的行为,LinearLayout 不适合您,因为它只允许水平或垂直堆叠子视图,而不是混合水平排列和垂直排列。

您应该使用ConstraintLayout(更好)或RelativeLayout(更差)来获得该行为。

此外,由于您的父级已经是 ConstraintLayout,因此您不需要嵌套的 ViewGroup hiddenTab 来安排该位置的视图。如果只是添加hiddenTab 来控制其可见性,请记住您可以使用ContraintLayoutGroup 来控制它。

【讨论】:

以上是关于在约束布局内的线性布局中将元素置于其他元素之下的主要内容,如果未能解决你的问题,请参考以下文章

为约束布局内的布局设置最小百分比高度

无法在 Xcode 中为启动屏幕设置自动布局约束

自动布局约束:无法同时满足约束

UIView 元素布局约束

滚动视图内的约束布局,总是参考线高度变化

约束布局中不同大小元素的Android xml样式