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（畫筆）的屬性：



<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxjb2RlIGNsYXNzPQ=="hljs java">就這麼多了，我挑幾個常用的說下，其他自己用的時候谷歌~

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

/**
 * 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文件：

下面咱們繼續：
用於畫點：
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非常簡單，標簽更改為 再在裡面添加src元素引用圖片即可；就像這樣

    android:src="@drawable/ic_launcher"

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



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


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


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