android xml中垂直位于另一个布局中间的一个布局的底部？答案

【问题标题】：Bottom of one layout in the middle of another layout vertically in android xml?android xml中垂直位于另一个布局中间的一个布局的底部？
【发布时间】：2021-04-26 19:04:06
【问题描述】：

我想创建下面的布局，但不知道怎么做。

蓝色布局和白色布局的高度都设置为“wrap_content”，因此它们没有恒定的高度。

关键是，我希望蓝色布局的底部始终位于白色布局的中间（垂直）。我不知道如何使用约束或相对布局来做到这一点。

我搜索但找不到任何解决此问题的方法。

【问题讨论】：

如果你使用的是相对布局，而不是仅仅在下面和上边距到 -20dp 之类的
在这种情况下会有一个 20dp 的空间，它并不总是在中间。如果白色布局变大，它就不会在中间了
使用约束布局比和引导线
@Keivan.k 您可以通过编程方式添加负边距。边距可以计算为白色布局的 (getMeasuredHeight()/2)。
@Amitpandey 你能解释更多吗？

标签： android xml layout

【解决方案1】：

相应修改

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/credentials_card"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:padding="@dimen/spacing_mlarge"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image_logo">

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/spacing_medium"
            android:visibility="visible"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="6dp"
            app:cardElevation="5dp"
            app:cardUseCompatPadding="true"
            tools:ignore="MissingConstraints">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="@dimen/spacing_xmlarge">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginBottom="25dp"
                    android:fontFamily="@string/font_family_light"
                    android:text="L O G I N"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                    android:textColor="@color/colorPrimary"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="MOBILE"
                    android:textAlignment="center"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"
                    android:textColor="@color/colorPrimary" />

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/mobileNumberET"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="number"
                    android:maxLength="10"
                    android:maxLines="1"
                    android:singleLine="true"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                    android:textColor="@color/colorPrimary"
                    android:textStyle="bold" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:text="PASSWORD"
                    android:textAlignment="center"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"
                    android:textColor="@color/colorPrimary" />

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/passwordET"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:maxLength="50"
                    android:maxLines="1"
                    android:singleLine="true"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                    android:textColor="@color/colorPrimary"
                    android:textStyle="bold" />


            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/loginButton"
        android:layout_width="match_parent"
        android:layout_height="57dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:background="@drawable/button_round"
        android:text="L O G I N"
        android:fontFamily="@string/font_family_light"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/credentials_card"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

【解决方案2】：

你可以试试这个（我不包括边界半径，所以小心点..）

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:background="#8F2A2A"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_marginStart="50dp"
    android:layout_marginEnd="50dp"
    android:layout_marginTop="200dp"
    android:background="#B8C159"
    app:layout_constraintTop_toTopOf="@+id/constraintLayout" />

【讨论】：

【解决方案3】：

这里我的答案检查

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginLeft="@dimen/dp_16"
    android:layout_marginRight="@dimen/dp_16"
    app:cardBackgroundColor="@color/blue"
    app:cardCornerRadius="@dimen/dp_10"
    app:cardElevation="@dimen/dp_5"
    app:cardUseCompatPadding="true"
    android:id="@+id/card_container"
    app:layout_constraintBottom_toBottomOf="@id/guideline"
    app:layout_constraintTop_toTopOf="parent">

</androidx.cardview.widget.CardView>

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.42" />

<androidx.cardview.widget.CardView
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="@dimen/dp_10"
    app:cardElevation="@dimen/dp_5"
    app:cardUseCompatPadding="true"
    android:layout_marginStart="@dimen/dp_20"
    android:layout_marginEnd="@dimen/dp_20"
    app:layout_constraintStart_toStartOf="@id/card_container"
    app:layout_constraintEnd_toEndOf="@id/card_container"
    app:layout_constraintTop_toTopOf="@id/guideline"
    app:layout_constraintBottom_toTopOf="@id/guideline">


</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

【解决方案4】：

使用约束布局作为父级，然后将 topOfSmallComponent 约束到 bottomOfBigComponent。然后再次将bottomOfSmallComponent 约束到bottomOf BigComponent。

示例代码如下：

 app:layout_constraintTop_toBottomOf="your_blue_items_id"
   
    app:layout_constraintBottom_toBottomOf="your_blue_items_id"

【讨论】：