我想让任何图像从我的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'   
        

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

其他回答

下面是最简单的方法之一,使用以下代码:

依赖关系

dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.1.0'      // use this or use the latest compile version. In case u get bug.
}

XML代码

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="96dp"             //  here u can adjust the width 
    android:layout_height="96dp"            //  here u can adjust the height 
    android:src="@drawable/profile"         //  here u can change the image 
    app:civ_border_width="2dp"              //  here u can adjust the border of the circle.  
    app:civ_border_color="#FF000000"/>      //  here u can adjust the border color

截图:

来源:Circular ImageView GitHub Repository

我希望这对你有所帮助。

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'   
        

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

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

另外,这两个库可以帮助您。

https://github.com/vinc3m1/RoundedImageView

实现以下代码:

implementation 'com.makeramen:roundedimageview:2.3.0'

简单的用法:

<com.makeramen.roundedimageview.RoundedImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/imageView1"
        android:src="@drawable/photo1"
        android:scaleType="fitCenter"
        app:riv_corner_radius="30dip"
        app:riv_border_width="2dip"
        app:riv_border_color="#333333"
        app:riv_mutate_background="true"
        app:riv_tile_mode="repeat"
        app:riv_oval="true" />

https://github.com/chirag-kachhadiya/RoundedImageView

简单的用法:

实现以下代码:

implementation 'com.github.chirag-kachhadiya:RoundedImageView:1.0'



 <com.infinityandroid.roundedimageview.RoundedImageView
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:adjustViewBounds="true"
                android:src="@drawable/the_hundred"
                app:corner_radius="10" />

我用shape = "oval"代替下面的"ring"。这对我很有效。为了保持图像在边界内,我使用<padding>并在<ImageView>中设置<adjustViewBounds>为true。我尝试过大小在50 x 50 px到200x200 px之间的图像。