在项目中有用到圆角图片,mark一下以备下次使用。
先介绍一下基础知识。
1、android自定义属性
在自定义View的时候很多时候不仅仅需要layout_width这些属性,可能还需要一些特殊属性。下面就介绍一下如何创建自定义View的特殊属性:
1)在res/values文件下定义一个attrs.xml文件,代码如下:
attr的format可以是string , integer , dimension , reference , color , enum这几种类型。
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();
此方法用于设置两张图片相交时的模式,有如下几种模式:
具体用法: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;
}
}