Android自定义View之三角,五角星,圆形,心形图片实现

转载请标明出处:http://blog.csdn.net/joker_ya/article/details/38589677

好吧,写之前扯扯。如果是大神的话,可以忽略此文档。有兴趣的话也可以看看。这是本人的第一篇技术博客吧(话说也谈不上是什么特别的技术哭哭哭)!因为之前在写一个项目需要用到图片。但是把一张图片原封不动的src入ImageView里面去,看起来怪别扭的。因此不想走平民路线,于是就冒出来想把图片弄成三角形的,五角星或圆形的想法。说干就干,所以赶紧上网查了查怎么实现该想法。在此过程中也发现了很多问题,所以今天写出来和大家分享一下。本文是根据大牛鸿洋和alan_biao的博客编写粗来的。原理都和他们的一样,只是在图形上改了改,改成能画出三角形,五角星,心形的形状。大家可以去看看他们得博客,写的都很不错的。鸿洋的博客:http://blog.csdn.net/lmj623565791?viewmode=contents alan_biao的博客:http://blog.csdn.net/alan_biao?viewmode=contents 好吧就扯到这里吧!!写这篇博客的目的一个是为了和大家分享,另一个就是记录自己的收获和成长。

接下来就是如何实现的了。啥也不说了,先上图:

首先是原图:

接下来就是效果图了:


怎么样?是不是比什么都不弄直接src进去的要好呢?根据该方法大家可以实现最新版QQ的消息列表界面:

说了那么多了,还没给你们讲讲是怎么样的一个原理呢!接下来就给大家讲解一下实现该功能的原理:

其实主要是靠画笔paint中的一个方法:paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));来实现的。

下面简单的介绍下Xfermode和PorterDuffXfermode:


该Mode是设置两张图片相交时的模式。
在正常的情况下,在已有的图像上绘图将会在其上面添加一层新的形状。如果新的Paint是完全不透明的, 那么它将完全遮挡住下面的Paint;如果它是部分透明的,那么它将会被染上下面的颜色。
而setXfermode就可以来解决这个问题 .

Canvas canvas = new Canvas(dstBitmap);  
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));    
canvas.drawBitmap(srcBitmap, 0f, 0f, paint);   
canvas原有的图片可以理解为背景,就是dst;
新画上去的图片可以理解为前景,就是src。

下图可以让大家更好的理解PorterDuffXfermode的Mode:

从上面我们可以看到PorterDuff.Mode为枚举类,一共有16个枚举值:
1.PorterDuff.Mode.CLEAR  
  所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
    显示上层绘制图片
3.PorterDuff.Mode.DST
  显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
  正常绘制显示,上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
  上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN
    取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN
  取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT
  取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
  取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
  取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
  取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR
  异或:去除两图层交集部分
13.PorterDuff.Mode.DARKEN
  取两图层全部区域,交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
  取两图层全部,点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
  取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
  取两图层全部区域,交集部分变为透明色

有没有心动了?好了。接下来就是看看如何实现的了。

新建一个名为ShapeViewDemo的项目。目录如下:


在res的文件夹下新建一个名为attrs.xml文件用来定义自定义属性。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="shapeimageview">
        <attr name="border_size" format="dimension" />
        <attr name="in_border_color" format="color" />
        <attr name="out_border_color" format="color"/>
        <attr name="shape_type" format="string"/>
    </declare-styleable>
</resources>

接下来新建一个ShapeImageView.java

package com.example.shapeimageviewdemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Bitmap.Config;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.NinePatchDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * 
 * @author Joker_Ya
 * 
 */
public class ShapeImageView extends ImageView {

	private Context mContext;

	private int border_size = 0;// 边框厚度
	private int in_border_color = 0;// 内圆边框颜色
	private int out_border_color = 0;// 外圆边框颜色
	private int defColor = 0xFFFFFFFF;// 默认颜色

	private int width = 0;// 控件的宽度
	private int height = 0;// 控件的高度

	private String shape_type;// 形状的类型

