Android 实现圆形的 ImageView 的3种方法

方法1: 裁剪Bitmap,设置ImageView src

主要是取缩放/裁剪Bitmap,然后设置给ImageView src或者background
实际使用中发现系统app 的ICON 比较特殊,比如时钟/日历是动态的,把通过PackageManager 拿到的Drawable 转成BitmapDrawable 后显示出来的图片和在桌面看到的不一样的.具体为什么Drawable 转成BitmapDrawable后有这个异常现象暂时没有去研究.后面找时间去研究.

public static Bitmap cropBitmap(Bitmap bitmap) {//从中间截取一个正方形
	int w = bitmap.getWidth(); // 得到图片的宽,高
	int h = bitmap.getHeight();
	int cropWidth = w >= h ? h : w;// 裁切后所取的正方形区域边长

	return Bitmap.createBitmap(bitmap, (bitmap.getWidth() - cropWidth) / 2,
		(bitmap.getHeight() - cropWidth) / 2, cropWidth, cropWidth);
}

public static Bitmap getCircleBitmap(Bitmap bitmap) {//把图片裁剪成圆形
	if (bitmap == null) {
		return null;
	}
	bitmap = cropBitmap(bitmap);//裁剪成正方形
	try {
		Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(),
				bitmap.getHeight(), Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(circleBitmap);
		final Paint paint = new Paint();
		final Rect rect = new Rect(0, 0, bitmap.getWidth(),
				bitmap.getHeight());
		final RectF rectF = new RectF(new Rect(0, 0, bitmap.getWidth(),
				bitmap.getHeight()));
		float roundPx = 0.0f;
		roundPx = bitmap.getWidth();
		paint.setAntiAlias(true);
		canvas.drawARGB(0, 0, 0, 0);
		paint.setColor(Color.WHITE);
		canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
		final Rect src = new Rect(0, 0, bitmap.getWidth(),
				bitmap.getHeight());
		canvas.drawBitmap(bitmap, src, rect, paint);
		return circleBitmap;
	} catch (Exception e) {
		return bitmap;
	}
}

方法2:自定义ImageView,利用Canvas 的clipPath() 

实际效果出来后发现有锯齿,考虑通过Paint的PorterDuff.Mode替代Path实现所需要的效果.
实际测试的时候为了简单,直接在xml 里面固定了view 宽和高度是200dp.

public class ClipPathCircleImage extends ImageView {
	private int width;
	private int height;
	private Path path;
	public ClipPathCircleImage(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
		super(context, attrs, defStyleAttr, defStyleRes);
		path = new Path();
	}
	@Override
	protected void onDraw(Canvas canvas) {
		canvas.save();
		path.reset();
		path.addCircle(width/2, height/2, width/2, Path.Direction.CCW);//CCW:逆时针,这里是一个简单的园,无影响
		canvas.clipPath(path);
		super.onDraw(canvas);
		canvas.restore();
		//使用Path时,如果不与Paint进行共同操作,无法解决抗锯齿问题。
		//这时候只能使用Paint的PorterDuff.Mode替代Path实现所需要的效果
	}
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		width = w;
		height = h;
	}
	public ClipPathCircleImage(Context context, AttributeSet attrs, int defStyleAttr) {
		this(context, attrs, defStyleAttr, 0);
	}
	public ClipPathCircleImage(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}
	public ClipPathCircleImage(Context context) {
		this(context, null);
	}
}

方法3:自定义ImageView,利用Paint的PorterDuff.Mode替代Path实现所需要的效果

public class CircleImage extends ImageView {
	private int width;
	private int height;
	private Path path;
	private Path srcPath;
	private Paint paint;
	private RectF srcRectF;
	private Xfermode xfermode;
	public CircleImage(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
		super(context, attrs, defStyleAttr, defStyleRes);
		path = new Path();
		srcPath = new Path();
		paint= new Paint();
		xfermode = new PorterDuffXfermode(Mode.DST_OUT);
	}
	@Override
	protected void onDraw(Canvas canvas) {
		canvas.saveLayer(srcRectF, null, Canvas.ALL_SAVE_FLAG);
		super.onDraw(canvas);// ImageView自身的绘制流程,即绘制图片

		path.reset();
		paint.reset();
		path.addCircle(width/2, height/2, width/2, Path.Direction.CW);CW:顺时针,这里是一个简单的园,无影响
		paint.setStyle(Style.FILL);//Paint 默认就是fill style,不设置也可以
		paint.setAntiAlias(true);//抗锯齿
		paint.setXfermode(xfermode);//设置混合模式 DST_OUT 
		srcPath.addRect(srcRectF, Direction.CCW);
		srcPath.op(path, Path.Op.DIFFERENCE);
		canvas.drawPath(srcPath, paint);
		paint.setXfermode(null);
		canvas.restore();
	}
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		width = w;
		height = h;
		srcRectF =  new RectF(0, 0, w, h);
	}
	public CircleImage(Context context, AttributeSet attrs, int defStyleAttr) {
		this(context, attrs, defStyleAttr, 0);
	}
	public CircleImage(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}
	public CircleImage(Context context) {
		this(context, null);
	}

具体效果如下:
第一个是未处理的;
第2个是Canvas.clipPatch() 实现的,有锯齿.
第3个是通过Paint的PorterDuff.Mode替代Path实现

 

  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
### 回答1: 要在Android Studio中创建一个圆形ImageView,可以使用以下步骤: 1. 在XML布局文件中添加一个ImageView元素,并设置其宽度和高度。 2. 在ImageView元素中添加一个圆形形状的背景,可以使用shape元素和corners属性来实现。 3. 在Java代码中获取ImageView元素,并使用BitmapFactory.decodeResource()方法加载要显示的图像。 4. 将加载的图像设置ImageView的源。 5. 在Java代码中创建一个Bitmap对象,并使用Canvas和Paint类将其绘制成圆形。 6. 将绘制的Bitmap对象设置ImageView的源。 以下是一个示例代码: XML布局文件: <ImageView android:id="@+id/imageView" android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/circle_shape"/> Java代码: ImageView imageView = findViewById(R.id.imageView); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image); Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(circleBitmap); Paint paint = new Paint(); paint.setAntiAlias(true); canvas.drawCircle(bitmap.getWidth() / 2f, bitmap.getHeight() / 2f, bitmap.getWidth() / 2f, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, , , paint); imageView.setImageBitmap(circleBitmap); ### 回答2: Android Studio中的ImageView默认是矩形的,但如果我们需要展示圆形图片,该怎么做呢? 方法一:使用第三方库CircleImageView CircleImageView是一个非常流行的第三方库,它只是一个自定义的ImageView类,可以将显示的图片裁剪成圆形。 使用步骤如下: 1.在项目根目录的build.gradle文件中添加依赖: ``` dependencies { ... implementation 'de.hdodenhof:circleimageview:3.1.0' } ``` 2.在需要展示圆形图片的布局文件中,将ImageView改为CircleImageView,并添加app:civ_border_width和app:civ_border_color属性来设置边框的宽度和颜色。 ``` <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/image_view" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/profile_image" app:civ_border_width="2dp" app:civ_border_color="#FF0000"/> ``` 方法二:在布局文件中使用自定义shape来实现圆形ImageView 1.在drawable文件夹下新建一个circle.xml来定义一个圆形的形状。 ``` <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#00000000"/> <stroke android:width="2dp" android:color="#FF0000"/> </shape> ``` 2.将ImageView的src属性设置为需要展示的图片,并设置background属性为circle.xml. ``` <ImageView android:id="@+id/image_view" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/profile_image" android:background="@drawable/circle"/> ``` 以上两方法都能很好的实现ImageView圆形显示效果,根据具体情况选择即可。 ### 回答3: 在Android Studio中,我们可以使用ImageView控件显示图片。ImageView默认是矩形的,并不像我们常见的圆形。但是,我们可以使用一些技巧来将ImageView变成圆形。 一方法是使用圆形图片。我们可以在图片编辑软件中将矩形的图片裁剪成圆形,然后将该图片设置ImageView中即可。具体步骤如下: 1. 打开图片编辑软件,并选择需要裁剪成圆形的图片。 2. 在软件中找到“圆形裁剪”或“椭圆裁剪”等相关选项。 3. 将图片裁剪成圆形,并保存到项目的资源文件夹中。 4. 在布局文件中使用ImageView控件,并设置src属性为圆形的图片资源。 另一方法是在ImageView上叠加一个圆形的遮罩。具体步骤如下: 1. 在项目的drawable文件夹中创建一个圆形的shape文件(比如circle.xml)。 2. 在shape文件中定义一个圆形,可以设置填充色或边框等属性。 3. 在布局文件中使用ImageView控件,并设置src属性为需要显示的图片资源。 4. 在ImageView控件上叠加一个圆形的遮罩,可以使用LayerDrawable或另一个ImageView控件实现。 5. 在Java代码中findViewById获取ImageView控件,并进行设置。 以上两方法都可以实现ImageView变成圆形的效果。需要注意的是,如果使用第一方法,每次更换图片都需要重新裁剪成圆形;如果使用第二方法,需要在代码中完成遮罩的设置,相对来说更加灵活。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值