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

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

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


当前回答

您可以简单地使用CardView,而不需要任何外部库

  <androidx.cardview.widget.CardView
                    android:id="@+id/roundCardView"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerHorizontal="true"
                    android:elevation="0dp"
                    app:cardCornerRadius="20dp">

                    <ImageView
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:src="@drawable/profile" />
</androidx.cardview.widget.CardView>

其他回答

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

把这个答案贴出来供将来参考。你可以在com.google.android.material:material中使用ShapeableImageView。

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/img_launcher_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_margin="5dp"
    android:adjustViewBounds="true"
    android:background="@android:color/transparent"
    android:elevation="5dp"
    android:maxWidth="50dp"
    android:maxHeight="50dp"
    android:scaleType="fitXY"
    android:src="@mipmap/ic_launcher"
    app:shapeAppearance="?attr/actionButtonStyle"
    app:shapeAppearanceOverlay="@style/imageViewRounded"
    app:strokeColor="@android:color/white" />

在你的styles.xml中添加imageviewraded样式

<style name="imageViewRounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">51%</item>
</style>

如果没有添加,可以添加材料设计依赖项。

    implementation 'com.google.android.material:material:1.4.0'

设计是这样的

@Jyotman Singh,答案非常好(对于坚实的背景),所以我想通过分享可以根据你的需要重新着色的矢量绘图来增强它,而且这很方便,因为矢量整体形状是可伸缩的。

这是矩形-圆形状(@drawable/shape_round_profile_pic):

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="284"
    android:viewportHeight="284"
    android:width="284dp"
    android:height="284dp">
    <path
        android:pathData="M0 142L0 0l142 0 142 0 0 142 0 142 -142 0 -142 0zm165 137.34231c26.06742 -4.1212 52.67405 -17.543 72.66855 -36.65787 11.82805 -11.30768 20.55487 -22.85153 27.7633 -36.72531C290.23789 158.21592 285.62874 101.14121 253.48951 58.078079 217.58149 9.9651706 154.68849 -10.125717 98.348685 8.5190299 48.695824 24.95084 12.527764 67.047123 3.437787 118.98655 1.4806194 130.16966 1.511302 152.96723 3.4990422 164.5 12.168375 214.79902 47.646316 256.70775 96 273.76783c21.72002 7.66322 44.26673 9.48476 69 5.57448z"
        android:fillColor="#ffffff" /> // you can change frame color
</vector>

用法是一样的:

<FrameLayout
        android:layout_width="70dp"
        android:layout_height="70dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/YOUR_PICTURE" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/shape_round_profile_pic"/>

    </FrameLayout>

另一个想法是使用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来避免这一行代码。

只需使用这些代码行,你就完成了:

<de.hdodenhof.circleimageview.CircleImageView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:clickable="true"
            app:civ_border_width="3dp"
            app:civ_border_color="#FFFFFFFF"
            android:id="@+id/profile"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-130dp"
            android:elevation="5dp"
            android:padding="20dp"
            android:scaleType="centerCrop"
            android:src="@drawable/profilemain" />

别忘了导入:

import de.hdodenhof.circleimageview.CircleImageView;

在构建中添加此库。gradle:

compile 'de.hdodenhof:circleimageview:2.1.0'