自定义View之圆角图片

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

先介绍一下基础知识。

1、android自定义属性

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

1）在res/values文件下定义一个attrs.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>

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）方法

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

具体用法：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);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stub//super.onMeasure(widthMeasureSpec, heightMeasureSpec);// calculate the view's widthint 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 heightint 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);}@Overrideprotected void onLayout(boolean changed, int left, int top, int right,int bottom) {// TODO Auto-generated method stubsuper.onLayout(changed, left, top, right, bottom);}@Overrideprotected 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;}}

源码下载

更多相关文章

随机推荐