如何将CircleImageView居中放置在CardView的边缘？

问题描述 #

想要让圆形头像居中卡在CardView的顶部边缘，但初始布局里头像顶部被CardView遮挡，仅能显示下半部分。

初始布局代码：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".view.testviews.ProfileFragment"
android:background="@color/colorDarkGrey">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="20dp"
        app:cardCornerRadius="16dp">
        <FrameLayout
            android:layout_gravity="center_horizontal"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="-50dp">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/user_image_placeholder"
                app:civ_border_color="#FF000000"
                app:civ_border_width="2dp">
            </de.hdodenhof.circleimageview.CircleImageView>

        </FrameLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>
</ScrollView>

可行解决方案 #

你尝试的CoordinatorLayout方案已经能实现需求，最终效果为圆形头像完整居中在CardView顶部边缘。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".view.testviews.ProfileFragment"
android:background="@color/colorDarkGrey">
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="150dp"
        android:layout_marginEnd="20dp"
        app:cardCornerRadius="16dp">
    </androidx.cardview.widget.CardView>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="90dp"
        android:src="@drawable/user_image_placeholder"
        app:civ_border_color="#FF000000"
        app:civ_border_width="2dp"
        >
    </de.hdodenhof.circleimageview.CircleImageView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
</ScrollView>

轻量化优化建议 #

如果不想引入CoordinatorLayout，也可以用原生LinearLayout实现，核心是利用负margin调整位置：

1. 将CardView的layout_marginTop设置为头像高度的一半（比如头像100dp就设为50dp）
2. 给CircleImageView设置layout_marginTop="-50dp"（负的头像高度一半），同时保留layout_gravity="center_horizontal"

这种方式无需额外依赖，同样能实现头像卡在CardView顶部边缘的效果。

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