自定义View之圆角图片

在项目中有用到圆角图片,mark一下以备下次使用。

先介绍一下基础知识。

1、android自定义属性

在自定义View的时候很多时候不仅仅需要layout_width这些属性,可能还需要一些特殊属性。下面就介绍一下如何创建自定义View的特殊属性:

1)在res/values文件下定义一个attrs.xml文件,代码如下:



    
        
      
        
        
    
    
    


attr的format可以是string , integer , dimension , reference , color , enum这几种类型。


2) 在布局xml中如下使用该属性:(红色字体是关键)

 xmlns:ln="http://schemas.android.com/apk/res/com.dream.cornorpicdemo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:scrollbars="vertical"
    tools:context="com.dream.cornorpicdemo.MainActivity$PlaceholderFragment" >

    

        

        

        ln:borderRadius="20dp"
            ln:src="@drawable/icon"
            ln:type="round" />
        
        
    


3)在自定义组件中,获得xml中定义的值:

使用obtainStyledAttributes()方法获取全部的属性TypedArray;在使用完后记得typedArray.recycle();

TypedArray typedArray = context.getTheme().obtainStyledAttributes(
				attrs, R.styleable.CircleRect, defStyle, 0);
		if (typedArray != null) {
			int count = typedArray.getIndexCount();
			for (int i = 0; i < count; i++) {
				int attr = typedArray.getIndex(i);
				switch (attr) {
				case R.styleable.CircleRect_type:
					type = typedArray.getInt(attr, 0);
					break;
				case R.styleable.CircleRect_borderRadius:
					mBorderRadius = typedArray.getDimensionPixelSize(attr,
							(int) TypedValue.applyDimension(
									TypedValue.COMPLEX_UNIT_DIP, 10f,
									getResources().getDisplayMetrics()));
					break;
				case R.styleable.CircleRect_src:
					mBitmap = BitmapFactory.decodeResource(getResources(),
							typedArray.getResourceId(attr, 0));
					break;
				}
			}
		}
		
		typedArray.recycle();

2、Paint的 setXfermode(Xfermode x)方法

此方法用于设置两张图片相交时的模式,有如下几种模式:

自定义View之圆角图片_第1张图片


具体用法:paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));


3、自定义组件的onMeasure(),onLayout和onDraw()方法见我的另一篇博客:

http://blog.csdn.net/annieliu502/article/details/40586277


下面直接上代码:

其实圆角图片的思路很简单,如果想要图片是圆形的,只需要先绘制一个圆,再绘制图片;使用 paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));就可以获得他们相交的部分,即圆形图片;绘制圆角矩形图片同理,只是要先绘制一个圆角矩形而不是圆。

package com.dream.cornorpicdemo;

import android.R.bool;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

public class CustomCircularRect extends View {

	/** the radius of the oval used to round the corners*/
	private int mBorderRadius;

	/** circle=0,round=1 */
	private int type;
	private static final int IMG_TYPE_CIRCLE = 0;
	private static final int IMG_TYPE_ROUND = 1;

	/** the picture to change */
	private Bitmap mBitmap;

	/** view's width */
	private int mWidth;
	/** view's height */
	private int mHeight;

	public CustomCircularRect(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		TypedArray typedArray = context.getTheme().obtainStyledAttributes(
				attrs, R.styleable.CircleRect, defStyle, 0);
		if (typedArray != null) {
			int count = typedArray.getIndexCount();
			for (int i = 0; i < count; i++) {
				int attr = typedArray.getIndex(i);
				switch (attr) {
				case R.styleable.CircleRect_type:
					type = typedArray.getInt(attr, 0);
					break;
				case R.styleable.CircleRect_borderRadius:
					mBorderRadius = typedArray.getDimensionPixelSize(attr,
							(int) TypedValue.applyDimension(
									TypedValue.COMPLEX_UNIT_DIP, 10f,
									getResources().getDisplayMetrics()));
					break;
				case R.styleable.CircleRect_src:
					mBitmap = BitmapFactory.decodeResource(getResources(),
							typedArray.getResourceId(attr, 0));
					break;
				}
			}
		}
		
		typedArray.recycle();

	}

	public CustomCircularRect(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public CustomCircularRect(Context context) {
		this(context, null);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		//super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		
		// calculate the view's width
		int widthMode=MeasureSpec.getMode(widthMeasureSpec);
		int widthSize=MeasureSpec.getSize(widthMeasureSpec);
		if(widthMode==MeasureSpec.EXACTLY){
			mWidth=widthSize;
		}else{
			int width=getPaddingLeft()+getPaddingRight()+mBitmap.getWidth();
			if(widthMode==MeasureSpec.AT_MOST){
				mWidth=Math.min(width, widthSize);
			}else{
				mWidth=width;
			}
		}
		
		//calculate the view's height
		int heightMode=MeasureSpec.getMode(heightMeasureSpec);
		int heightSize=MeasureSpec.getSize(heightMeasureSpec);
		if(heightMode==MeasureSpec.EXACTLY){
			mHeight=heightSize;
		}else{
			int height=getPaddingTop()+getPaddingBottom()+mBitmap.getHeight();
			if(heightMode==MeasureSpec.AT_MOST){
				mHeight=Math.min(heightSize, height);
			}else{
				mHeight=height;
			}
		}

		setMeasuredDimension(mWidth, mHeight);
		
	}

	@Override
	protected void onLayout(boolean changed, int left, int top, int right,
			int bottom) {
		// TODO Auto-generated method stub
		super.onLayout(changed, left, top, right, bottom);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		//super.onDraw(canvas);
		
		switch (type) {
		case IMG_TYPE_CIRCLE:
			int min=Math.min(mWidth, mHeight);
			mBitmap=Bitmap.createScaledBitmap(mBitmap, min, min, false);
			canvas.drawBitmap(createCircleImg(mBitmap,min), 0, 0, null);
			break;
		case IMG_TYPE_ROUND:
			canvas.drawBitmap(createRoundImg(mBitmap),0,0,null);
			break;
		}
		
	}

	private Bitmap createCircleImg(Bitmap source,int min) {		
		Paint paint=new Paint();		
		paint.setAntiAlias(true);
		Bitmap bm=Bitmap.createBitmap(min, min, Config.ARGB_8888);
		Canvas canvas=new Canvas(bm);
		canvas.drawCircle(min/2, min/2, min/2, paint);
		
		paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
		canvas.drawBitmap(source, 0, 0, paint);
		
		return bm;
	}

	private Bitmap createRoundImg(Bitmap source) {
		Paint paint=new Paint();
		paint.setAntiAlias(true);
		
		Bitmap bm=Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
		Canvas canvas=new Canvas(bm);
		RectF rect=new RectF(0, 0, mWidth, mHeight);
		canvas.drawRoundRect(rect, mBorderRadius, mBorderRadius, paint);
		
		paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
		canvas.drawBitmap(source, 0, 0, paint);
		
		return bm;
	}

}

源码下载


你可能感兴趣的:(android,圆角图片,Android)