如何将 ImageView 一半重叠放置在 Fragment 中 ConstraintLayout 的顶部边界上？

Question

我正在尝试制作一个登录屏幕，其中我的 LoginActivity 包含一个 LoginFragment，用于获取用户输入以显示图片、用户名和密码。现在，我想显示我的圆形 ImageView 居中并与 ConstraintLayout 的顶部边界有一半重叠，这是我的 Fragment 的根布局（如附图所示）。我怎样才能做到这一点？除了放置 ImageView 之外，一切都运行良好。我还附上了我的片段布局 xml 的代码。

我已经看到了How to half overlap images in android constraint layout 和how to half overlap imageview on another imageview in android，但是这些都没有达到预期的效果。

这里是 LoginFragment XML

<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="wrap_content"
    android:background="@drawable/custom_card"
    android:elevation="6dp"
    android:padding="24dp"
    android:layout_margin="24dp">

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintGuide_percent="0.5"/>

<ImageView
        android:id="@+id/imageview_profile" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintTop_toTopOf="@id/guideline"
        app:layout_constraintBottom_toBottomOf="@id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

<androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/edittext_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/tinBlue"
        app:backgroundTint="@color/colorPrimaryDark"
        android:hint="@string/hint_username"
        android:textColorHint="@color/colorPrimaryDark"
        android:textCursorDrawable="@null"
        app:layout_constraintTop_toBottomOf="@+id/imageview_profile"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:maxLength="20"/>

<androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/edittext_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/tinBlue"
        app:backgroundTint="@color/colorPrimaryDark"
        android:hint="@string/hint_password"
        android:textColorHint="@color/colorPrimaryDark"
        android:textCursorDrawable="@null"
        app:layout_constraintTop_toBottomOf="@id/edittext_username"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:inputType="textPassword"
        android:maxLength="20"/>

<TextView
        android:id="@+id/textview_forgot_password"
        android:text="@string/text_forgot_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_marginVertical="24dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/edittext_password"/>
<Button
        android:id="@+id/button_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:layout_marginVertical="24dp"
        android:background="@color/tinBlue"
        android:textColor="@color/white"
        android:text="@string/login_button_label"
        app:layout_constraintTop_toBottomOf="@id/textview_forgot_password"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

这里是 LoginActivity XML

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                               xmlns:app="http://schemas.android.com/apk/res-auto"
                                               android:layout_height="match_parent"
                                               android:layout_width="match_parent"
                                               android:background="@color/darkGray">
<TextView
        android:id="@+id/textview_tin_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_tin_account"
        android:textSize="24sp"
        android:textColor="@color/white"
        android:layout_gravity="center_horizontal"
        android:layout_marginVertical="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/login_ui_container"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        app:layout_constraintTop_toBottomOf="@id/textview_tin_account"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_new_user"
        android:textSize="12sp"
        android:textColor="@color/white"
        android:layout_gravity="center_horizontal"
        android:layout_marginVertical="4dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

这是所需的结果 ]1

Answer 1

您可以将ImageView 限制在Fragment 布局的上边缘中间，如您引用的问题所示（您不需要Guideline）：

<ImageView
    android:id="@+id/imageview_profile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circle"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

然后，通过在每个父布局（即所有父 ConstraintLayouts 布局）中设置 android:clipChildren="false" 和 android:clipToPadding=false 来允许子级在其边界之外绘图。