自定义View之圆角图片

最新推荐文章于 2021-05-26 22:46:00 发布

annieLiu502

最新推荐文章于 2021-05-26 22:46:00 发布

阅读量700

点赞数

分类专栏： Android 文章标签： android 圆角图片 paint.setXfermode

本文链接：https://blog.csdn.net/annieLiu502/article/details/40615341

版权

Android 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

先介绍一下基础知识。

1、android自定义属性

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

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleRect">
        <attr name="borderRadius" format="dimension"/>
      <attr name="type">
        <enum name="circle" value="0"></enum>
        <enum name="round" value="1"></enum>
    </attr>
    <attr name="src" format="reference"></attr>
    </declare-styleable>
</resources>

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

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
   <span style="color:#ff0000;"> xmlns:ln="http://schemas.android.com/apk/res/com.dream.cornorpicdemo"</span>
    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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:src="@drawable/icon" />

        <com.dream.cornorpicdemo.CustomCircularRect
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            ln:src="@drawable/icon"
            ln:type="circle" />

        <com.dream.cornorpicdemo.CustomCircularRect
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            <span style="color:#ff0000;">ln:borderRadius="20dp"
            ln:src="@drawable/icon"
            ln:type="round" </span>/>
        
        <com.dream.cornorpicdemo.CustomCircularRect
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            ln:borderRadius="40dp"
            ln:src="@drawable/icon"
            ln:type="round" />
    </LinearLayout>

</ScrollView>

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);
	}

	@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;
	}

}

源码下载