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

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

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


当前回答

试试这个。

public class RoundedImageView extends android.support.v7.widget.AppCompatImageView {

    private int borderWidth = 4;
    private int viewWidth;
    private int viewHeight;
    private Bitmap image;
    private Paint paint;
    private Paint paintBorder;
    private BitmapShader shader;

    public RoundedImageView(Context context)
    {
        super(context);
        setup();
    }

    public RoundedImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        setup();
    }

    public RoundedImageView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        setup();
    }

    private void setup()
    {
        paint = new Paint();
        paint.setAntiAlias(true);

        paintBorder = new Paint();
        setBorderColor(Color.WHITE);
        paintBorder.setAntiAlias(true);
        this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);

        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.WHITE);
    }

    public void setBorderWidth(int borderWidth)
    {
        this.borderWidth = borderWidth;
        this.invalidate();
    }

    public void setBorderColor(int borderColor)
    {
        if (paintBorder != null)
            paintBorder.setColor(borderColor);

        this.invalidate();
    }

    private void loadBitmap()
    {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

        if (bitmapDrawable != null)
            image = bitmapDrawable.getBitmap();
    }

    @SuppressLint("DrawAllocation")
    @Override
    public void onDraw(Canvas canvas)
    {
        loadBitmap();

        if (image != null)
        {
            shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);
            int circleCenter = viewWidth / 2;
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth - 4.0f, paintBorder);
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter - 4.0f, paint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec, widthMeasureSpec);

        viewWidth = width - (borderWidth * 2);
        viewHeight = height - (borderWidth * 2);

        setMeasuredDimension(width, height);
    }

    private int measureWidth(int measureSpec)
    {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY)
        {
            result = specSize;
        }
        else
        {
            // Measure the text
            result = viewWidth;
        }

        return result;
    }

    private int measureHeight(int measureSpecHeight, int measureSpecWidth)
    {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpecHeight);
        int specSize = MeasureSpec.getSize(measureSpecHeight);

        if (specMode == MeasureSpec.EXACTLY)
        {
            result = specSize;
        }
        else
        {
            result = viewHeight;
        }

        return (result + 2);
     }
 }

然后在布局中使用这个ImageView:

<com.app.Demo.RoundedImageView
     android:id="@+id/iv_profileImage"
     android:layout_width="70dp"
     android:layout_height="70dp"
     android:layout_centerHorizontal="true"
    />

其他回答

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>

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

最佳解决方案https://www.youtube.com/watch?v=0MHoNU7ytaw 卡视图的宽度和高度决定了它所包含图像的大小设置如下:

向Gradle添加依赖项(模块) 将xml代码添加到activity.xml或fragment.xml文件中

    implementation 'androidx.cardview:cardview:1.0.0'

   <androidx.cardview.widget.CardView
      android:layout_width="300dp"
      android:layout_height="270dp"
      android:layout_gravity="center"
      app:cardCornerRadius="150dp"
      app:cardBackgroundColor="@color/trans"
      >
    <ImageView
        android:id="@+id/resultImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/congrats"
        android:layout_gravity="center">

    </ImageView>


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

把这个答案贴出来供将来参考。你可以在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'

设计是这样的

您可以简单地使用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>