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

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

其他回答

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

如果你在应用中使用材质设计,那么就使用这个

<com.google.android.material.card.MaterialCardView
            android:layout_width="75dp"
            android:layout_height="75dp"
            app:cardCornerRadius="50dp"
            app:strokeWidth="1dp"
            app:strokeColor="@color/black">
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:id="@+id/circular_image"
                android:scaleType="fitCenter"
                android:src="@drawable/your_img" />
        </com.google.android.material.card.MaterialCardView>

这是一个相对较老的问题,但您可以在可绘制文件夹中创建一个圆形边框(假设xml文件将称为circle_border)

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

    <solid android:color="@android:color/transparent" />

    <!-- If you want a padding -->
    <padding android:top="4dp" android:left="4dp" android:right="4dp" android:bottom="4dp" />

    <!-- If you want the circle border to have a color -->
    <strong android:width="1dp" android:color="#FFFFFF" />

</shape>

然后你可以使用它作为ImageView的背景

<ImageView
    android:background="@drawable/circle_border"
    <!-- other attributes here -->
/>

如果使用src属性,上述方法似乎不起作用。我所做的是把两个图像视图放在一个框架布局中,一个在另一个上面,就像这样:

<FrameLayout android:id="@+id/frame"
             android:layout_width="40dp"
             android:layout_height="40dp">

    <ImageView android:id="@+id/pic"
               android:layout_width="40dp"
               android:layout_height="40dp"
               android:src="@drawable/my_picture" />

    <ImageView android:id="@+id/circle_crop"
               android:layout_width="40dp"
               android:layout_height="40dp"
               android:src="@drawable/circle_crop" />

</FrameLayout>

简单地把一个circular_crop.png放在你的可绘制文件夹中,它是你的图像尺寸的形状(在我的例子中是一个正方形),白色背景,中间是一个透明的圆。如果你想要一个正方形imageview,你可以使用这个图像。

下载上面的图片。

另一个想法是使用ImageView的clipToOutline属性。

这是一个布局示例:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Simple view to draw borders for an image,
         borders will be rounded because of the oval-shaped background. -->
    <View
        android:id="@+id/v_border"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/shape_border"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Image itself: fits the border view, 
         a margin serves as a border width;
         the key point here - is a background shape which will clip the view to its forms. -->
    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@drawable/shape_oval"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@+id/v_border"
        app:layout_constraintEnd_toEndOf="@+id/v_border"
        app:layout_constraintStart_toStartOf="@+id/v_border"
        app:layout_constraintTop_toTopOf="@+id/v_border" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是我们的shape_border可绘制对象:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#FF00FF" />
</shape>

和shape_oval drawable:

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

你在代码中唯一要做的就是启用clipToOutline属性:

binding.ivImage.clipToOutline = true

当然,您甚至可以使用一些BindingAdapter来避免这一行代码。