我想让任何图像从我的ImageView是圆形的边界。

我搜索了一下,但没有找到任何有用的信息(我尝试的任何方法都不管用)。

如何通过XML实现这一点: 创建一个ImageView与某些src,并使它与边界圆形?


当前回答

我希望这对你有所帮助。

1) 可塑性图像视图

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:padding="5dp"
        app:strokeWidth="10dp"
        app:strokeColor="@android:color/darker_gray"
        app:shapeAppearanceOverlay="@style/circleImageView"
        android:src="@drawable/profile"
        android:layout_margin="10dp"/>


 Style add here: res/values/styles.xml 
<style name="circleImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

完整的描述请查看这里:来源在这里。

2) 圆图像视图

 <de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

别忘了实现:Gradle Scripts > build。gradle (Module: app) >依赖项

     implementation 'de.hdodenhof:circleimageview:3.1.0'   
        

完整的描述请查看这里:来源在这里。

3) 循环图像视图

<com.mikhaellopez.circularimageview.CircularImageView
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:src="@drawable/image"
    app:civ_border_color="#3f51b5"
    app:civ_border_width="4dp"
    app:civ_shadow="true"
    app:civ_shadow_radius="10"
    app:civ_shadow_color="#3f51b5"/>

别忘了实现:Gradle Scripts > build。gradle (Module: app) >依赖项

     implementation 'com.mikhaellopez:circularimageview:4.3.1'   
        

完整的描述请查看这里:来源在这里。

其他回答

你可以简单地使用AndroidX ImageFilterView。

 <androidx.constraintlayout.utils.widget.ImageFilterView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="@dimen/margin_medium"
        android:layout_marginBottom="@dimen/margin_medium"
        android:background="@color/white"
        android:padding="@dimen/margin_small"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:roundPercent="1"
        app:srcCompat="@drawable/ic_gallery" />

if you want to set edit icon on to circle imageview than put this below code.

 <FrameLayout
                android:layout_width="@dimen/_100sdp"
                android:layout_height="@dimen/_100sdp"
                android:layout_gravity="center"
                android:layout_marginTop="10dp">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/profilePic"
                    android:layout_width="@dimen/_100sdp"
                    android:layout_height="@dimen/_100sdp"
                    android:layout_gravity="bottom|center_horizontal"
                    android:src="@drawable/ic_upload" />

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/iv_camera"
                    android:layout_width="@dimen/_30sdp"
                    android:layout_height="@dimen/_30sdp"
                    android:layout_gravity="top|right"
                    android:src="@drawable/edit"/>
            </FrameLayout>

你可以做一个简单的圆,有白色边框,透明内容的形状。

// res/drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

然后制作一个可绘制的图层列表,并将其作为imageview的背景。

// res/drawable/img.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/circle"/>    
    <item android:drawable="@drawable/ic_launcher"/>

</layer-list>

把它作为imageview的背景。

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/img"/>

你会得到类似的东西。

使用材质组件库只需使用ShapeableImageView。 Somethig:

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/roundedImageViewRounded"
    app:strokeColor="@color/....."
    app:strokeWidth="1dp"
    ...
    />

:

  <style name="roundedImageViewRounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

注意:它至少需要1.2.0版本。


使用jetpack合成,你可以使用CircleShape应用剪辑修饰器:

Image(
    painter = painterResource(R.drawable.xxxx),
    contentDescription = "xxxx",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(100.dp)
        .clip(CircleShape)
        .border(2.dp, Color.Blue, CircleShape)
)

2021年更新:使用Glide v4 CircleCrop参见https://bumptech.github.io/glide/doc/generatedapi.html

    implementation 'com.github.bumptech.glide:glide:4.11.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

XML

<ImageView
    android:id="@+id/vinyl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="ContentDescription" />

在代码中

    Glide.with(this)
            .load("https://images.pexels.com/photos/3828241/pexels-photo-3828241.jpeg")
            .transform(CircleCrop())
            .into(rootView.findViewById<ImageView>(R.id.vinyl))