一.屏幕的尺寸信息

1屏幕参数

• 屏幕大小

  指屏幕对角线的长度,通常使用”寸”来度量,例如4.7寸手机 5.5寸手机等.

• 分辨率

  分辨率是指手机屏幕的像素点个数,例如720*1280是指屏幕分变率,指宽有720个像素点,高有1280个像素点.

• PPI

  每英寸像素(Pixels Per Inch)又被称为DPI(Dots Per Inch).它有对角线的像素点数除以屏幕的大小得到的.

2系统屏幕密度

系统定义了几个标准的DPI值,作为手机的固定DPI

3独立像素密度dp

相同长度的屏幕,高密度的屏幕包含更多的像素点,Android系统使用mdpi即密度值为160的屏幕作为标准,在这个屏幕上1px=1dp.

各个分辨率直接的换算比例:ldpi:mdpi:xhdpi:xxhdpi=3:4:6:8:12

4单位换算

package com.jia.androidfirst;

import android.content.Context;

/**
 * dp sp 转换为px的工具类
 * 
 * @author aldrich
 *
 */
public class DisplayUtil {
    /**
     * 将px值转换为dip或dp值,保证尺寸大小不变
     * 
     * @param context
     * @param pxValue
     * @param scale
     *            (DisplayMetrics类中属性density)
     * @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
     * @param scale
     *            (DisplayMetrics类中属性density)
     * @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
     * @param fontScale
     *            (DisplayMetrics类中属性scaledDensity)
     * @return
     */
    public static int px2sp(Context context, float pxValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (pxValue / fontScale + 0.5);
    }

    /**
     * 将sp值转换为px值,保证文字大小不变
     * 
     * @param context
     * @param spValue
     * @param fontScale
     *            (DisplayMetrics类中属性scaledDensity)
     * @return
     */
    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }
}

其实的density就是前面所说的换算比例，这里使用的是公式换算方法进行转换，同时系统也提供了TypedValue帮助我们转换

 /**
     * dp2px
     * @param dp
     * @return
     */
    protected int dp2px(int dp){
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dp,getResources().getDisplayMetrics());
    }

    /**
     * sp2px
     * @param dp
     * @return
     */
    protected int sp2px(int sp){
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,sp,getResources().getDisplayMetrics());
    }

二.2D绘图基础

通过Canvas对象提供的各种绘制图像的API:
drawPoint(点)/drawLine(线)/drawRect(矩形)/drawVertices(多边形)/drawArc(弧)/drawCircle(圆).

• setAntiAlias(); //设置画笔的锯齿效果
• setColor(); //设置画笔的颜色
• setARGB(); //设置画笔的A R G B值
• setAlpha(); //设置画笔的Alpha值
• setTextSize(); //设置字体的尺寸
• setStyle(); //设置画笔的风格(空心或实心)

• setStrokeWidth(); //设置空心边框的宽度

• DrawPoint,绘制点

  canvas.drawPoint(x,y,paint);

• DrawLine,绘制直线

  canvas.drawLine(startX,startY,endX,endY,paint);

• DrawLines,绘制多条直线

  float[]pts={
  startX1,startX1,endX1,endY1,
  ……
  startXn,startYn,endYn,endYn};
  canvas.drawLines(pts,paint);

• DrawRect,绘制矩形

  canvas.drawRect(left,top,right,bottom,paint);

• DrawRoundRect,绘制圆角矩形

  canvas.drawRoundRect(left,top,right,bottom,radiusX,radiusY,paint);

• DrawCircle,绘制圆

  canvas.drawCircle(circleX,circleY,radius,paint);

• DrawArc,绘制弧形 扇形

  paint.setStyle(Paint.style.STROKE);
  canvas.drawArc(left,top,right,bottom,startAngle,sweepAngle,useCenter,paint);
  绘制弧形与扇形的区分就是倒数第二个参数useCenter的区别

• DrawOval,绘制椭圆

  //通过椭圆的外接矩形来绘制椭圆
  canvas.drawOval(left,top,right,bottom,paint);

• DrawText,绘制文本

  canvas.drawText(text,startX,startY,paint);

• DrawPosText,在指定位置绘制文本

  canvas.drawPosText(text,new float[]{X1,Y1,X2,Y2,……Xn,Yn},paint);

• DrawPath,绘制路径

  Path path=new Path();
  path.moveTo(50,50);
  path.lineTo(100,100);
  path.lineTo(100,300);
  path.lineTo(300,50);
  canvas.drawPath(path,paint);

三.Android XML 绘图

XML在安卓系统中可不仅仅是JAVA中的一个布局文件配置列表，在安卓开发者的手头上他甚至可以变成一张画，一幅画，Android开发者给XML提供了几个强大的属性

1.Bitmap

在XML中使用Bitmap很简单

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

</bitmap>

通过这样引用图片就可以将图片直接转化成Bitmap让我们在程序中使用

2.Shape

通过Shape可以绘制各种图形，下面展示一下shape的参数

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">
    <!--默认是rectangle-->

    <!--当shape= rectangle的时候使用-->
    <corners
        android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:radius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp" />
    <!--半径，会被后面的单个半径属性覆盖，默认是1dp-->

    <!--渐变-->
    <gradient
        android:angle="1dp"
        android:centerColor="@color/colorAccent"
        android:centerX="1dp"
        android:centerY="1dp"
        android:gradientRadius="1dp"
        android:startColor="@color/colorAccent"
        android:type="linear"
        android:useLevel="true" />

    <!--内间距-->
    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

    <!--大小，主要用于imageview用于scaletype-->
    <size
        android:width="1dp"
        android:height="1dp" />

    <!--填充颜色-->
    <solid android:color="@color/colorAccent" />

    <!--指定边框-->
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
    <!--虚线宽度-->
    android:dashWidth= "1dp"

    <!--虚线间隔宽度-->
    android:dashGap= "1dp"

</shape>

shape可以说是xml绘图的精华所在，而且功能十分的强大，无论是扁平化，拟物化还是渐变，都是十分的OK，我们现在来做一个阴影的效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="45"
        android:endColor="#805FBBFF"
        android:startColor="#FF5DA2FF" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <corners android:radius="8dp" />

</shape>

看效果

3.Layer

Layer是在PhotoShop中是非常常用的功能，在Android中，我们同样可以实现图层的效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--图片1-->
    <item android:drawable="@mipmap/ic_launcher"/>

    <!--图片2-->
    <item
        android:bottom="10dp"
        android:top="10dp"
        android:right="10dp"
        android:left="10dp"
        android:drawable="@mipmap/ic_launcher"
        />

</layer-list>

4.Selector

Selector的作用是帮助开发者实现静态View的反馈，通过设置不同的属性呈现不同的效果

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 默认时候的背景-->
    <item android:drawable="@mipmap/ic_launcher" />

    <!-- 没有焦点时候的背景-->
    <item android:drawable="@mipmap/ic_launcher" android:state_window_focused="false" />

    <!-- 非触摸模式下获得焦点并点击时的背景图片-->
    <item android:drawable="@mipmap/ic_launcher" android:state_pressed="true" android:state_window_focused="true" />

    <!-- 触摸模式下获得焦点并点击时的背景图片-->
    <item android:drawable="@mipmap/ic_launcher" android:state_focused="false" android:state_pressed="true" />

    <!--选中时的图片背景-->
    <item android:drawable="@mipmap/ic_launcher" android:state_selected="true" />

    <!--获得焦点时的图片背景-->
    <item android:drawable="@mipmap/ic_launcher" android:state_focused="true" />

</selector>

这一方法可以帮助开发者迅速制作View的反馈，通过配置不同的触发事件，selector会自动选中不同的图片，特别是自定义button的时候，而我们不再使用原生单调的背景，而是使用selector特别制作的背景，就能完美实现触摸反馈了

通常情况下，上面提到的这些方法都可以共同实现，下面这个例子就展示了在一个selector中使用shape作为他的item的例子，实现一个具体点击反馈效果的，圆角矩形的selector，代码如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <!--填充颜色-->
            <solid android:color="#33444444" />
            <!--设置按钮的四个角为弧形-->
            <corners android:radius="5dp" />
            <!--间距-->
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <!--填充颜色-->
            <solid android:color="#FFFFFF" />
            <!--设置按钮的四个角为弧形-->
            <corners android:radius="5dp" />
            <!--间距-->
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
</selector>

我们来看一下效果图

四.绘图技巧

在Android中,默认的坐标零点位于屏幕左上角,向下为Y轴正方向,向右为X轴正方向.

1.Canvas

canvas中常用方法:

• Canvas.save():将之前的所有已绘制图像保存起来,让后续的操作就好像在一个新的图层操作
• Canvas.restore():合并图层操作,将我们在save()之后绘制的所有图像,与sava()之前的图像进行合并.
• Canvas.translate():坐标平移,调用translate(x,y)方法之后,则将原点(0,0)移动到了(x,y).之后的所有绘图操作都将以(x,y)为原点进行.
• Canvas.rotate():翻转,将坐标系旋转了一定的角度.