circleborder.xml

Question

我正在尝试创建带有橙色边框的圆形图像。

这是我的xml

<LinearLayout
    android:id="@+id/circle_photo"
    android:background="@drawable/circle_image_container"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintVertical_bias="0.45"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/edit_profile">
    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/person1"
        android:scaleType="centerCrop"/>
</LinearLayout>

circle_image_container.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@android:color/transparent"/>
            <corners android:radius="50dp"/>
            <stroke android:width="2dp" android:color="@color/colorPrimaryDark" />
        </shape>
    </item>
</selector>

但是，我的图像仅以正常的矩形状态显示在LinearLayout的上方-它没有嵌套在圆形容器中。我已将android:scaleType="centerCrop"添加到图像中，因此应该进行裁剪。

有什么主意吗？

Answer 1

在您的圆形可绘制对象中，您没有使用

    android:shape="ring"

请继续关注以下内容： ImageView in circular through xml

Answer 2

    <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circleborder"
    android:padding="3dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        tools:srcCompat="@tools:sample/avatars" />
    </RelativeLayout>

circleborder.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
    android:width="5dp"
    android:color="@color/orange"/>
    <size android:height="50dp"
    android:width="50dp"/>
    </shape>

之后，使用类似的滑动库在imageview中加载图像

    Glide.with(act).load(mylist.get(i).urlimg) 
    .fitCenter().apply(RequestOptions.circleCropTransform()).into(myholder.userimg);

在LinearLayout中裁剪嵌套的ImageView

2 个答案:

circleborder.xml