圆形头像 ImageView，底部有文本停留

Question

我正在尝试创建这个头像图片视图

期望是我们选择的图像应该出现在半圆叠加层后面。

这是我的半圆代码：

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/dark_grey_alpha"/>
<size
    android:width="88dp"
    android:height="44dp"/>
 <corners
    android:bottomLeftRadius="80dp"
    android:bottomRightRadius="80dp"/>

我正在使用 CircularImageView 库和 glide。我这样加载图像：

@BindingAdapter("imageurl")
public static void avatarimage(ImageView imageView, String url) {
    Context context = imageView.getContext();
    Glide.with(context)
            .load(filePath)
            .apply(new 
         RequestOptions().placeholder(R.drawable.no_pic)
                    .error(R.drawable.no_pic))
            .into(imageView);
}

当我运行应用程序时，它是这样的：

当我试图将可绘制对象的高度降低到 24dp 时，它变成了这样：

最好的方法是什么？

出于隐私考虑，我无法分享完整布局。这是 imageview

的代码

               <FrameLayout
                android:id="@+id/image_container"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:paddingBottom="3dp">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/profile_pic"
                    android:layout_width="88dp"
                    android:layout_height="88dp"
                    android:layout_gravity="center"
                    android:adjustViewBounds="false
                    app:imageurl="@{viewModel.url}" />

                <TextView
                    android:layout_width="88dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:background="@drawable/semi_circle_grey"
                    android:text="Change"
                    android:textAlignment="center"
                    android:textColor="@color/white" />

            </FrameLayout>

Answer 1

这是你想要的吗？然后试试这个

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<FrameLayout
    android:id="@+id/image_container"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:paddingBottom="3dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_pic"
        android:layout_width="88dp"
        android:layout_height="88dp"
        android:layout_gravity="center"
        android:adjustViewBounds="false"
        android:src="@drawable/pop_img5" />

    <TextView
        android:layout_width="88dp"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:background="@drawable/bg"
        android:text="Change"
        android:textAlignment="center"
        android:textColor="@android:color/white" />

</FrameLayout>
</RelativeLayout>

Answer 2

您应该扩展您的 CircleImageView class 并在您的 class 中添加用于绘制圆弧的代码（我的语言是 kotlin，您可以根据需要将其转换为 java）

CustomCircleImageView : CircleImageView {

    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle)


    override fun onDrawForeground(canvas: Canvas?) {
        super.onDrawForeground(canvas)
        var paint = Paint()
        paint.color = context.resources.getColor(R.color.black_alpha)
        paint.style = Paint.Style.FILL
        var radius = width/2f

        val oval = RectF()
        oval.set(width/2 - radius,
                height/2 - radius,
                width/2 + radius,
                height/2 + radius)
        canvas?.drawArc(oval, 30f, 120f, false, paint)
    }


}

然后您可以编辑您的 xml 例如：

<FrameLayout
            android:id="@+id/image_container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:paddingBottom="3dp">

            <com.company.example.CustomCircleImageView
                android:id="@+id/profile_pic"
                android:layout_width="88dp"
                android:layout_height="88dp"
                android:layout_gravity="center"
               android:src="@drawable/default_avatar" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|bottom"
                android:textColor="@color/white"
                android:text="Change"
                android:layout_marginBottom="4dp"
                android:textSize="12sp"
                />


        </FrameLayout>

结果将是：

圆形头像 ImageView，底部有文本停留

Circular Avatar ImageView with Text Layover at the bottom

android

avatar

textview

android-imageview