快捷導(dǎo)航

Android UI效果之繪圖篇（三）

更新時間：2016年02月23日 10:56:22 投稿：lijiao

這篇文章主要介紹了Android UI效果之繪圖篇，針對Android開發(fā)中的UI效果設(shè)計模塊進(jìn)行講解，感興趣的小伙伴們可以參考一下

一、 PorterDuffXfermode

PorterDuffXfermode類似于數(shù)據(jù)集合里面的交集并集概念，只是數(shù)據(jù)里面取的是兩個集合，而我們這里取的是兩個圖形之間的交集并集，我們先來看一張Android API Demo里面一張金典的圖

圖中的Src和Dst相當(dāng)于是數(shù)學(xué)中的兩個集合，而在我們的代碼中我們可以這樣來操作這兩個集合

canvas.drawSrc();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XXX));
canvas.drawDst();

只需要更具我們的需要設(shè)置不同的Mode即可，從此以后，圓角矩形什么的，那都不是事兒！

二、Shader

Shader字面意思是著色器、渲染器，有五個子類分別是：

BitmapShader
LinearGradient
RadialGradient
SweepGradient
ComposeShader

1、BitmapShader：位圖渲染，顧名思義，使用BitmapShader可以對位圖進(jìn)行一些著色渲染操作
構(gòu)造方法如下

 /**
 * @param bitmap 需要渲染的位圖
 * @param tileX X方向渲染模式
 * @param tileY Y方向渲染模式.
 */
 public BitmapShader(Bitmap bitmap, TileMode tileX, TileMode tileY)

第一個參數(shù)不用多說，第二個和第三個渲染模式TileMode有三個可選項
①. CLAMP：當(dāng)bitmap比要繪制的圖形小時拉伸位圖的最后一個像素；當(dāng)bitmap比要繪制的圖形大時，根據(jù)繪制圖形剪裁bitmap

 BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
 paint.setShader(bitmapShader);
 canvas.drawRect(0, 0, bitmap.getWidth() * 2, bitmap.getHeight() * 2, paint);

 BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
 paint.setShader(bitmapShader);
 RectF rect = new RectF(100, 100, 300, 300);
 canvas.drawRoundRect(rect, 30, 30,paint);

②. REPEAT ：當(dāng)bitmap比要繪制的圖形小時橫向縱向不斷重復(fù)bitmap；當(dāng)bitmap比要繪制的圖形大時，根據(jù)繪制圖形剪裁bitmap

BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
paint.setShader(bitmapShader);
canvas.drawRect(0, 0, bitmap.getWidth() *2, bitmap.getHeight() * 2, paint);

③. MIRROR ：和REPEAT 類似，當(dāng)bitmap比要繪制的圖形小時橫向縱向不斷重復(fù)bitmap，不同的是相鄰的兩個bitmap互為鏡像

BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
paint.setShader(bitmapShader);
canvas.drawRect(0, 0, bitmap.getWidth() * 4, bitmap.getHeight() * 4, paint);

熟悉BitmapShader之后，圓角圖片、圓形頭像什么的就更easy了

1.LinearGradient 線性漸變
先來看下它的構(gòu)造方法

 /**
 * 創(chuàng)建一個LinearGradient
 @param x0 起始X坐標(biāo)
 @param y0 起始Y坐標(biāo)
 @param x1 結(jié)束X坐標(biāo)
 @param y1 結(jié)束Y坐標(biāo)
 @param color0 起始顏色值
 @param color1 結(jié)束顏色值
 @param tile shader的mode
 */
 public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,TileMode tile)

LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)

兩個構(gòu)造方法類似，第二個只是可以添加更多顏色，把顏色值封裝到了數(shù)組colors中，其后的positions是與之colors對于的顏色的比例，如果為null，顏色值則平均分布。
LinearGradient和BitmapShader一樣有三個TileMode可選CLAMP、REPEAT、MIRROR。實現(xiàn)的效果如下:
① CLAMP

LinearGradient lg = new LinearGradient(0, 0, 300, 300, 0xFFFF0000, 0xFF0000FF, Shader.TileMode.CLAMP);
paint.setShader(lg);
canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), paint);

② REPEAT

LinearGradient lg = new LinearGradient(0, 0, 300, 300, 0xFFFF0000, 0xFF0000FF, Shader.TileMode.REPEAT);
paint.setShader(lg);
canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), paint);

③ MIRROR

LinearGradient lg = new LinearGradient(0, 0, 300, 300, 0xFFFF0000, 0xFF0000FF, Shader.TileMode.MIRROR);
paint.setShader(lg);
canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), paint);