自定义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
    评论
### 回答1: Android自定义View圆形刻度在实现上相对简单,主要步骤如下: 1. 创建一个继承自View的自定义View类,命名为CircleScaleView。 2. 在该自定义View的构造方法中完成必要的初始化工作,例如设置画笔、设置View的宽高、设置绘制模式等。 3. 重写onMeasure()方法,设置View的尺寸大小。可以根据自定义的需求来决定View的宽高。 4. 重写onDraw()方法,完成绘制整个圆形刻度的逻辑。 5. 在onDraw()方法中,首先通过getMeasuredWidth()和getMeasuredHeight()方法获取到View的宽高,然后计算圆心的坐标。 6. 接着,使用Canvas对象的drawArc()方法来绘制圆弧,根据需求设置圆弧的起始角度和扫描角度。 7. 再然后,通过循环绘制每个刻度线,可以使用Canvas对象的drawLine()方法来绘制。 8. 最后,根据需要绘制刻度值或其他其他附加元素,例如圆心的标记。 9. 至此,整个圆形刻度的绘制逻辑就完成了。 10. 在使用该自定义View的时候,可以通过添加该View到布局文件中或者在代码中动态添加,并按需设置相应的属性。 需要注意的是,自定义圆形刻度的具体样式和行为取决于项目需求,上述步骤仅为基础实现框架,具体细节需要根据实际情况进行相应的调整。 ### 回答2: 在Android中实现一个圆形刻度的自定义View有几个步骤。 首先,我们需要创建一个自定义View类,继承自View或者它的子类(如ImageView)。 接下来,在自定义View的构造方法中,初始化一些必要的属性,比如画笔的颜色、宽度等。我们可以使用Paint类来设置这些属性。 然后,我们需要在自定义View的onMeasure方法中设置View的宽度和高度,确保View在屏幕上正常显示。一种常见的实现方式是将宽度和高度设置为相同的值,使得View呈现出圆形的形状。 接着,在自定义View的onDraw方法中,我们可以利用画笔来绘制圆形刻度。可以使用canvas.drawCircle方法来绘制一个圆形,使用canvas.drawLine方法绘制刻度线。我们可以根据需要,定义不同的刻度颜色和宽度。 最后,我们可以在自定义View的其他方法中,添加一些额外的逻辑。比如,在onTouchEvent方法中处理触摸事件,以实现拖动刻度的功能;在onSizeChanged方法中根据View的尺寸调整刻度的大小等等。 当我们完成了自定义View的代码编写后,我们可以在布局文件中使用这个自定义View。通过设置布局文件中的属性,可以进一步自定义View的外观和行为。 总之,实现一个圆形刻度的自定义View,我们需要定义一个自定义View类,并在其中使用画笔来绘制圆形和刻度。通过处理一些事件和属性,我们可以实现更多的功能和样式。以上就是简单的步骤,可以根据需要进行更加详细的实现。 ### 回答3: Android自定义View圆形刻度可以通过以下步骤实现。 首先,我们需要创建一个自定义View,继承自View类,并重写onDraw方法。在该方法中,我们可以自定义绘制的内容。 其次,我们需要定义一个圆形的刻度尺背景,可以使用Canvas类提供的drawCircle方法来绘制实心圆或空心圆。 接着,我们可以通过Canvas类的drawLine方法来绘制刻度线。根据刻度的数量,可以计算出每个刻度之间的角度,然后循环绘制出所有的刻度线。 然后,我们可以通过Canvas类的drawText方法来绘制刻度的值。根据刻度线的角度和半径,可以计算出刻度的坐标,然后将刻度的值绘制在指定的位置上。 最后,我们可以通过在自定义View的构造方法中获取相关的参数,如刻度的最大值、最小值、当前值等,然后根据这些参数来计算刻度的位置和值。 在使用自定义View时,可以通过设置相关的属性来改变刻度的样式和位置。例如,可以设置刻度线的颜色、粗细、长度等,也可以设置刻度值的颜色、大小等。 通过以上步骤,我们就可以实现一个圆形刻度尺的自定义View。在使用时,可以根据需要自行调整绘制的样式和逻辑。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值