	public ShapeImageView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		this.mContext = context;
	}

	public ShapeImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		this.mContext = context;
		setAttributes(attrs);
	}

	public ShapeImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		this.mContext = context;
		setAttributes(attrs);
	}

	/**
	 * 获得自定义属性
	 * 
	 * @param attrs
	 */
	private void setAttributes(AttributeSet attrs) {
		// TODO Auto-generated method stub
		TypedArray mArray = mContext.obtainStyledAttributes(attrs,
				R.styleable.shapeimageview);
		// 得到边框厚度,否则返回0
		border_size = mArray.getDimensionPixelSize(
				R.styleable.shapeimageview_border_size, 0);
		// 得到内边框颜色,否则返回默认颜色
		in_border_color = mArray.getColor(
				R.styleable.shapeimageview_in_border_color, defColor);
		// 得到外边框颜色,否则返回默认颜色
		out_border_color = mArray.getColor(
				R.styleable.shapeimageview_out_border_color, defColor);
		// 得到形状的类型
		shape_type = mArray.getString(R.styleable.shapeimageview_shape_type);

		mArray.recycle();// 回收mArray
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		// super.onDraw(canvas); 必须去掉该行或注释掉,否则会出现两张图片
		// 得到传入的图片
		Drawable drawable = getDrawable();
		if (drawable == null) {
			return;
		}
		if (getWidth() == 0 || getHeight() == 0) {
			return;
		}
		this.measure(0, 0);
		if (drawable.getClass() == NinePatchDrawable.class) {// 如果该传入图片是.9格式的图片
			return;
		}

		// 将图片转为位图
		Bitmap mBitmap = ((BitmapDrawable) drawable).getBitmap();

		Bitmap cpBitmap = mBitmap.copy(Bitmap.Config.ARGB_8888, true);
		// 得到画布宽高
		width = getWidth();
		height = getHeight();

		int radius = 0;//
		// 判断是否是圆形
		if ("round".equals(shape_type)) {
			// 如果内圆边框和外圆边框的颜色不等于默认颜色,则说明该圆有两个边框
			if (in_border_color != defColor && out_border_color != defColor) {
				// 计算出半径
				radius = (width < height ? width : height) / 2 - 2
						* border_size;
				// 画内圆边框
				drawCircleBorder(canvas, radius + border_size / 2,
						in_border_color);
				// 画外圆边框
				drawCircleBorder(canvas,
						radius + border_size + border_size / 2,
						out_border_color);
			}// 如果内圆边框颜色不等于默认颜色,则说明该圆有一个边框
			else if (in_border_color != defColor
					&& out_border_color == defColor) {
				radius = (width < height ? width : height) / 2 - border_size;

				drawCircleBorder(canvas, radius + border_size / 2,
						in_border_color);
			}// 如果外圆边框颜色不等于默认颜色,则说明该圆有一个边框
			else if (in_border_color == defColor
					&& out_border_color != defColor) {
				radius = (width < height ? width : height) / 2 - border_size;

				drawCircleBorder(canvas, radius + border_size / 2,
						out_border_color);
			} else {// 没有边框
				radius = (width < height ? width : height) / 2;
			}
		} else {
			radius = (width < height ? width : height) / 2;
		}

		Bitmap shapeBitmap = drawShapeBitmap(cpBitmap, radius);
		canvas.drawBitmap(shapeBitmap, width / 2 - radius, height / 2 - radius,
				null);
	}

	/**
	 * 画出指定形状的图片
	 * 
	 * @param cpBitmap
	 * @param radius
	 * @return
	 */
	private Bitmap drawShapeBitmap(Bitmap bmp, int radius) {
		// TODO Auto-generated method stub
		Bitmap squareBitmap;// 根据传入的位图截取合适的正方形位图
		Bitmap scaledBitmap;// 根据diameter对截取的正方形位图进行缩放
		int diameter = radius * 2;
		// 传入位图的宽高
		int w = bmp.getWidth();
		int h = bmp.getHeight();
		// 为了防止宽高不相等,造成圆形图片变形,因此截取长方形中处于中间位置最大的正方形图片
		int squarewidth = 0, squareheight = 0;// 矩形的宽高
		int x = 0, y = 0;
		if (h > w) {// 如果高>宽
			squarewidth = squareheight = w;
			x = 0;
			y = (h - w) / 2;
			// 截取正方形图片
			squareBitmap = Bitmap.createBitmap(bmp, x, y, squarewidth,
					squareheight);
		} else if (h < w) {// 如果宽>高
			squarewidth = squareheight = h;
			x = (w - h) / 2;
			y = 0;
			squareBitmap = Bitmap.createBitmap(bmp, x, y, squarewidth,
					squareheight);
		} else {
			squareBitmap = bmp;
		}
		// 对squareBitmap进行缩放为diameter边长的正方形位图
		if (squareBitmap.getWidth() != diameter
				|| squareBitmap.getHeight() != diameter) {
			scaledBitmap = Bitmap.createScaledBitmap(squareBitmap, diameter,
					diameter, true);
		} else {
			scaledBitmap = squareBitmap;
		}

		Bitmap outputbmp = Bitmap.createBitmap(scaledBitmap.getWidth(),
				scaledBitmap.getHeight(), Config.ARGB_8888);
		Canvas canvas = new Canvas(outputbmp);// 创建一个相同大小的画布
		Paint paint = new Paint();// 定义画笔
		paint.setAntiAlias(true);// 设置抗锯齿
		paint.setFilterBitmap(true);
		paint.setDither(true);
		canvas.drawARGB(0, 0, 0, 0);

		if ("star".equals(shape_type)) {// 如果绘制的形状为五角星形
			Path path = new Path();
			float radian = degree2Radian(36);// 36为五角星的角度
			float radius_in = (float) (radius * Math.sin(radian / 2) / Math
					.cos(radian)); // 中间五边形的半径

			path.moveTo((float) (radius * Math.cos(radian / 2)), 0);// 此点为多边形的起点
			path.lineTo((float) (radius * Math.cos(radian / 2) + radius_in
					* Math.sin(radian)),
					(float) (radius - radius * Math.sin(radian / 2)));
			path.lineTo((float) (radius * Math.cos(radian / 2) * 2),
					(float) (radius - radius * Math.sin(radian / 2)));
			path.lineTo((float) (radius * Math.cos(radian / 2) + radius_in
					* Math.cos(radian / 2)),
					(float) (radius + radius_in * Math.sin(radian / 2)));
			path.lineTo(
					(float) (radius * Math.cos(radian / 2) + radius
							* Math.sin(radian)), (float) (radius + radius
							* Math.cos(radian)));
			path.lineTo((float) (radius * Math.cos(radian / 2)),
					(float) (radius + radius_in));
			path.lineTo(
					(float) (radius * Math.cos(radian / 2) - radius
							* Math.sin(radian)), (float) (radius + radius
							* Math.cos(radian)));
			path.lineTo((float) (radius * Math.cos(radian / 2) - radius_in
					* Math.cos(radian / 2)),
					(float) (radius + radius_in * Math.sin(radian / 2)));
			path.lineTo(0, (float) (radius - radius * Math.sin(radian / 2)));
			path.lineTo((float) (radius * Math.cos(radian / 2) - radius_in
					* Math.sin(radian)),
					(float) (radius - radius * Math.sin(radian / 2)));

			path.close();// 使这些点构成封闭的多边形
			canvas.drawPath(path, paint);
		} else if ("triangle".equals(shape_type)) {// 如果绘制的形状为三角形
			Path path = new Path();

			path.moveTo(0, 0);
			path.lineTo(diameter / 2, diameter);
			path.lineTo(diameter, 0);

			path.close(); 
			canvas.drawPath(path, paint);
		} else if ("heart".equals(shape_type)) {// 如果绘制的形状为心形
			Path path = new Path();

			path.moveTo(diameter / 2, diameter / 5);
			path.quadTo(diameter, 0, diameter / 2, diameter / 1.0f);
			path.quadTo(0, 0, diameter / 2, diameter / 5);

			path.close();
			canvas.drawPath(path, paint);
		} else {// 这是默认形状,圆形
			// 绘制圆形
			canvas.drawCircle(scaledBitmap.getWidth() / 2,
					scaledBitmap.getHeight() / 2, scaledBitmap.getWidth() / 2,
					paint);
		}
		// 设置Xfermode的Mode
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
		canvas.drawBitmap(scaledBitmap, 0, 0, paint);

		bmp = null;
		squareBitmap = null;
		scaledBitmap = null;
		return outputbmp;

	}

	/**
	 * 角度转弧度公式
	 * 
	 * @param degree
	 * @return
	 */
	private float degree2Radian(int degree) {
		// TODO Auto-generated method stub
		return (float) (Math.PI * degree / 180);
	}

	/**
	 * 如果图片为圆形,这该方法为画出圆形图片的有色边框
	 * 
	 * @param canvas
	 * @param radius 边框半径
	 * @param color 边框颜色
	 */
	private void drawCircleBorder(Canvas canvas, int radius, int color) {
		// TODO Auto-generated method stub
		Paint paint = new Paint();

		paint.setAntiAlias(true);// 抗锯齿
		paint.setFilterBitmap(true);
		paint.setDither(true);
		paint.setColor(color);// 设置画笔颜色
		paint.setStyle(Paint.Style.STROKE);// 设置画笔的style为STROKE:空心
		paint.setStrokeWidth(border_size);// 设置画笔的宽度
		// 画出空心圆,也就是边框
		canvas.drawCircle(width / 2, height / 2, radius, paint);
	}

}
好了ShapeImageView.java写完了,有没有发现其原理很简单呢?在此过程中有一点大家要注意一下,那就是我们重写Ondraw(Canvas canvas)方法时一定要把super.onDraw(canvas);注释掉或去掉,否则会出现两张图片叠在一起。不要问我为什么。

