自定义view之圆形ImageView

当初刚开始搞android时都不怎么注意细节,一些组件随便放上去加个监听器什么的就行了,最多也是把background弄一些颜色罢了。但后来从新回去看一些作品和项目,发现真的丑爆了。一个好的APP我觉得细节上的东西是很重要的,比如组件的圆角化,或者添加selector增加交互感等。在公司里,一些同事从来不用selector,一些按钮,按下去毫无交互感,都不知道按中了没有,给整个APP的用户体验感很差。

废话了那么多,实际上也就说明了细节对APP的重要性。但这里并不打算介绍selector,因为那玩意实在太简单了,相信用心的人都会用。最近公司里的美工无论画什么,感觉都爱加上圆角,当然包括一些圆形头像图片等,所以这里主要写关于ImageView的圆角处理。


圆角ImageView原生控件里并没有提供,所以需要我们去自定义,自定义的话其实也不难,直接继承ImageView,在它的基础上重画一下就OK了。


1.  因为是直接继承ImageView,所以省去自定义View的不少工作,这里就可以不用声明定义attrs属性,也不用初始化变量,只需要把父构造体加上去super就可以了。


2. 重写onMeasure()(实际上也可以不重写,因为继承了ImageView),但这里因为应对图片的宽高不一致造成图片没能完整被圆形罩住的情况还是重写处理了一下。

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		
		//若没有图片则返回
		if(getDrawable()==null){
			super.onMeasure(widthMeasureSpec, heightMeasureSpec);
			return;
		}
	
		int widthMode=MeasureSpec.getMode(widthMeasureSpec);
		int width=MeasureSpec.getSize(widthMeasureSpec);
		//若对应wrap_content,则宽度取图片的宽度,否则取viewgroup传过来的值
		if(widthMode==MeasureSpec.AT_MOST){
			//取图片和viewgroupk分配给子view的最大值之中的最小值
			width=Math.min(getDrawable().getIntrinsicWidth(), width);
		}
		
		//同宽度处理
		int heightMode=MeasureSpec.getMode(heightMeasureSpec);
		int height=MeasureSpec.getSize(heightMeasureSpec);
		if(heightMode==MeasureSpec.AT_MOST){
			height=Math.min(getDrawable().getIntrinsicHeight(), height);
		}
		
		//最后取宽度和高度两者的最小,使view的宽高相等
		setMeasuredDimension(Math.min(width, height), Math.min(width, height));
		
	}

        


左边为没重写onMeasure的效果,图片铺满了整个屏幕,但圆形截取到中间一部分而已;而右边重写了onMeasure,将图片的尺寸缩放了,所以圆形能截取到整张图片,但还是建议放宽高相等的图片,不然拉伸的图片看起来也是挺别扭的。


3. 重写onDraw(), 在canvas之上构建一个图层,并利用Xfermode规则,在该图层上先后绘制原始图片和圆形覆盖层,获取其交集部分,最终把图层内容提交到canvas。

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		
		Drawable drawable=getDrawable();		
		if(drawable==null) return;
		
		//拉伸图片,使宽高相等,以适应view的大小
		drawable.setBounds(0, 0, getWidth(), getHeight());				
		
		//创建图层,将图层压入栈,canvas的各种后续绘图操作将在该图层实现
		int layer=canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
		
		//先将原始图片画到图层
		drawable.draw(canvas);
		
		//创建一个bitmap,并在bitmap上绘制一个圆形,其实不止圆形,你可以在上面画各种图形都可以,反正和原始图片有交集就可以
		Bitmap bitmap=Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);		
		Canvas bitmapCanvas=new Canvas(bitmap); 		
		bitmapCanvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2, paint);
		
		//设置xfermode,该模式是取两次画图的交集部分,即圆形部分,且显示第一次画图的内容,即原始图片
		paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
		
		//将带有圆形的bitmap覆盖上去,实际上相当于面具
		canvas.drawBitmap(bitmap, 0, 0, paint);
		
		//将图层弹出栈,并将图层的内容提交到最终的canvas上
		canvas.restoreToCount(layer);		
		
	}
当初我没有在canvas之上创建图层,而是直接在canvas上利用Xfermode规则画原始图和覆盖图,得到的结果并不是我想要的,就和上面那两张图片一样,除了圆圈中的内容是我想要的,但圆圈之外却还有黑色的填充物,可能是圆圈之外是非交集而被剔除了原有的白色背景而导致。

效果图:


总之,实现该View的核心就是Xfermode这个类,它提供了16种绘图规则,不清楚的可以百度一下Xfermode, 有许多关于该类介绍的博客,在此就不贴上链接了。

最后贴上完整代码:

public class RoundImageView extends ImageView {

	private Paint paint=new Paint();;
	
	public RoundImageView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public RoundImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		
		//若没有图片则返回
		if(getDrawable()==null){
			super.onMeasure(widthMeasureSpec, heightMeasureSpec);
			return;
		}
	
		int widthMode=MeasureSpec.getMode(widthMeasureSpec);
		int width=MeasureSpec.getSize(widthMeasureSpec);
		//若对应wrap_content,则宽度取图片的宽度,否则取viewgroup传过来的值
		if(widthMode==MeasureSpec.AT_MOST){
			//取图片和viewgroupk分配给子view的最大值之中的最小值
			width=Math.min(getDrawable().getIntrinsicWidth(), width);
		}
		
		//同宽度处理
		int heightMode=MeasureSpec.getMode(heightMeasureSpec);
		int height=MeasureSpec.getSize(heightMeasureSpec);
		if(heightMode==MeasureSpec.AT_MOST){
			height=Math.min(getDrawable().getIntrinsicHeight(), height);
		}
		
		//最后取宽度和高度两者的最小,使view的宽高相等
		setMeasuredDimension(Math.min(width, height), Math.min(width, height));
		
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		
		Drawable drawable=getDrawable();		
		if(drawable==null) return;
		
		//拉伸图片,使宽高相等,以适应view的大小
		drawable.setBounds(0, 0, getWidth(), getHeight());				
		
		//创建图层,将图层压入栈,canvas的各种绘图操作将在该图层实现
		int layer=canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
		
		//先将图片画到图层
		drawable.draw(canvas);
		
		//创建一个bitmap,并在bitmap上绘制一个圆形,其实不止圆形,你可以在上面画各种图形都可以,反正和原始图片有交集就可以
		Bitmap bitmap=Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);		
		Canvas bitmapCanvas=new Canvas(bitmap); 		
		bitmapCanvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2, paint);
		
		//设置xfermode,该模式是取两次画图的交集部分,即圆形部分,且显示第一次画图的内容,即原始图片
		paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
		
		//将带有圆形的bitmap覆盖上去,实际上相当于面具
		canvas.drawBitmap(bitmap, 0, 0, paint);
		
		//将图层弹出栈,并将图层的内容提交到最终的canvas上
		canvas.restoreToCount(layer);		
		
	}

}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.samuelzhan.roundimageview.RoundImageView 
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/doge"/>
    
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_below="@id/iv"
        android:layout_centerHorizontal="true"
        android:src="@drawable/doge"/>

</RelativeLayout>

代码下载:github


------------------------------------------- 程序员小记-------------------------------------------------------

这是第二篇博客,其实在写第一篇的时候就想写点小记了。自从工作后,时间流逝似乎又达到了一个新的高度,不知不觉工作了大半年,四年的大学生涯也即将结束,现在大四下学期也过了三分之一,要是六月底毕业的话,现在也只剩两个月的时间。过去的半年经历了许多,错过了秋招,大四开学就进了一家初创的外包公司,因为从大二暑假就开始自学android开发,所以公司的项目基本没什么的压力,甚至效率比公司的一些老饼还高,但遗憾的是工资却是可怜的2K,想想当初也是挺无知的,这工资在深圳南山是个什么概念?发传单都比这高!呵呵,实习被宰也只能怪自己太嫩了。不过,当初也是抱着涨经验的心态工作的,也没太计较工资,反正公司也就在学校旁边。所以所以~尽人事,待天命。这也是我工作后的感想吧,只要努力,上天应该不会辜负你太多,即使现实很残酷。今晚就先写到这吧,这只是作为一个程序员憋的一堆心里话的开头而已。写完博客,还要写毕设论文,好忙~


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值