前言
最近需要做一個優惠券功能，于是找了找，發現網上大多數優惠券控件的都是直接利用Paint繪制一個白色的新圖層然后疊加上去，但是這樣處理的話，當背景不是純白色的時候，就會暴露出如下圖問題：
網上常見項目的效果圖
對于有點強迫癥的人來說，看著怎么都有點難受。好吧，俗話說自己動手豐衣足食，咱就自己動手弄個更加完善的出來。
完整代碼項目地址在文章尾部有鏈接，需要的可以自行下載。
正文
為了解決掉邊緣鋸齒的問題，我用另外的思路實現了這個功能，雖然已經有較多人造出了輪子，但咱們還是談一下本項目的優勢：
- 優惠券控件邊緣鋸齒形狀有：圓形、橢圓、三角形、正方形四種樣式可選；
- 鋸齒的間距、大小、控件顏色等可自定義設置，定制性和靈活性更強；
- 邊緣鋸齒是摳掉了變成透明的，而不是繪制白色的疊加上去，更符合客觀世界實際物質認知。
效果圖
這里寫圖片描述
實現步驟
一開始我想著，哎~？直接把Paint 給設置成DST_OUT 不就完事了嗎？ 結果試了這種方法之后發現，扣掉的部分不是變成透明，而是黑色... 尷尬，想了想大概是因為LinearLayout有默認處理背景顏色，所以不能直接對控件的Canvas 畫布摳圖，這樣行不通。那么咱另外添加一個Canvas 當做背景然后摳圖，自定義控件背景默認透明就好了。
本項目實現的大致思路和步驟如下：
- 定義一個VoucherView類繼承自LinearLayout；
- 在attrs.xml文件里面聲明所需自定義屬性；
- 將自定義控件背景利用代碼給設置成完全透明（詳見VoucherView類的initDrawCanvas方法）；
- 創建一個mCanvas畫布并通過自定義屬性BgColor獲取需設定的顏色；
- 創建一個mPaint畫筆，用于繪制邊緣鋸齒；
- 利用圖像合成類PorterDuffXfermode并給Paint畫筆設置DST_OUT模式；
- 獲取自定義屬性drawType，根據自定義屬性設定的形狀，繪制邊緣鋸齒；
- mCanvas畫布擦掉mPaint畫筆所繪制的形狀部分。
源代碼
自定義控件 VoucherView類：
package com.voucher;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.LinearLayout;
/**
* @TODO<自定義優惠券控件>
* @author 小嵩
* @date 2017-4-14
*/
public class VoucherView extends LinearLayout {
private Paint mPaint;
//item間距 默認是5dp
private float mGap;
//繪制的圖層
private Bitmap mBitmap;
private Canvas mCanvas;
//item半徑 默認是10dp
private float mRadius ;
//item數量
private int mCircleNum_H;
private int mCircleNum_V;
//除過item和間隙外多余出來的部分
private float mRemain_H;//水平
private float mRemain_V;//垂直
//畫筆顏色
private int mPaintColor;
//指定繪制的方向
private int mOrientation;
public final static int DRAW_HORIZONTAL = 0;//水平
public final static int DRAW_VERTICAL = 1;//垂直
public final static int DRAW_ＡROUND = 2;//全部
//鋸齒形狀 （圓形，橢圓，三角形，正方形）
private int drawType;
private static final int CIRCLE = 0;
private static final int ELLIPSE = 1;
private static final int TRIANGLE = 2;
private static final int SQUARE = 3;
@Override
public void setOrientation(int orientation) {
}
public VoucherView(Context context) {
this(context,null);
}
public VoucherView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public VoucherView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
if (attrs != null) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.voucherView, 0, 0);
drawType = a.getInt(R.styleable.voucherView_drawType, CIRCLE);
mOrientation = a.getInt(R.styleable.voucherView_orientation,DRAW_HORIZONTAL);//默認水平方向
mGap = a.getDimensionPixelOffset(R.styleable.voucherView_mGap, 5);
mRadius = a.getDimensionPixelOffset(R.styleable.voucherView_mRadius, 10);
mPaintColor = a.getColor(R.styleable.voucherView_BgColor, 0xFFc0c0c0);
a.recycle();//回收內存
}
initPaint();
}
private void initPaint() {//邊緣鋸齒畫筆
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setDither(true);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mPaint.setStyle(Paint.Style.FILL);
}
/**
* item數量的 計算公式 ：
* circleNum = (int) ((w-gap)/(2*radius+gap));
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
initDrawCanvas(w, h);
switch (mOrientation){
case DRAW_HORIZONTAL:
measureHorNum(w);
break;
case DRAW_VERTICAL:
measureVelNum(h);
break;
case DRAW_ＡROUND:
measureHorNum(w);
measureVelNum(h);
break;
}
}
/**
* 初始化繪制圖層
* @param w
* @param h
*/
private void initDrawCanvas(int w, int h) {
if (getBackground()==null){//背景未設置情況下，設置為透明背景
setBackgroundColor(Color.TRANSPARENT);
}
// 初始化鋸齒遮蓋圖層
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
// 繪制圖層顏色
mCanvas.drawColor(mPaintColor);
}
/**
* 測量水平的item數目
* @param w
*/
private void measureHorNum(int w) {
if(mRemain_H==0){
mRemain_H=(w-mGap)%(mRadius*2+mGap);
}
mCircleNum_H=(int)((w-mGap)/(mRadius*2+mGap));
}
/**
* 測量垂直item數目
* @param h
*/
private void measureVelNum(int h) {
if(mRemain_V==0){
mRemain_V=(h-mGap)%(mRadius*2+mGap);
}
mCircleNum_V=(int)((h-mGap)/(mRadius*2+mGap));
}
/**
* 繪制鋸齒
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(mBitmap, 0, 0, null);//繪制圖層
switch (mOrientation){
/**
* 水平方向
*/
case DRAW_HORIZONTAL:
if (drawType==CIRCLE){//圓形
drawHorCircle();
}else if (drawType==ELLIPSE){//橢圓
drawHorEllipse();
}else if(drawType==TRIANGLE){//三角形
drawHorTriangle();
}else if(drawType==SQUARE){//正方形
drawHorSquare();
}
break;
/**
* 垂直方向
*/
case DRAW_VERTICAL:
if (drawType==CIRCLE){//圓形
drawVelCircle();
}else if (drawType==ELLIPSE){//橢圓
drawVelEllipse();
}else if(drawType==TRIANGLE){//三角形
drawVelTriangle();
}else if(drawType==SQUARE){//正方形
drawVelSquare();
}
break;
/**
* 四周方向
*/
case DRAW_ＡROUND:
if (drawType==CIRCLE){//圓形
drawHorCircle();
drawVelCircle();
}else if (drawType==ELLIPSE){//橢圓
drawHorEllipse();
drawVelEllipse();
}else if (drawType==TRIANGLE){//三角形
drawHorTriangle();
drawVelTriangle();
}else if(drawType==SQUARE){//正方形
drawHorSquare();
drawVelSquare();
}
break;
}
}
////***********************************************************////
/**
* 繪制水平的圓
*/
private void drawHorCircle() {
for (int i=0;i<mCircleNum_H;i++){
float x = mGap+mRadius+mRemain_H/2+((mGap+mRadius*2)*i);
mCanvas.drawCircle(x,0,mRadius,mPaint);
mCanvas.drawCircle(x,getHeight(),mRadius,mPaint);
}
}
/**
* 繪制水平的橢圓
*/
private void drawHorEllipse() {
for (int i=0;i<mCircleNum_H;i++){
float x = mGap+mRadius+mRemain_H/2+((mGap+mRadius*2)*i);
// 定義橢圓對象
RectF rectf = new RectF();
// 設置橢圓大小
rectf.left = x-mRadius;
rectf.right = x+mRadius;
rectf.top = 0;
rectf.bottom = mRadius;
// 繪制上面的橢圓
mCanvas.drawOval(rectf, mPaint);
rectf.top = getHeight()-mRadius;
rectf.bottom = getHeight();
// 繪制下面的橢圓
mCanvas.drawOval(rectf, mPaint);
}
}
/**
* 繪制水平的三角形
*/
private void drawHorTriangle() {
for (int i=0;i<mCircleNum_H;i++){
float x = mGap+mRadius+mRemain_H/2+((mGap+mRadius*2)*i);
// 繪制三角形
Path path = new Path();
// 設置多邊形的點
path.moveTo(x-mRadius,0);
path.lineTo(x+mRadius,0);
path.lineTo(x, mRadius);
path.lineTo(x-mRadius,0);
// 使這些點構成封閉的多邊形
path.close();
mCanvas.drawPath(path,mPaint);
//繪制下邊緣
path.moveTo(x-mRadius,getHeight());
path.lineTo(x+mRadius,getHeight());
path.lineTo(x,getHeight()-mRadius);
path.lineTo(x-mRadius,getHeight());
// 使這些點構成封閉的多邊形
path.close();
mCanvas.drawPath(path,mPaint);
}
}
/**
* 繪制水平的正方形
*/
private void drawHorSquare() {
for (int i=0;i<mCircleNum_H;i++){
float x = mGap+mRadius+mRemain_H/2+((mGap+mRadius*2)*i);
mCanvas.drawRect(0,x,0,mRadius,mPaint);
// 定義正方形對象
RectF rectf = new RectF();
// 設置正方形大小
rectf.left = x-mRadius/2;
rectf.right = x+mRadius/2;
rectf.top = 0;
rectf.bottom = mRadius;
// 繪制上面的正方形
mCanvas.drawRect(rectf, mPaint);
rectf.top = getHeight()-mRadius;
rectf.bottom = getHeight();
// 繪制下面的正方形
mCanvas.drawRect(rectf, mPaint);
}
}
////***********************************************************////
/**
* 繪制垂直的圓
*/
private void drawVelCircle() {
for (int i=0;i<mCircleNum_V;i++){
float y = mGap+mRadius+mRemain_V/2+((mGap+mRadius*2)*i);
mCanvas.drawCircle(0,y,mRadius,mPaint);
mCanvas.drawCircle(getWidth(),y,mRadius,mPaint);
}
}
/**
* 繪制垂直的橢圓
*/
private void drawVelEllipse() {
for (int i=0;i<mCircleNum_V;i++){
float y = mGap+mRadius+mRemain_V/2+((mGap+mRadius*2)*i);
// 定義橢圓對象
RectF rectf = new RectF();
// 設置橢圓大小
rectf.left = 0;
rectf.right = mRadius;
rectf.top = y-mRadius;
rectf.bottom = y+mRadius;
// 繪制橢圓
mCanvas.drawOval(rectf, mPaint);
rectf.left = getWidth()-mRadius;
rectf.right = getWidth();
// 繪制橢圓
mCanvas.drawOval(rectf, mPaint);
}
}
/**
* 繪制垂直的三角形
*/
private void drawVelTriangle() {
for (int i=0;i<mCircleNum_V;i++){
float y = mGap+mRadius+mRemain_V/2+((mGap+mRadius*2)*i);
// 繪制三角形
Path path = new Path();
// 設置多邊形的點
path.moveTo(0,y-mRadius);
path.lineTo(0,y+mRadius);
path.lineTo(mRadius,y);
path.lineTo(0,y-mRadius);
// 使這些點構成封閉的多邊形
path.close();
mCanvas.drawPath(path,mPaint);
//繪制下邊緣
path.moveTo(getWidth(),y-mRadius);
path.lineTo(getWidth(),y+mRadius);
path.lineTo(getWidth()-mRadius,y);
path.lineTo(getWidth(),y-mRadius);
// 使這些點構成封閉的多邊形
path.close();
mCanvas.drawPath(path,mPaint);
}
}
/**
* 繪制垂直的橢圓
*/
private void drawVelSquare() {
for (int i=0;i<mCircleNum_V;i++){
float y = mGap+mRadius+mRemain_V/2+((mGap+mRadius*2)*i);
// 定義橢圓對象
RectF rectf = new RectF();
// 設置橢圓大小
rectf.left = 0;
rectf.right = mRadius/2;
rectf.top = y-mRadius/2;
rectf.bottom = y+mRadius;
// 繪制橢圓
mCanvas.drawRect(rectf, mPaint);
rectf.left = getWidth()-mRadius;
rectf.right = getWidth();
// 繪制橢圓
mCanvas.drawRect(rectf, mPaint);
}
}
}
在values目錄下 - 創建 attrs.xml 文件添加如下代碼：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="voucherView">
<attr name="drawType">
<enum name="circle" value="0"/>
<enum name="ellipse" value="1"/>
<enum name="triangle" value="2"/>
<enum name="square" value="3"/>
</attr>
<attr name="orientation">
<enum name="horizontal" value="0"/>
<enum name="vertical" value="1"/>
<enum name="around" value="2"/>
</attr>
<attr name="mGap" format="dimension"/>
<attr name="mRadius" format="dimension"/>
<attr name="BgColor" format="color"/>
</declare-styleable>
</resources>
關于使用
</br>
</br>
1.引入依賴
有三種方式：
- Jcenter庫
compile 'com.xiaosong520:voucher:1.0.1'
- 引入Module
下載源代碼，然后將voucher組件拷貝到工程去，并添加Module依賴 - 直接拷貝代碼到項目
直接將項目中 VoucherView 類 以及 attrs.xml 文件里面的自定義屬性拷貝到項目中去（Jcenter庫后續會添加，具體情況以GitHub項目Readme文檔為準）。
</br>
</br>
2.在需要使用的布局文件中添加控件，代碼如下
(路徑請替換成實際項目中 VoucherView 類所在的路徑)。
根部局添加如下屬性：
xmlns:VoucherView="http://schemas.android.com/apk/res-auto"
添加控件：
<com.voucher.VoucherView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="30dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
VoucherView:drawType="circle"
VoucherView:orientation="horizontal"
VoucherView:mGap="5dp"
VoucherView:mRadius="5dp"
VoucherView:BgColor="#FFA90F">
<!--優惠券實際內容部分-->
<include
layout="@layout/include_content"/>
</com.voucher.VoucherView>
將include 布局部分替換成你實際所需要的布局就行了，接下來萬事大吉，可以愉快地使用了~
</br>
</br>
3.可自定義的屬性及參數表格（attrs）
| method(方法名稱) | format(參數格式） | description（描述） |
|---|---|---|
| drawType | enum（枚舉） | 有圓形、橢圓、三角形、正方形這四種邊緣鋸齒形狀 |
| orientation | enum（枚舉） | 包含 horizontal、vertical、around 這三種方向，分別表示水平、垂直、四周。 |
| mGap | dimension（尺寸） | 該參數控制邊緣鋸齒之間的間隔寬度 |
| mRadius | dimension（尺寸） | 該參數控制邊緣鋸齒的半徑長度 |
| BgColor | color（顏色） | 該參數控制自定義控件的背景顏色 |
</br>
</br>
GitHub項目鏈接地址：EasyVoucherView
歡迎提出建議和指出不足，如果感覺對你有幫助的話歡迎Star支持一下，也非常樂意Fork和Pull Request~
