如何在安卓中让一张图片适应圆形框架

26
我有一个包含ImageViewListViewImageView中的图片会在从服务器动态获取后加载。现在我想把这些任意大小的图片适应于圆形框架,如何实现呢?以下是示例图片: enter image description here

1
试一下这个。https://dev59.com/Rm025IYBdhLWcg3wpXse希望能对你有所帮助。 - user1914905
这个回答解决了你的问题吗?如何在圆形ImageView中设置位图? - tripleee
8个回答

24

在之前的答案的帮助下,我想出了这个解决方案。希望它能够帮助其他人:

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
 import android.graphics.Canvas;
 import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Bundle;
import android.widget.ImageView;



public class CircleImage extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.circle_layout);
    ImageView img1 = (ImageView) findViewById(R.id.imageView1);
    Bitmap bm = BitmapFactory.decodeResource(getResources(),
            R.drawable.hair_four);
    Bitmap resized = Bitmap.createScaledBitmap(bm, 100, 100, true);
    Bitmap conv_bm = getRoundedRectBitmap(resized, 100);
    img1.setImageBitmap(conv_bm);
    // TODO Auto-generated method stub
}

public static Bitmap getRoundedRectBitmap(Bitmap bitmap, int pixels) {
    Bitmap result = null;
    try {
        result = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(result);

        int color = 0xff424242;
        Paint paint = new Paint();
        Rect rect = new Rect(0, 0, 200, 200);

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawCircle(50, 50, 50, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

    } catch (NullPointerException e) {
    } catch (OutOfMemoryError o) {
    }
    return result;
}

 }

4
对于稍微更高效的实现,请参考Romain Guy最近发布的Android Recipe #1, image with rounded corners博客文章。其主要区别在于使用了 BitmapShader 直接控制可见的“纹理”区域,简化了绘图逻辑,只需一个绘画调用即可完成。 - MH.
嗨Sanghita,我遇到了相同的需求,恰好使用了你的代码,虽然它可以正常工作,但是在显示图像方面我有一个问题。我用我的代码替换了以下代码行以增加图像视图:canvas.drawCircle(90, 90,90, paint); 因为canvas.drawCircle(50, 50,50, paint); 只提供了一个小的显示视图。然而,只有图像的1/4被显示在imageview中。你能帮忙吗? - Raj
@joy-由于圆是通过编码创建的,match_parent/wrap_content将不可用,仅更改画布大小不会影响图像大小。 - Sanghita
祝你从该 OutOfMemoryError 中顺利恢复。 - async
图片从左上角定位。我该如何将图片居中?我希望它的scaleType为centerCrop。 - stanley santoso
显示剩余6条评论

9

尝试使用以下代码:

public static Bitmap getRoundedRectBitmap(Bitmap bitmap, int pixels) {
try {
result = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
Bitmap.Config.ARGB_8888);
canvas = new Canvas(result);

color = 0xff424242;
paint = new Paint();
rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
rectF = new RectF(rect);
roundPx = pixels;

paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
} catch (NullPointerException e) {
// return bitmap;
} catch (OutOfMemoryError o){}
return result;
}

如果您想要一个真正的圆形,则可以将100px作为参数传递。

非常感谢您的帮助,您提供的解决方案是针对圆角矩形图片而不需要大小修改的。只需要进行几行代码更改即可。 - Sanghita
@ricintech- 请问您能否解释一下如何更改使用此代码绘制的圆的大小!图像裁剪和其他所有内容都很完美,但是无法理解如何增加或减小圆的半径。 - Khay

8

更新

在Github上有一个CircleImageView可用。

您可以从Maven仓库获取最新版本并将其添加为gradle依赖项。



1
我们可以通过xml代码控制图片的高度和宽度,并且可以使用Java代码来绘制圆形/椭圆形,例如:
    <ImageView
            android:id="@+id/imageView1"
            android:layout_width="@dimen/width"
            android:layout_height="@dimen/height"
            />

对于椭圆视图。
ImageView img1 = (ImageView) findViewById(R.id.imageView1);
Bitmap bm = BitmapFactory.decodeResource(getResources(),
        R.drawable.user_image);
Bitmap conv_bm = getRoundedBitmap(bm);
img1.setImageBitmap(conv_bm);


public static Bitmap getRoundedBitmap(Bitmap bitmap)
{
    final Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
    final Canvas canvas = new Canvas(output);

    final int color = Color.RED;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawOval(rectF, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    bitmap.recycle();

    return output;
  }

 }

0
添加以下依赖项
 implementation 'jp.wasabeef:picasso-transformations:2.2.1'
 implementation 'de.hdodenhof:circleimageview:3.0.0'

CircularImageView 可用于将图像适应圆形,即使图像不合适。resize 用于在圆形图像视图中调整图像大小。

    CircleImageView img;
    String Imageid; 

    Imageid="ImageName"; //String is not compulsary it may be drawable  

    Picasso.with(mContext)
            .load(Imageid.get(position)) //Load the image
            .error(R.drawable.ic_launcher_background) //Image resource for error
            .resize(20, 20)  // Post processing - Resizing the image
            .into(img); // View where image is loaded.

0

circleCrop()会在使用Glide加载图片时提供帮助。

  Glide.with(context)
    .load(imageUrl)
    .circleCrop()
    .into(imageView)

-1
 public static Bitmap getCircleBitmap(Bitmap bitmap) {
        final Bitmap circuleBitmap = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getWidth(), Bitmap.Config.ARGB_8888);
        final Canvas canvas = new Canvas(circuleBitmap);

        final int color = Color.RED;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getWidth());
        final RectF rectF = new RectF(rect);

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawOval(rectF, paint);

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

        bitmap.recycle();

        return circuleBitmap;
    }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接