安卓自訂控制項（二）BitmapShader、ShapeDrawable、Shape

標籤：ble   理解   class   draw   ade   應用   目標   err   方法   

第一篇部落格中，我已經對常用的一些方法做了匯總，這篇文章主要介紹BitmapShader位元影像渲染、ComposeShader組合渲染，然後看看Xfermode如何實際應用。不過本文還是只重寫onDraw一個方法，工欲善其事必先利其器嘛，一個方法一個方法地學，先瞭解每個對象是幹什麼的。
ViewHelper（View處理常用方法封裝）
安卓自訂控制項（一）Canvas、Paint、Shader
安卓自訂控制項（二）BitmapShader、ShapeDrawable、Shape

帶邊框的橢圓形ImageView

先寫一個自訂控制項，鼓勵一下自己。

/** * ShapeDrawable對象的使用 * Created by ChenSS on 2016/11/24. */public class RectView extends View {    private BitmapShader mBitmapShader;    private ShapeDrawable mShapeDrawable;    private Bitmap mBitmap;    private Paint mPaint;    private int mWidth, mHeight;    public RectView(Context context) {        super(context);        //得到映像        mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);        //構造渲染器BitmapShader，修改TileMode可以查看效果        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.REPEAT);        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setColor(Color.GRAY);        mWidth = mBitmap.getWidth();        mHeight = mBitmap.getHeight();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //加個描邊        canvas.drawOval(10, 10, mWidth - 290, mHeight - 50, mPaint);        //構建ShapeDrawable對象並定義形狀為橢圓        mShapeDrawable = new ShapeDrawable(new OvalShape());        //得到畫筆並設定渲染器        mShapeDrawable.getPaint().setShader(mBitmapShader);        //設定顯示地區        mShapeDrawable.setBounds(20, 20, mWidth - 300, mHeight - 60);        //繪製shapeDrawable        mShapeDrawable.draw(canvas);    }}

在Activity使用我們的自訂View：

public class RectActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(new RectView(this));    }}

效果似乎還不錯，如果學會了重寫onMeasure大概就能自訂View了吧，心裡有一些小激動。

小結：

這個Demo中，我們使用到了BitmapShader，ShapeDrawable，Shader.TileMode。

1. Shader.TileMode在上一篇部落格知識提了一下，它有三種模式：CLAMP（展開）、REPEAT（重複）、MIRROR（ 鏡像）；
2. BitmapShader在上一篇部落格也稍微說了一下，是一個位元影像渲染對象；
3. ShapeDrawable看名字，似乎是繪製形狀的；
4. 我們給ShapeDrawable的參數是OvalShape，OvalShape直譯就是橢圓，所以是繪製橢圓的，查看API，發現OvalShape有一個父類Shape，應該還有其它兄弟。

所以明確我們的學習目標：Shader.TileMode平鋪模式的區別；Shape有哪些子類（我們能繪製哪些形狀），我們怎麼使用它？如果不使用ShapeDrawable可以實現上面的效果嗎？

Shader.TileMode平鋪模式

Shape形狀對象

API介紹：
Defines a generic graphical “shape.” Any Shape can be drawn to a Canvas with its own draw() method, but more graphical control is available if you instead pass it to a ShapeDrawable.

查看API發現，Shape有2個直接子類，3個間接子類，他們分別是：
PathShape, RectShape,ArcShape, OvalShape, RoundRectShape。

PathShape

多邊形
上一篇部落格我寫了一個繪製多邊形的Demo，用到了Path，相信機智的各位一下子就看懂了它的作用，Demo中根據x、y值不停地畫線，最後繪製出一個多邊形，不過Path直譯既然叫路徑，肯定也能畫其它線，大家可以自己研究一下。從Path的作用我們也可以看出，PathShape是一個自由度很高的、可以設定多種形狀的Shape，想設計奇葩形狀的時候考慮使用它（五角星、菱形、六邊形等等）。

建構函式：
PathShape(path, stdWidth, stdHeight);

• Path路徑對象，來設定圖形。
• stdWidth：標準寬度
• stdHeight：標準高度

RectShape

矩形，直接建立執行個體即可。
建構函式：
RectShape()

ArcShape

扇形
建構函式：
ArcShape(float startAngle, float sweepAngle)

• startAngle：起始角度
• sweepAngle：結束角度

OvalShape

橢圓，直接建立執行個體即可。
建構函式：
OvalShape()

RoundRectShape

圓角矩形，建構函式的三個參數根據需求設定，不想要可以設定為null，outerRadii和innerRadii需要長度至少為8的float類型數組，每兩個float數決定了一個弧度值，一共4個弧度值，分別是： 左上、右上、右下、左下4個位置。
建構函式：
RoundRectShape(float[] outerRadii, RectF inset, float[] innerRadii)

• outerRadii：外矩形 左上、右上、右下、左下圓角半徑
• inset：內嵌RectF矩形，4個參數為Margin
• innerRadii：內矩形 左上、右上、右下、左下圓角半徑

補充：RoundRectShape的使用Demo

因為RoundRectShape參數看起來不好理解，加一個Demo，如果不設定inset、innerRadii這兩個參數，那麼他就是圓角矩形了，設定之後，相當於就像從中間挖了一個洞。

/** * ShapeDrawable對象的使用 * Created by ChenSS on 2016/11/24. */public class RectView extends View {    private BitmapShader mBitmapShader;    private ShapeDrawable mShapeDrawable;    private Shape mShape;    private Bitmap mBitmap;    public RectView(Context context) {        super(context);        //得到位元影像        mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);        //構造渲染器BitmapShader,修改TileMode測試效果        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);        //外矩形 左上、右上、右下、左下 圓角半徑        float[] outerRadii = {20, 20, 20, 20, 60, 70, 80, 200};        //內矩形與外矩形的邊距，左、上、右、下        RectF inset = new RectF(100, 100, 200, 200);        //內矩形 圓角半徑        float[] innerRadii = {20, 20, 20, 20, 20, 20, 20, 20};        //這三個參數根據需求設定        mShape = new RoundRectShape(outerRadii, inset, innerRadii);        //構建ShapeDrawable對象並定義形狀為圓角矩形        mShapeDrawable = new ShapeDrawable(mShape);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //得到畫筆並設定渲染器        mShapeDrawable.getPaint().setShader(mBitmapShader);        //設定顯示地區        mShapeDrawable.setBounds(20, 20, 1000, 1000);        //繪製shapeDrawable        mShapeDrawable.draw(canvas);    }

關於Xfermode的實戰，明天再補充，困了……

安卓自訂控制項（二）BitmapShader、ShapeDrawable、Shape