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库和滑行。我这样加载图像：

@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);
}

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

当我尝试将drawable的高度降低到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>

结果将是：

Answer 2

这是您想要的吗？然后尝试这个

<?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>

底部有文字叠加层的圆形头像ImageView

2 个答案: