前言

• Android群英傳讀書筆記

目錄

Android繪圖機制與處理技巧.png

Android屏幕相關知識

• 了解一些基礎名詞和參數信息

屏幕尺寸信息

屏幕參數

• 屏幕大小：指屏幕對角線的長度，通常使用“寸”來度量，如4.7寸、5.5寸手機等
• 分辨率：手機屏幕像素點的個數，720×1280就是指寬有720個像素點，高有1280個像素點
• PPI：每英寸像素，又名DPI，由對角線的像素點數除以屏幕的大小得到的

系統屏幕密度

獨立像素密度dp

Android系統使用mdpi即密度值為160的屏幕作為標準，在這個屏幕上1px = 1dp，其他屏幕可以進行比例換算，例如同樣是100dp的長度，在mdpi中為100px，而hdpi中為150px。也就是說在mdpi中1dp = 1px，而hdpi中1dp = 1.5px，在xdpi中1dp = 2px，在xxhpi中1dp = 3px

各分辨率換算比率
ldpi ：mdpi ：hdpi ：xhdpi ：xxhdpi = 3：4：6：8：12

單位換算

• 這里的換算封裝成工具類以便以后使用
• 核心就是從DisplayMetrics顯示度量類中獲取信息
• 這里我順便添加了獲得屏幕寬度的方法

public class DisplayUtils {

    /**
     * 獲得屏幕寬度（像素）
     *
     * @param activity
     * @return
     */
    public static int getDisplayWidth(Activity activity) {
        DisplayMetrics metric = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metric);
        int width = metric.widthPixels;     // 屏幕寬度（像素）
        return width;
    }

    /**
     * 獲得屏幕高度（像素）
     *
     * @param activity
     * @return
     */
    public static int getDisplayHeight(Activity activity) {
        DisplayMetrics metric = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metric);
        int height = metric.heightPixels;     // 屏幕高度（像素）
        return height;
    }


    /**
     * 將px值轉換為dip或dp值，保證尺寸大小不變
     *
     * @param context 通過上下文獲得顯示參數中的屏幕密度
     * @param pxValue 需要轉換的px值
     * @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值，保證尺寸大小不變
     *
     * @param context  通過上下文獲得顯示參數中的屏幕密度
     * @param dipValue 需要轉換的dp值
     * @return
     */
    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }


    /**
     * 將px值轉換為sp值，保證文字大小不變
     *
     * @param context 通過上下文獲得顯示參數中的屏幕密度
     * @param pxValue 需要轉換的px值
     * @return
     */
    public static int px2sp(Context context, float pxValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (pxValue / fontScale + 0.5f);
    }


    /**
     * 將sp值轉換為px值，保證文字大小不變
     *
     * @param context 通過上下文獲得顯示參數中的屏幕密度
     * @param spValue 需要轉換的sp值
     * @return
     */
    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }
}

Android繪圖技巧

2D繪圖技巧

• 系統通過Canvas畫布對象來提供繪圖方法，它提供了各種繪圖API

繪制的實例
http://blog.csdn.net/rhljiayou/article/details/7212620

• 需要注意其中畫弧和扇形，本質是畫一個矩形，以矩形的中心為弧或扇的中心點，以矩形的中心為角度的坐標原點繪制

Android XML繪圖

Bitmap

• 將圖片直接轉換為Bitmap

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

Shape

• 繪制各種形狀，省去了canvas和paint的步驟

<?xml version="1.0" encoding="utf-8"?>
<shape    
    xmlns:android="http://schemas.android.com/apk/res/android"    
    android:shape=["rectangle" | "oval" | "line" | "ring"] >    
    <corners        //當shape為rectangle時使用
        android:radius="integer"        //半徑值會被后面的單個半徑屬性覆蓋，默認為1dp
        android:topLeftRadius="integer"        
        android:topRightRadius="integer"        
        android:bottomLeftRadius="integer"        
        android:bottomRightRadius="integer" />    
    <gradient       //漸變
        android:angle="integer"        
        android:centerX="integer"        
        android:centerY="integer"        
        android:centerColor="integer"        
        android:endColor="color"        
        android:gradientRadius="integer"        
        android:startColor="color"        
        android:type=["linear" | "radial" | "sweep"]        
        android:useLevel=["true" | "false"] />    
    <padding        //內邊距
        android:left="integer"        
        android:top="integer"        
        android:right="integer"        
        android:bottom="integer" />    
    <size           //指定大小，一般用在imageview配合scaleType屬性使用
        android:width="integer"        
        android:height="integer" />    
    <solid          //填充顏色
        android:color="color" />    
    <stroke         //邊框
        android:width="integer"        
        android:color="color"        
        android:dashWidth="integer"        
        android:dashGap="integer" />
</shape>

Layer 層

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_launcher" />
    <item android:drawable="@drawable/ic_launcher" 
               android:left="10.0dp"
               android:top="10.0dp"
               android:right="10.0dp"
               android:bottom="10.0dp"/>
    ......
</layer-list>

Selector 選擇器

