Android代码使imageView变成圆形无法运行

Question

我正在尝试将我的ImageView变成圆形。我已经写了以下代码来使其显示为圆形，但不知何故仍然显示为方形的ImageView。（使用Picasso获取图像）

Java 代码：

ImageView iv = (ImageView) addLinkDialog.findViewById(R.id.group_icon_jsoup);
Picasso.with(getBaseContext()).load(GroupImageUrl).into(iv);
iv.setBackgroundResource(R.drawable.icon_img);

ImageView代码：

<ImageView
    android:id="@+id/group_icon_jsoup"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:layout_gravity="center"
    android:layout_margin="8dp"
    android:background="@drawable/icon_img" />

@drawable/icon_img.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/circle"/>
</layer-list>

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

- Srujan Barai

---

https://dev59.com/w2Eh5IYBdhLWcg3wtFX4 - Ganesh Gudghe

@GaneshPatil 我从同一位置获取了代码。它不起作用。可能是因为我正在使用 Picasso 设置图像。 - Srujan Barai

尝试使用Picaso创建圆形图像，可以参考以下链接：https://dev59.com/Vl8e5IYBdhLWcg3wFnLm - Ganesh Gudghe

请参考以下链接：https://dev59.com/HGMm5IYBdhLWcg3wZ-MX?rq=1 或者另一种方法是 https://dev59.com/OGct5IYBdhLWcg3wpO_H#28096369 - Manohar

@Srujan Barai，你想不使用任何库来完成这个吗 ;) - Charuක

有足够的答案指向第三方库。想知道我在问题中发布的代码为什么不起作用。 - Srujan Barai

Answer 1

为什么不使用第三方？试用这段代码。

Bitmap picture = BitmapFactory.decodeResource(getResources(), R.mipmap.add_image);

ImageView imageView = (ImageView) findViewById(R.id.imgProfilePicture);
imageView.setImageBitmap(getRoundedBitmap(picture));

 public Bitmap getRoundedBitmap(Bitmap bitmap){
        Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        Paint paint = new Paint();
        paint.setShader(shader);
        paint.setAntiAlias(true);
        Canvas c = new Canvas(circleBitmap);
        c.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
        return circleBitmap;
    }

您的 XML 文件

  <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imgProfilePicture"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="20dp"
        app:civ_border_width="3dp"
        app:civ_border_color="@color/light_gray" />

并将此内容添加到 build.gradle 中

 compile 'de.hdodenhof:circleimageview:2.1.0'

圆形ImageView完成了！

- John Joe

---

我想知道为什么我的代码没能正常工作。使用一个库只是为了设置图片视图的圆角，对我来说似乎不太好。 - Srujan Barai

为什么不能使用第三方库？在法律标准方面，使用可用性显着取决于第三方库开发者提供的许可证。 - JoxTraex

Answer 2

您是只想使用代码还是可以接受使用库呢？如果可以使用库，我建议使用这个库，这个库帮助了我很多。如果您不想使用库，也可以使用RoundedBitmapDrawable：

RoundedBitmapDrawable drawable = 
       RoundedBitmapDrawableFactory.create(context.getResources(), bitmap)

drawable.setCircular(true);

在您的 ImageView 中使用此可绘制对象。

- Abhi

---

谢谢提供参考。但我宁愿不使用外部库来使imageView变圆。 - Srujan Barai

@SrujanBarai 好的，请给我几分钟，我会更新答案。 - Abhi

链接失效时，您的答案就没有意义了。 - Charuක

Answer 3

主要问题出现在使用 Picasso 将图像重新设置到 imageView 视图边界上，而不是您创建的背景上。如果您以编程方式设置一个图像，它将覆盖您的背景！

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</selector>

你可以将其设置为视图的背景。然后尝试使用view.setBackgroundResource(R.drawable.icon_img);。您会注意到变化！您可以查看在xml Android中添加背景图像和使用圆角背景遮罩ImageView，了解人们尝试的各种方法！但是，使用Picasso，您可以直接完成此操作，而无需其他第三方工具。

  final ImageView imageView = (ImageView) findViewById(R.id.group_icon_jsoup);
    Picasso.with(YourActivity.this).load("http://i.imgur.com/DvpvklR.png")
            .resize(100, 100)
            .into(imageView, new Callback() {
                @Override
                public void onSuccess() {
                    Bitmap imageBitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
                    RoundedBitmapDrawable imageDrawable = RoundedBitmapDrawableFactory.create(getResources(), imageBitmap);
                    imageDrawable.setCircular(true);
                    imageDrawable.setCornerRadius(Math.max(imageBitmap.getWidth(), imageBitmap.getHeight()) / 2.0f);
                    imageView.setImageDrawable(imageDrawable);
                }
                @Override
                public void onError() {
                    imageView.setImageResource(R.drawable.amanda);
                }
            });

- Charuක

---

虽然不完美，但是它给了我一个奇怪的非圆形边框，如果我在父布局中放置深色，则可见。但这似乎是Picasso库中像素计算的问题。我的ImageView在单个活动生命周期内不会接受新图像，所以目前对我来说这很有效。 - Srujan Barai

@Srujan Barai，你可以使用画图或遮罩图像来得到完美的解决方案，你的问题可能是因为我的示例中的调整大小值。 - Charuක

Answer 4

你好@Surjan，以下是创建任何形状的图像所需的代码，只需要选择一个带有透明背景和其他颜色组合的形状图片即可，以下是示例：

protected Bitmap getPinnedImage(Bitmap original, int shapeImage) {
        if (original == null) {
            original = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_round_shape);
        }
        Bitmap mask = BitmapFactory.decodeResource(context.getResources(), shapeImage);

        original = Bitmap.createScaledBitmap(original, mask.getWidth(), mask.getHeight(), true);

        Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas mCanvas = new Canvas(result);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mCanvas.drawBitmap(original, 0, 0, null);
        mCanvas.drawBitmap(mask, 0, 0, paint);
        paint.setXfermode(null);
        return result;
    }

这里有两个参数，第一个是原始位图，第二个是形状可绘制对象，像下面的图钉形状：

现在通过传递此可绘制对象，您可以获得以图钉形状显示的图像，无需访问任何第三方库。

- Dhaval Solanki

---

我还没尝试过这个，因为我已经找到了临时解决方案。这似乎是一个不错的解决方案，但我没有太多使用画布的经验。如果我在当前解决方案中遇到问题，我会使用它。 - Srujan Barai

如果你只需要简单的形状，那么就没有问题。但是如果你需要复杂的形状，那么你可以使用它。感谢您的支持。 - Dhaval Solanki

Answer 5

试试这个，

ImageView iv = (ImageView) addLinkDialog.findViewById(R.id.group_icon_jsoup);

Picasso.with(getBaseContext()).load(GroupImageUrl).transform(new RoundedTransformation(5,15, Color.parseColor("#27a3cb"))).fit().into(iv);



public class RoundedTransformation implements Transformation {


private int mBorderSize;
private int mCornerRadius = 0;
private int mColor;

public RoundedTransformation(int borderSize, int color) {
    this.mBorderSize = borderSize;
    this.mColor = color;
}

public RoundedTransformation(int borderSize, int cornerRadius, int color) {
    this.mBorderSize = borderSize;
    this.mCornerRadius = cornerRadius;
    this.mColor = color;
}

@Override
public Bitmap transform(Bitmap source) {
    int width = source.getWidth();
    int height = source.getHeight();

    Bitmap image = Bitmap.createBitmap(width, height, source.getConfig());
    Canvas canvas = new Canvas(image);
    canvas.drawARGB(0, 0, 0, 0);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Rect rect = new Rect(0, 0, width, height);


    if(this.mCornerRadius == 0) {
        canvas.drawRect(rect, paint);
    }
    else {
        canvas.drawRoundRect(new RectF(rect),this.mCornerRadius, this.mCornerRadius, paint);
    }

    paint.setXfermode(new PorterDuffXfermode((PorterDuff.Mode.SRC_IN)));
    canvas.drawBitmap(source, rect, rect, paint);

    Bitmap output;

    if(this.mBorderSize == 0) {
        output = image;
    }
    else {
        width = width + this.mBorderSize * 2;
        height = height + this.mBorderSize * 2;

        output = Bitmap.createBitmap(width, height, source.getConfig());
        canvas.setBitmap(output);
        canvas.drawARGB(0, 0, 0, 0);

        rect = new Rect(0, 0, width, height);

        paint.setXfermode(null);
        paint.setColor(this.mColor);
        paint.setStyle(Paint.Style.FILL);

        canvas.drawRoundRect(new RectF(rect), this.mCornerRadius, this.mCornerRadius, paint);

        canvas.drawBitmap(image, this.mBorderSize, this.mBorderSize, null);
    }

    if(source != output) source.recycle();

    return output;
}

@Override
public String key() {
    return "bitmapBorder(" +
            "borderSize=" + this.mBorderSize + ", " +
            "cornerRadius=" + this.mCornerRadius + ", " +
            "color=" + this.mColor +")";
}

}

- Komal12