Question

我尝试在Android Kotlin的个人资料图片上使用个人资料编辑图标。我正在使用卡片视图以圆形视图显示图像。但是，当我在该圆形的角落使用编辑图标时，它将显示图像上图标的一部分，但隐藏了图像之外的部分。请帮助设置图像。

这是我的代码

         <androidx.cardview.widget.CardView
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                app:cardCornerRadius="60dp">

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/Profile_image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:scaleType="centerCrop"
                    android:src="@drawable/profile_img" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/Edit_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginTop="40dp"
                    android:layout_marginStart="100dp"
                    android:contentDescription="@string/edit_photo"
                    app:srcCompat="@drawable/edit" />
            </androidx.cardview.widget.CardView>

Answer 1

用FrameLayout包装代码，并相应地调整边距以获得预期结果。

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center_horizontal"
        app:cardBackgroundColor="@color/colorPrimary"
        android:layout_marginTop="30dp"
        app:cardCornerRadius="60dp">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/Profile_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/profile"
            android:scaleType="centerCrop"/>

    </androidx.cardview.widget.CardView>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/Edit_image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:elevation="12dp"
        android:layout_gravity="end|bottom"
        app:srcCompat="@drawable/edit" />

</FrameLayout>

Answer 2

基于@shb答案，这是我使用的！

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

        <FrameLayout
            android:id="@+id/frameProfileImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profileImage"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_gravity="bottom|center_horizontal"
                android:elevation="10dp"
                android:src="@drawable/profile_bg"
                app:civ_border_color="@color/white"
                app:civ_border_width="10dp"
                tools:targetApi="lollipop" />
        </FrameLayout>



        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/frameProfileImage"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="@+id/frameProfileImage"
            app:layout_constraintTop_toTopOf="@+id/frameProfileImage"
            app:layout_constraintVertical_bias="0.98" >

            <ImageView
                android:id="@+id/editProfile"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:contentDescription="@string/edit_profile"
                android:src="@drawable/edit_icon"/>
        </FrameLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

快乐的编码...

在个人资料图片上设置个人资料编辑图标

2 个答案: