Android绘画技巧

1.2D绘图基础

package com.example.jian.myapplication.draw;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by jian on 2016/9/27.
 */
public class DrawTest extends View {

    private Paint mPaint;

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

    public DrawTest(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public DrawTest(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void init() {
        mPaint = new Paint();
        // 设置画笔的抗锯齿效果
        mPaint.setAntiAlias(true);
        // 设置画笔的颜色
        mPaint.setColor(Color.RED);
        // 设置画笔的A、R、G、B
        mPaint.setARGB(0, 0, 0, 0);
        // 设置画笔的Alpha值
        mPaint.setAlpha(20);
        // 设置字体的尺寸
        mPaint.setTextSize(20);
        // 设置画笔的风格 （实线）
        mPaint.setStyle(Paint.Style.STROKE);
        // 设置空心边框的宽度
        mPaint.setStrokeWidth(10);
    }

    private void initView() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        // 设置填充
//        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStyle(Paint.Style.STROKE);
        // 设置画笔的形状为圆形
//        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(10);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 画矩形
//        canvas.drawRect(10, 10, 210, 210, mPaint);

        // 画点
//        canvas.drawPoint(100, 100, mPaint);

        // 画线
//        canvas.drawLine(100, 100, 300, 200, mPaint);

        // 画多线 （四个参数一组）
//        float[] pts = {100, 100, 200, 200, 200, 200, 100, 300, 100, 300, 400, 400, 500, 500, 600, 600};
//        canvas.drawLines(pts, mPaint);

        // 画圆角矩形
//        canvas.drawRoundRect(100, 100, 300, 300, 20, 40, mPaint);

        // 画圆
//        canvas.drawCircle(500, 500, 200, mPaint);

        // 画弧形，扇形
        // 前四个参数，定义一个矩形区域，第五个参数，定义起始角度(0度为x轴的正方向,y轴正方形为-90或270)。
        // 第六个参数是决定是否要形成闭环（连接椭圆中心，形成闭环）
        // 根据paint的style是STROKE还是FILL来决定绘制是弧线还是扇形
//        canvas.drawArc(100, 200, 500, 300, -90, 135, true, mPaint);

        // 绘制椭圆
//        canvas.drawOval(100, 100, 500, 300, mPaint);

        // 绘制文本
//        mPaint.setTextSize(50);
//        // text是从矩形的左下角开始绘制的。而图形是从矩形区域的左上角开始绘制的
//        canvas.drawText("woca", 0, 50, mPaint);

        // 在指定位置绘制文本
//        mPaint.setTextSize(50);
//        canvas.drawPosText("And",
//                new float[]{100, 100, 150, 150, 200, 100, 250, 150, 300, 100, 500, 100},
//                mPaint);

        // 绘制路径
//        Path path = new Path();
//        path.moveTo(50, 50);
//        path.lineTo(100, 100);
//        path.lineTo(300, 200);
//        path.lineTo(500, 100);
//        canvas.drawPath(path, mPaint);

    }
}

2.XML绘图

<?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"></corners>-->

    <!--<gradient // 渐变
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type="["sweep"|"linear"|"radial"]"
        android:useLevel=["true"|"false"]></gradient>-->

    <!--<padding
        android:bottom="integer"
        android:left="interger"
        android:right="integer"
        android:top="integer"></padding>-->

    <!--<size // 指定大小，一般用在imageview配合scaleType属性使用  
        android:width="integer"
        android:height="integer"></size>-->

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

    <!--<stroke // 指定边框
        android:color="color"
        android:width="integer"
        // 虚线宽度
        android:dashWidth="integer"
        // 虚线间隔宽度
        android:dashGap="integer">
    </stroke>-->

</shape>

3.自定义仪表盘

package com.example.jian.myapplication.draw;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by jian on 2016/9/27.
 */
public class ClockView extends View {

    private int mWidth, mHeight;

    public ClockView(Context context) {
        super(context);
    }

    public ClockView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);
    }

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

        // 画外圆
        Paint paintCircle = new Paint();
        paintCircle.setStyle(Paint.Style.STROKE);
        paintCircle.setAntiAlias(true);
        paintCircle.setStrokeWidth(5);
        canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, paintCircle);

        // 画刻度
        Paint paintDegree = new Paint();
        paintDegree.setStrokeWidth(3);
        for (int i = 0; i < 24; i++) {
            // 获得数值
            String degree = String.valueOf(i);
            if (i == 0 || i == 6 || i == 12 || i == 18) {
                paintDegree.setStrokeWidth(5);
                paintDegree.setTextSize(30);
                canvas.drawLine(
                        mWidth / 2,
                        mHeight / 2 - mWidth / 2,
                        mWidth / 2,
                        mHeight / 2 - mWidth / 2 + 60,
                        paintDegree);
                canvas.drawText(degree, mWidth / 2 - 10, mHeight / 2 - mWidth / 2 + 90, paintDegree);
            } else {
                paintDegree.setStrokeWidth(3);
                paintDegree.setTextSize(15);
                canvas.drawLine(
                        mWidth / 2,
                        mHeight / 2 - mWidth / 2,
                        mWidth / 2,
                        mHeight / 2 - mWidth / 2 + 30,
                        paintDegree);
                canvas.drawText(degree, mWidth / 2 - 5, mHeight / 2 - mWidth / 2 + 60, paintDegree);
            }
            // 通过旋转画布来简化坐标运算
            canvas.rotate(15, mWidth / 2, mHeight / 2);
        }

        // 画圆心
        Paint paintPointer = new Paint();
        paintPointer.setStrokeWidth(30);
        canvas.drawPoint(mWidth / 2, mHeight / 2, paintPointer);
        // 画指针
        Paint paintHour = new Paint();
        paintHour.setStrokeWidth(20);
        Paint paintMinute = new Paint();
        paintMinute.setStrokeWidth(10);
        canvas.save();
        canvas.translate(mWidth / 2, mHeight / 2);
        canvas.drawLine(0, 0, 100, 100, paintHour);
        canvas.drawLine(0, 0, 100, 200, paintMinute);
        canvas.restore();
    }
}

4.Shape画圆

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

    <solid android:color="#000000"/>
    <corners android:radius="@dimen/dp_6"/>
    <size
        android:width="@dimen/dp_12"
        android:height="@dimen/dp_12"></size>

</shape>

5.Shape画圆角矩形

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

    <solid android:color="#fffd54"/>
    <size
        android:width="@dimen/dp_24"
        android:height="@dimen/dp_12"/>
    <corners android:radius="@dimen/dp_6"/>

</shape>