如何用ConstraintLayout将CircleImageView置于CardView上层并摆放TextInputLayout

你的布局出现CircleImageView被CardView覆盖的核心原因是：ConstraintLayout默认按照XML中组件的书写顺序决定Z轴层级，先写的组件会被后写的组件覆盖，你当前把CircleImageView写在CardView前面，所以会被后者盖住。

按照以下两步修改即可同时实现层叠效果和添加TextInputLayout的需求：

• 调换CardView和CircleImageView的书写顺序，把CardView放在CircleImageView前面，确保头像绘制在卡片上层
• 在CircleImageView下方新增TextInputLayout，设置对应约束控制位置

修改后的完整XML代码如下：

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

        <!-- 先定义CardView作为底层容器 -->
        <androidx.cardview.widget.CardView
            android:id="@+id/cardView2"
            android:layout_width="match_parent"
            android:layout_height="900dp"
            app:cardCornerRadius="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <!-- 后定义CircleImageView，自动绘制在CardView上层 -->
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/iv_avatar"
            android:layout_width="126dp"
            android:layout_height="126dp"
            android:src="@drawable/ic_profile_image_2"
            app:civ_border_color="?attr/colorOnPrimary"
            app:civ_border_width="8dp"
            app:layout_constraintEnd_toEndOf="@+id/cardView2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/cardView2"
            app:layout_constraintBottom_toTopOf="@id/cardView2"/>

        <!-- 新增TextInputLayout，约束在头像下方 -->
        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="24dp"
            android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@id/iv_avatar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入内容"/>

        </com.google.android.material.textfield.TextInputLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.core.widget.NestedScrollView>

预期效果：

当前实际效果：

你可以根据需求自行调整TextInputLayout的间距、样式，以及CircleImageView的悬浮偏移量。

内容的提问来源于stack exchange，提问作者PennOx