Question

我在网站上搜索过更多内容并获得了许多建议，如下所示

使用自定义样式更改背景以设置边角半径和填充（将图像设置为矩形，将背景设置为圆角）
通过传递此位图和宽度（它需要更多时间加载）来解码图像和裁剪功能，从而将给定图像更改为位图

我查看了WhatsApp Chat history list and it has rounded corner images but its loaded with minimum time。

您能否建议我使用圆形图像创建列表视图模板的最佳方法，如WhatsApp？

我希望通过在xml 页面中设置样式详细信息来更改带圆角的图像。（图像宽度和高度是60 dp，我的列表视图也有大约60项）

参考文献：

RES / mylayout.xml：

<ImageView
        android:id="@+id/contactssnap"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/contactssnap"
        android:background="@drawable/roundimage" />

RES /抽拉/ roundimage.xml：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#90a4ae" />
    <size
        android:height="50dp"
        android:width="50dp" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
    <corners android:radius="100dp" />
</shape>

注意：支持的Android版本从14到22

Answer 1

sats的回答是有效的。但是RoundedBitmapDrawable无法应用于scaleType：centerCrop的ImageView。

更新。

如果您在21级使用Android API。我们在这里有一个简单的解决方案。

1，创建drawable作为imageview的背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="@android:color/white" />

<stroke
    android:width="1dp"
    android:color="@color/colorWhite" />
</shape>

接下来，将ImageView的属性setClipToOutline更改为true。并将roundled drawable设置为ImageView的背景。

那就是它。

在我的演示中，我使用此方法进行圆形imageview。可在此处找到cuberto's dialog

Answer 2

材料组件库提供了新的 ShapeableImageView 。
只需使用如下布局：

  <com.google.android.material.imageview.ShapeableImageView
      ...
      app:shapeAppearanceOverlay="@style/roundedCorners"
      app:srcCompat="@drawable/...." />

使用 shapeAppearanceOverlay 属性，您可以应用自定义形状，在这种情况下为圆角：

  <style name="roundedCornersImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">xxdp</item>
  </style>

*注意：：它至少需要版本 1.2.0-alpha03 。

Answer 3

将imageView放入CardView并为CardView设置CornerRadius

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:cardCornerRadius="8dp"
        app:cardElevation="0dp">

        <ImageView
            android:id="@+id/imgTourismHr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY" />

    </android.support.v7.widget.CardView>

Answer 4

您可以使用Google提供的标准API来创建循环ImageView。

ImageView imageView = (ImageView) findViewById(R.id.circleImageView);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
roundedBitmapDrawable.setCircular(true);
imageView.setImageDrawable(roundedBitmapDrawable);

另请参阅https://www.youtube.com/watch?v=zVC-YAnDlgk

Answer 5

See the rounded rectangle image Output with Rounded Corner border

现在要设置带有圆角边框的圆角矩形图像。

您可以使用 app：cardCornerRadius =“ 30dp” ， app：cardUseCompatPadding =“ true” 在CardView中简单地声明CardView ， app：cardElevation =“ 0dp” 。

请参阅下面的Xml代码

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                app:cardCornerRadius="30dp"
                app:cardUseCompatPadding="true"
                app:cardElevation="0dp"
                android:layout_margin="5dp"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@drawable/temp"
                    android:scaleType="fitXY"
                    android:layout_gravity="center"
                    />
            </androidx.cardview.widget.CardView>
        </androidx.cardview.widget.CardView>

Answer 6

您在Android中检查了 9补丁技术吗？

如果您正在尝试创建类似于具有圆角的应用程序泡泡聊天，我建议您使用此技术而不是使用XML位图解码器。

这是一个例子：Link

根据此示例，您可以使用9个补丁生成器创建自己的自定义形状和位图图像，这些图像会自动调整大小以适应视图内容和屏幕大小。图像的选定部分基于图像中绘制的指示符水平或垂直缩放。

Answer 7

使用Glide加载网络图像的任何人的快速解决方案，即使用RequestOptions.circleCropTransform（）：