• Fragment配合RadioGroup實現點擊切換內容時RadioGroup的子項就是用選擇器作為View的觸摸反饋，不過我更喜歡FragmentTabHost做為下方選項卡（跑題了。。。）

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 默認時的背景圖片-->
    <item android:drawable="@drawable/X1"/>
    <!-- 沒有焦點時的背景圖片 -->
    <item android:drawable="@drawable/X2" android:state_window_focused="false"/>
    <!-- 非觸摸模式下獲得焦點并單擊時的背景圖片 -->
    <item android:drawable="@drawable/X3" android:state_focused="true" android:state_pressed="true"/>
    <!-- 觸摸模式下單擊時的背景圖片-->
    <item android:drawable="@drawable/X4" android:state_focused="false" android:state_pressed="true"/>
    <!--選中時的圖片背景-->
    <item android:drawable="@drawable/X5" android:state_selected="true"/>
    <!--獲得焦點時的圖片背景-->
    <item android:drawable="@drawable/X6" android:state_focused="true"/>
</selector>

Android繪圖技巧

• 簡化，優化繪圖操作

Canvas

Layer 層

• 類似于PS中圖層的概念
• 基于棧的結構進行管理的

• 入棧時，后面所有的操作都會發生在這個圖層中
• 出棧時，則會把圖像繪制到上層Canvas上

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawColor(Color.WHITE);
        p.setColor(Color.BLUE);
        canvas.drawCircle(150, 150, 100, p);

        // 圖一
        canvas.saveLayerAlpha(0, 0, 400, 400, 127, LAYER_TYPE_NONE);
        // 圖二
//        canvas.saveLayerAlpha(0, 0, 400, 400, 255, LAYER_TYPE_NONE);
        p.setColor(Color.RED);
        canvas.drawCircle(200, 200, 100, p);
        canvas.restore();
    }

圖一，透明度為127時，為半透明狀態

圖二，透明度設置為255時，完全不透明

Android圖像處理技巧

• Android對于圖片的處理，最常用使用到的數據結構就是位圖--Bitmap，它包含一張圖片的所有數據
• 整個圖片都是有點陣和顏色組成的
• 點陣就是一個包含像素的矩陣，每個元素對應者圖片的一個像素

色彩矩陣分析

• 在色彩處理中通常用以下三個角度描繪一個圖像
• 色調--物體傳播的顏色
• 飽和度--顏色的純度，從0（灰）到100%（飽和）來進行描述
• 亮度--顏色的相對明暗程度
• 在Android中系統使用顏色矩陣ColorMatrix來處理這個色彩效果

// ---- 施工中（8月2日--6日） ----

SurfaceView的使用

• SurfaceView是為了解決View中執行操作邏輯太多出現卡頓的情況

SurfaceView和View的區別

• View主要適用于主動更新的情況下，而SurfaceView主要適用于被動更新，例如頻繁的刷新
• View在主線程中對畫面進行刷新，而SurfaceView通常會通過一個子線程來進行頁面的刷新
• View在繪圖時沒有使用雙緩沖機制，而SurfaceView在底層實現機制中已經實現了雙緩沖機制

SurfaceView的使用

• 創建SurfaceView
  • 自定義SurfaceView繼承SurfaceView
  • 實現SurfaceHolder.Callback接口，并實現對應的三個方法
  • 實現Runnable接口，實現run()方法

 @Override
    public void surfaceCreated(SurfaceHolder surfaceHolder) {

    }
    @Override
    public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2) {

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder surfaceHolder) {

    }

    @Override
    public void run() {

    }

• 初始化SurfaceView

private SurfaceHolder mHolder;
private Canvas mCanvas;
private boolean mIsDrawing;

private void init() {    
     mHolder = getHolder(); 
     mHolder.addCallback(this);
}

• 使用SurfaceView

public class SurfaceViewDemo extends SurfaceView implements Runnable, SurfaceHolder.Callback {

    private SurfaceHolder mHolder;
    private Canvas mCanvas;
    private boolean mIsDrawing;         // 子線程標志位

    public SurfaceViewDemo(Context context) {
        super(context);
        initView();
    }

    private void initView() {
        mHolder = getHolder();
        mHolder.addCallback(this);

        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
        // mHolder.setFormat(PixelFormat.OPAQUE);
    }


    @Override
    public void surfaceCreated(SurfaceHolder surfaceHolder) {
        mIsDrawing = true;
        new Thread(this).start();
    }

    @Override
    public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2) {

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
        mIsDrawing = false;
    }

    @Override
    public void run() {
        while (mIsDrawing) {
            draws();
        }
    }

    public void draws() {
        try {
            mCanvas = mHolder.lockCanvas();
        } catch (Exception e) {
            
        } finally {
            if (mCanvas != null) {
                mHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }
}

SurfaceView實例

1. 正選曲線

@Override
    public void run() {
        while (mIsDrawing) {
            draws();
            x += 1;
            y = (int) (100 * Math.sin(x * 2 * Math.PI/180) + 400);
            mPath.lineTo(x, y);
        }
    }

    private void draws() {
        try {
            mCanvas = mHolder.lockCanvas();
            // Surface背景
            mCanvas.drawColor(Color.WHITE);
            mCanvas.drawPath(mPath, mPaint);
        } catch (Exception e) {

        } finally {
            if (mCanvas != null) {
                mHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }

繪制正弦曲線

2. 繪圖板

private void draws() {
        try {
            mCanvas = mHolder.lockCanvas();
            // Surface背景
            mCanvas.drawColor(Color.WHITE);
            mCanvas.drawPath(mPath, mPaint);
        } catch (Exception e) {

        } finally {
            if (mCanvas != null) {
                mHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(x,y);
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(x, y);
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }

畫筆粗細沒調。。