最后附上Activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myview="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    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:orientation="vertical"
    tools:context=".MainActivity" >
	<!-- 没有设置shape_type,默认为无边框圆形 -->
    <com.example.shapeimageviewdemo.ShapeImageView 
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:src="@drawable/girl"
        />
    <!-- 令 shape_type="triangle"为三角形-->
    <com.example.shapeimageviewdemo.ShapeImageView 
        android:layout_width="80dip"
        android:layout_height="80dip"
        android:layout_marginTop="10dip"
        android:src="@drawable/girl"
        myview:shape_type="triangle"
        />
    <!-- 令 shape_type="star"为五角星-->
    <com.example.shapeimageviewdemo.ShapeImageView 
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_marginTop="10dip"
        android:src="@drawable/girl"
        myview:shape_type="star"
        />
    <!-- 令 shape_type="round"为圆形,并设置边框厚度和内外边框颜色-->
    <com.example.shapeimageviewdemo.ShapeImageView 
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_marginTop="10dip"
        android:src="@drawable/girl"
        myview:border_size="2dip"
        myview:in_border_color="#EE0000"
        myview:out_border_color="#00EEEE"
        myview:shape_type="round"
        />
    <!-- 令 shape_type="heart"为心形 -->
    <com.example.shapeimageviewdemo.ShapeImageView 
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_marginTop="10dip"
        android:src="@drawable/girl"
        myview:shape_type="heart"
        />
</LinearLayout>
由于用到了自定义属性,因此要在主layout里加上xmlns:myview="http://schemas.android.com/apk/res-auto",否则会报错。

至此,如何将一张图片弄成三角,五角,圆形或心形的图片的全部技术就给大家讲解了。希望对大家有所帮助,也希望大家能理解。当然不仅仅是三角,五角,圆形或心形的形状。只要你想的到的都能弄出来(特殊形状的图片除外),就看你敢不敢了。

由于本人是第一次写博客,如果文中有什么地方出现错误或不理解的可以在下面回复中指出来。谢谢

下面是源码下载地址:

ShapeImageViewDemo


展开阅读全文

没有更多推荐了,返回首页