Android绘图机制与处理技巧（一）2D绘图技巧与XML绘图

2D绘图基础

Paint是一个非常重要的元素, 下面列举了一些它的属性和对应的功能：

• setAntiAlias()：设置画笔的锯齿效果
• setColor()：设置画笔的颜色
• setARGB()：设置画笔的A、R、G、B值
• setAlpha()：设置画笔的Alpha值
• setTextSize()：设置字体的尺寸
• setStyle()：设置画笔的风格（空心或实心）
• setStrokeWidth()：设置空心边框的宽度

设置Paint的Style可以画出空心或者实心的矩形：

//空心效果paint.setStyle(Paint.Style.STROKE)//实心效果paint.setStyle(Paint.Style.FILL)

系统通过提供的Canvas对象来提供绘图方法：

//绘制点canvas.drawPoint(x, y, paint)//绘制直线canvas.drawLine(startX, startY ,endX, endY, paint)//绘制多条直线canvas.drawLines(new float[]{startX1, startY1, endX1, endY1,……,startXn, startYn, endXn, endYn}, paint)//绘制矩形canvas.drawRect(left, top, right, bottom, paint)//绘制圆角矩形canvas.drawRoundRect(left, top, right, bottom, radiusX, radiusY, paint)//绘制圆canvas.drawCircle(circleX, circleY, radius, paint)//绘制椭圆canvas.drawOval(left, top, right, bottom, paint)//绘制文本canvas.drawText(text, startX, startY, paint)//在指定位置绘制文本canvas.drawPosText(text, new float[]{X1,Y1,X2,Y2,……Xn,Yn}, paint)//绘制路径Path path = new Path();path.moveTo(50, 50);path.lineTo(100, 100);path.lineTo(100, 300);path.lineTo(300, 50);canvas.drawPath(path, paint)//绘制扇形paint.setStyle(Paint.Style.STROKE);drawArc(left, top, right,bottom, startAngle, sweepAngle, true, paint)//绘制弧形paint.setStyle(Paint.Style.STROKE);drawArc(left, top, right,bottom, startAngle, sweepAngle, false, paint)//绘制实心扇形paint.setStyle(Paint.Style.FILL);drawArc(left, top, right,bottom, startAngle, sweepAngle, true, paint)//绘制实心弧形paint.setStyle(Paint.Style.FILL);drawArc(left, top, right,bottom, startAngle, sweepAngle, false, paint)

Android XML绘图

XML在Android系统中可不仅仅是Java中的一个布局文件、配置列表。Android的提供了几个强大的技能来帮助我们实现这一功能。

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>

Shape

通过Shape可以在XML中绘制各种形状，下面展示的是Shape所支持的参数

<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    //默认为rectangle    android:shape=["rectangle" | "oval" | "line" | "ring"] >    <corners   //当shape="rectangle"时使用        //半径，会被后面的单个半径属性覆盖，默认为1dp        android:radius="integer"        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>

下面通过渐变来实现的阴影效果，代码如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient        android:startColor="#FF5DA2FF"         android:endColor="#805FBBFF"        android:angle="45"        />    <padding        android:bottom="7dp"        android:left="7dp"        android:right="7dp"        android:top="7dp" />    <corners android:radius="8dp" /></shape>

Layer

Layer可以实现类似Photoshop中图层的功能

<?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:drawable="@mipmap/ic_launcher"        android:left="10dp"        android:top="10dp"        android:right="10dp"        android:bottom="10dp"        /></layer-list>

Selector

Selector的作用在于帮助开发者实现静态绘图中的事件反馈，通过给不同的事件设置不同的图像，从而在程序中根据用户输入，返回不同的效果

<?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>

下面这个例子展示了在Selector中使用Shaper作为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" />            <!--设置按钮的四个角为弧形-->            <!--android:radius 弧形的半径-->            <corners android:radius="5dp" />            <!--padding：Button里面的文字与Button边界的间隔-->            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape>    </item>    <item>        <shape android:shape="rectangle">            <!--填充的颜色-->            <solid android:color="#FFFFFF" />            <!--设置按钮的四个角为弧形-->            <!--android:radius 弧形的半径-->            <corners android:radius="5dp" />            <!--padding：Button里面的文字与Button边界的间隔-->            <padding android:bottom="10dp"             android:left="10dp"             android:right="10dp"             android:top="10dp" />        </shape>    </item></selector>

代码下载