android - 底部带有文本叠加的圆形 Avatar ImageView

Question

我正在尝试创建这个头像 ImageView

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

这是我的半圆代码:

<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

您应该扩展您的 CircleImageView 类并在您的类中添加用于绘制圆弧的代码(我的语言是 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>

结果将是: