Android繪圖那些事兒（上）

標籤：

（一）概述
雖然，已經學過了Android繪圖的內容，但是總是覺得很模糊，今天就好好梳理下思路吧！純粹就是一個讀書筆記，整理下自己以前不知道的內容，好了開始：（本節主要介紹一些Drawable的常用方法及其xml定義,如果你已經很熟悉了，就跳過吧）

（二）Android螢幕適配問題
Android螢幕適配和相容，一直都是非常頭疼的問題，如何才能在不同的螢幕尺寸的手機片效果顯示不失真！現在看看螢幕這個渣渣的相關參數吧：

NO.1———-螢幕相關的參數

1）螢幕大小
指的是螢幕對角線的長度，通常使用“寸”來計量，參見的有4.7寸手機，5.5寸手機;

2)解析度
指的是手機螢幕的像數點個數，比如：720X1280就是指螢幕的解析度，指的是寬720個像數點，而高有1280個像數點。

3）PPI
每英寸像數又被稱為DPI ，它就是由對角線的像數點除以螢幕的大小得到的；

NO.2———-系統螢幕密度
由於國內廠商很多，要適配每一款手機的螢幕大小，那幾乎是不可能的，所以系統定義了幾個標準的DPI值，作為手機的固定DPI值，so 你需要適配這幾個標準的DPI差不多就可以了！瞬間開心了許多，標準螢幕密度如下：

No.2 獨立像數密度dp
正是由於各種螢幕密度的不同，導致同樣像數大小的長度，在不同密度的螢幕上顯示長度不同，這很容易理解長度完全相同，密度大的在單位面積上的像數點要多，相反，則會少；
Android系統使用mdpi即密度為160的螢幕作為標準，在這個螢幕上 1px = 1 dp ，其他螢幕則可以通過比例進行換算；那麼如何進行換算呢？就像下面這樣,各個解析度直接的換算比例：

No.3 單位轉換
各種類型轉換全在這裡了，你可以把它儲存在項目中進行使用；

import android.content.Context;import android.util.TypedValue;/** * Created by Eillot on 2016/7/18. * * dp , sp 轉化為px的工具類 */public class DisplayUtil {    /**     * 將px值轉換為dip或dp值 ，保證尺寸大小不變     * <p/>     * （DisplayMetrics類中屬性density)     *     * @param context     * @param pxValue     * @return     */    public static int px2dip(Context context, float pxValue) {        final float scale = context.getResources().getDisplayMetrics()                .density;        return (int) (pxValue / scale + 0.5f);    }    /**     * 將 dip 或者 dp 值轉換為 px 值 ，保證尺寸大小不變     * <p/>     * （DisplayMetrics類中屬性density)     *     * @param context     * @param dipValue     * @return     */    public static int dip2px(Context context, float dipValue) {        final float scale = context.getResources().getDisplayMetrics()                .density;        return (int) (dipValue / scale + 0.5f);    }    /**     * 將 ps 值轉換為 sp 值 ，保證尺寸大小不變     * <p/>     * （ DisplayMetrics 類中屬性 scaledDensity )     *     * @param context     * @param pxValue     * @return     */    public static int px2sp(Context context, float pxValue) {        final float fontscale = context.getResources().getDisplayMetrics()                .scaledDensity;        return (int) (pxValue / fontscale + 0.5f);    }    /**     * 將 sp 值轉換為 px 值 ，保證尺寸大小不變     * <p/>     * （ DisplayMetrics 類中屬性 scaledDensity )     *     * @param context     * @param spValue     * @return     */    public static int sp2px(Context context, float spValue) {        final float fontscale = context.getResources().getDisplayMetrics()                .scaledDensity;        return (int) (spValue / fontscale + 0.5f);    }    /**     * 其中density就是前面所說的換算比例。     * 這裡使用的是使用公式換算方法進行轉換，     * 同時系統也提供了TypeValue類協助我們轉換，     * 代碼如下     */    /**     *     * dp2px     * @param dp     * @return     */    protected int dp2px( int dp ){        return (int)TypedValue.applyDimension(                TypedValue.COMPLEX_UNIT_DIP,                dp ,                getResources().getDisplayMetrics());    }    /**     *     * sp2px     */    protected int sp2px( int sp ){        return (int)(TypedValue.applyDimension(                TypedValue.COMPLEX_UNIT_SP,                sp ,                getResources().getDisplayMetrics());    }}

(三）2D繪圖基礎
其實Canvas跟Paint非常好理解，相信大家對下面這個東東很熟悉吧！

對照起來，非常好理解，各種屬性妥妥的懂了！
先看下Paint（畫筆）的屬性：

就這麼多了，我挑幾個常用的說下，其他自己用的時候Google~

下面示範各種效果：
代碼模板：

/** * Created by Eillot on 2016/7/18. */public class DrawShape extends View {    /**     *     * 顏色     */    private int mClor = Color.RED;    /**     *     * 畫筆     */    private Paint mpaint;    public DrawShape(Context context) {        super(context);        initView();    }    public DrawShape(Context context, AttributeSet attrs) {        super(context, attrs);        initView();    }    public DrawShape(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initView();    }    private void initView() {        mpaint = new Paint();        mpaint.setColor(mClor);        mpaint.setStrokeWidth(36f);  //邊框粗細程度        mpaint.setStyle(Paint.Style.FILL);//實心       // mpaint.setStyle(Paint.Style.STROKE);//空心    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);       //在這裡添加代碼       canvas.drawRect(0 , 0 , 100 , 100 , mpaint);    }}

下面改變OnDraw（）中canvas.drawXXX（）即可；
1） mpaint.setStyle(Paint.Style.FILL);//實心

2) mpaint.setStyle(Paint.Style.STROKE);//空心
未設定變寬的粗細程度，使用的是預設值

另外，請你思考下：
為什麼我把 canvas.drawRect(0 , 0 , 100 , 100 , mpaint);改為 canvas.drawRect(100, 100 , 100 , 100 , mpaint);繪製的圖形是長方形，而不是正方形，照理說，邊長相等應該為正方形？
我的xml檔案：

    <com.mydraw2.DrawShape        android:id="@+id/my_views"        android:layout_width="match_parent"        android:layout_height="100dp" />

下面咱們繼續：
用於畫點：
canvas.drawPoint( 400 , 400 , mpaint);

繪製直線：
canvas.drawLine(0,0,300 , 300 ,mpaint);

繪製多條線：

 float[] pts={50,50,400,50,                400,50,400,600,                400,600,50,600,                60,600,50,50};        canvas.drawLines(pts ,mpaint);

最終將繪製成一個豎直的長方形；

繪製圓角矩形：

        canvas.drawRoundRect( new RectF( 10 , 10 , 210 , 210 ) , 15 , 15 ,mpaint);

繪製圓形：

 canvas.drawCircle(100,100,50,mpaint);

繪製弧形：

        canvas.drawArc( new RectF( 0,0,100,100) , 0 , 270 , true ,mpaint);

Paint.Style.STROKE + userCenter(true); -----的情況就像下面

Paint.Style.STROKE + userCenter(flase);-----的情況就像下面

Paint.Style.FILL + userCenter(flase);-----的情況就像下面

Paint.Style.FILL + userCenter(true);-----的情況就像下面

繪製橢圓:

canvas.drawOval( new RectF( 20 ,20,200,300 ) , mpaint);

繪製文字：

 canvas.drawText("H e  l  l   o" ,50,50,mpaint);

沿著路徑進行繪製文本：

Path path = new Path();        path.moveTo( 50 , 50 );        path.lineTo( 100 , 100 );        path.lineTo( 200 , 200 );        path.lineTo( 300 , 300 );        path.close();        canvas.drawTextOnPath("H e  l  l   o" ,path,50,50,mpaint);

（四）Android XMl繪圖
No.1 ——Bitmap
在XML中使用Bitmap非常簡單，標籤更改為<bitmap /> 再在裡面添加src元素引用圖片即可；就像這樣

<?xml version="1.0" encoding="utf-8"?><bitmap xmlns:android="http://schemas.android.com/apk/res/android">    android:src="@drawable/ic_launcher"</bitmap>

No.2 ——–Shape
使用Shape可以在xml中繪製就像這樣：（不需要死記住，用的時候查下）

No.3 ——–Layer圖層
xml定義非常簡單，就像這樣：（我直接拿上用了）

No.4 ——-Selector（沒什麼好說的，就是各種屬性配置）

好了，Draw各種xml定義就到這裡吧，大概有個印象就可以了，用不著死記，用的時候回來查查就ok了，下節說說徐大神帶給我們的繪圖技巧！

Android繪圖那些事兒（上）