Glide.with(context)
     .load(imageUrl)
     .apply(RequestOptions.circleCropTransform())
     .into(object : CustomViewTarget<ImageView, Drawable>(imageView) {
            override fun onLoadFailed(errorDrawable: Drawable?) {
            }
            override fun onResourceCleared(placeholder: Drawable?) {
            }
            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                imageView.setImageDrawable(resource)
            }
        })

Answer 8

kotlin解决方案：

class RoundedCornerImageView(context: Context?, attrs: AttributeSet?) : 
androidx.appcompat.widget.AppCompatImageView(context, attrs) {

private val path: Path? = Path()
private var cornerRadius: Int = 0
private var roundedCorner: Int = 0

init {
    val a: TypedArray = context!!.obtainStyledAttributes(attrs, R.styleable.RoundedCornerImageView)
    cornerRadius = a.getDimensionPixelSize(R.styleable.RoundedCornerImageView_radius, 0)
    roundedCorner = a.getInt(R.styleable.RoundedCornerImageView_corner, 0)
    a.recycle()
}

override fun onDraw(canvas: Canvas?) {
    if (!path!!.isEmpty){
        canvas!!.clipPath(path)
    }
    super.onDraw(canvas)
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    setPath()
}

private fun setPath() {
    path!!.rewind()

    val radii = FloatArray(8)

    Log.d(TAG, "setPath : $roundedCorner")

    when(roundedCorner){
        0 ->{
            // all side
            for(i in 0 until 8)
                radii[i] = cornerRadius.toFloat()
        }

        1 ->{
            //top left
            radii[0] = cornerRadius.toFloat()
            radii[1] = cornerRadius.toFloat()
        }

        2 ->{
            //top right
            radii[2] = cornerRadius.toFloat()
            radii[3] = cornerRadius.toFloat()
        }

        3 ->{
            //bottom right
            radii[4] = cornerRadius.toFloat()
            radii[5] = cornerRadius.toFloat()

        }

        4 ->{
            //bottom left
            radii[6] = cornerRadius.toFloat()
            radii[7] = cornerRadius.toFloat()

        }

        5 ->{
            //left
            radii[0] = cornerRadius.toFloat()
            radii[1] = cornerRadius.toFloat()
            radii[6] = cornerRadius.toFloat()
            radii[7] = cornerRadius.toFloat()

        }

        6 ->{
            //right
            radii[2] = cornerRadius.toFloat()
            radii[3] = cornerRadius.toFloat()
            radii[4] = cornerRadius.toFloat()
            radii[5] = cornerRadius.toFloat()

        }

        7 ->{
            //top
            radii[0] = cornerRadius.toFloat()
            radii[1] = cornerRadius.toFloat()
            radii[2] = cornerRadius.toFloat()
            radii[3] = cornerRadius.toFloat()

        }

        8 ->{
            //bottom
            radii[4] = cornerRadius.toFloat()
            radii[5] = cornerRadius.toFloat()
            radii[6] = cornerRadius.toFloat()
            radii[7] = cornerRadius.toFloat()

        }
    }  
    path.addRoundRect(RectF(0F,0F,width.toFloat(),
                      height.toFloat()),
                      radii,Path.Direction.CW)
}

}

不要忘记将其添加到您的attr.xml文件中

<declare-styleable name="RoundedCornerImageView">
    <attr name="radius" format="dimension"/>
    <attr name="corner">
       <flag name="topLeft" value="1"/>
       <flag name="topRight" value="2"/>
       <flag name="bottomRight" value="3"/>
       <flag name="bottomLeft" value="4"/>
       <flag name="left" value="5"/>
       <flag name="right" value="6"/>
       <flag name="top" value="7"/>
       <flag name="bottom" value="8"/>
    </attr>
</declare-styleable>

Answer 9

根据需要更改 cardCornerRadius

<androidx.cardview.widget.CardView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_gravity="center"
    app:cardCornerRadius="20dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/sample"
            android:scaleType="centerCrop"/>

    </LinearLayout>
</androidx.cardview.widget.CardView>

Answer 10

只需将android:padding="5pt"添加到您的xml布局中，例如

 <ImageView
            android:id="@+id/ivGadgetImage"
            android:layout_width="50pt"
            android:layout_height="50pt"
            android:padding="5pt"
            tools:srcCompat="@tools:sample/avatars" />

在ImageView中设置圆角图像

10 个答案: