前期知识

横竖屏的切换
1.配置文件：

    <!-- 设置传感器横屏：screenOrientation="sensor" -->
      <activity android:name=".MainActivity"
            android:screenOrientation="sensor">

screenOrientation的常用参数
sensor : 感应屏幕方向
portrait : 不会旋转
landscape : 横屏 固定
sensorLandscape : 感应横屏

2.代码配置：

@Override
    protected void onResume() {
        super.onResume();
        //设置横竖屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR);
    }

自定义slider

支持横竖屏显示
自定义小圆点
小圆点跟着滑动
自定义进度条
改变进度条
slider实现数据回调

slider.java文件

package com.example.a16_drawboard;

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

public class Slider extends View {
    private int lineSize = 6; //线条的粗细
    private int lineColor = Color.BLACK;//默认线条颜⾊
    private Paint linePaint;
    private Paint circlePaint; //⼩圆点的画笔
    private int thumbColor = Color.MAGENTA; //⼩圆点的颜⾊
    private int cx; //中⼼点x
    private int cy; //中⼼点y
    private int radius; //⼩圆点半径
    private int thumbScale = 4; //⼩圆点缩放尺⼨基数
    private float position; //记录触摸点的坐标
    private Paint progressPaint; //进度条进度的画笔
    private int progressColor = Color.MAGENTA;//颜⾊
    public static int PROGRESS = 0;//进度条
    public static int SLIDER = 1;//滑动条
    private int style = PROGRESS; //样式
    public int max = 100; //最⼤值
    public float progress; //进度值
    //滑动改变的监听者
    private OnSliderChangeListener onSliderChangeListener;
    public Slider(Context context) {
        super(context);
    }
    public Slider(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    private void init(){
        //背景线
        linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        linePaint.setColor(lineColor);
        linePaint.setStrokeWidth(lineSize);
        //⼩圆点
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(thumbColor);
        circlePaint.setStyle(Paint.Style.FILL);
        //进图条
        progressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        progressPaint.setColor(progressColor);
        progressPaint.setStrokeWidth(lineSize);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        if (getWidth() > getHeight()){
            //横着
            //画背景条
            canvas.drawLine(0, getHeight()/2, getWidth(), getHeight()/2, linePaint);
            if (position > 0) {
                //画进度条
                canvas.drawLine(0, getHeight() / 2, position, getHeight() / 2, progressPaint);
            }
            radius = getHeight()/thumbScale;
            cy = getHeight()/2;
            //确定cx的值
            if (position < radius){
                cx = radius;
            }else if (position > getWidth()-radius){
                cx = getWidth()-radius;
            }else{
                cx = (int) position;
            }
        }else{
            //竖着
            canvas.drawLine(getWidth()/2, 0, getWidth()/2, getHeight(), linePaint);

            if (position > 0){
                canvas.drawLine(getWidth()/2, 0, getWidth()/2, position, progressPaint);

            }
            radius = getWidth()/thumbScale;
            cx = getWidth()/2;
            //确定中⼼点cy的值
            if (position < radius){
                cy = radius;
            }else if(position > getHeight()-radius){
                cy = getHeight()-radius;

            }else{
                cy = (int) position;
            }
        }
        //画⼩圆点
        if (style == SLIDER) {
            canvas.drawCircle(cx, cy, radius, circlePaint);
        }
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //⼩圆点放⼤
                thumbScale = 2;
                if (getWidth() > getHeight()){
                    //横向时 y不变 x改变
                    position = event.getX();
                }else{
                    //竖着时 x不变 y改变
                    position = event.getY();
                }
                callback();
                break;
            case MotionEvent.ACTION_MOVE:
                //获取当前触摸点的值 X Y
                if (getWidth() > getHeight()){
                    //横向时 y不变 x改变
                    position = event.getX();
                    if (position <0){
                        position = 0;
                    } else if (position > getWidth()){
                        position = getWidth();
                    }
                }else{
                    //竖着时 x不变 y改变
                    position = event.getY();
                    if (position <0){
                        position = 0;
                    } else if (position > getHeight()){
                        position = getHeight();
                    }
                }
                callback();
                break;
            case MotionEvent.ACTION_UP:
                thumbScale = 4;
                break;
        }
        if (style == SLIDER) {
            invalidate();
        }
        return true;
    }
    private void callback(){
        if (onSliderChangeListener != null){
            if (getWidth() > getHeight()) {
                progress = position / getWidth();
            }else{
                progress = position / getHeight();
            }
            onSliderChangeListener.
                    progressChanged(progress*max);
        }
    }
    public int getStyle() {
        return style;
    }
    public void setStyle(int style) {
        this.style = style;
    }
    public float getProgress() {
        return progress;
    }
    public void setProgress(int progress){
        //计算比例
        this.progress = (float) (progress*1.0 / max);

        setProgress(this.progress);
    }
    public void setProgress(float progress) {
        this.progress = progress;

        if (progress < 1.001) {
            //将进度值 转化为控件中的尺⼨位置
            //0.5 500 250
            if (getWidth() > getHeight()) {
                position = progress * getWidth();
            } else {
                position = progress * getHeight();
            }
            invalidate();
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        if (getWidth() > getHeight()) {
            position = progress * getWidth();//横着
        } else {
            position = progress * getHeight();//竖着
        }
    }

    public void setMax(int max) {
        this.max = max;
    }
    public interface OnSliderChangeListener{
        void progressChanged(float progress);
    }
    public void setOnSliderChangeListener(OnSliderChangeListener
                                                  onSliderChangeListener) {
        this.onSliderChangeListener = onSliderChangeListener;
    }
}

界面布局

使用ConstraintLayout布局
要确定宽度、高度、左右、上下
android:layout_width=" "
android:layout_height=" "
android:layout_marginLeft=" "
android:layout_marginTop=" "
android:layout_marginBottom=" "
app:layout_constraintLeft_toLeftOf="parent"

activity.xml文件

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/operation"
        app:layout_constraintTop_toTopOf="parent"
        android:orientation="horizontal">

        <!--滑动条-->
        <com.example.a16_drawboard.Slider
            android:id="@+id/slider"
            android:layout_width="20dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            app:layout_constraintLeft_toLeftOf="parent"
            />

        <!--画板-->
        <com.example.a16_drawboard.DrawBoardView
            android:id="@+id/board"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintLeft_toRightOf="@id/slider"
            app:layout_constraintRight_toLeftOf="@id/color"/>

        <!--选颜色-->
        <LinearLayout
            android:id="@+id/color"
            android:layout_width="40dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_marginRight="5dp"
            app:layout_constraintRight_toRightOf="parent">

            <!--添加颜色按钮-->
            <Button
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="#000"
                android:onClick="choicColor"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="#0000FF"
                android:onClick="choicColor"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="#FFFF00"
                android:onClick="choicColor"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="#f00"
                android:onClick="choicColor"/>

        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@+id/operation"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:background="#E8E8E8"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent">

        <!--操作按钮-->
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="撤销"
            android:onClick="goBack"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="清空"
            android:onClick="cleat"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="橡皮擦"
            android:onClick="eraser"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="上一步"
            android:onClick="lastStep"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="保存"
            android:onClick="save"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

创建画板DrawBoard

清空操作
上一步操作
撤销操作
保存操作

DrawBoardView.java文件

package com.example.a16_drawboard;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.ArrayList;
import java.util.Iterator;

public class DrawBoardView extends View {

    private ArrayList<Graph> graphs;//操作数组
    private ArrayList<Graph> orginalGraphs;//原始数组

    private int lineColor = Color.BLACK;//画笔默认颜色
    private int lineSize = 5;//画笔默认大小

    Path mPath;

    public DrawBoardView(Context context) {
        super(context);
        init();
    }

    public DrawBoardView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /**
     * 初始化
     */
    private void init(){
        //初始化数组
        graphs = new ArrayList<>();
        orginalGraphs = new ArrayList<>();
        // 设置背景设
        setBackgroundColor(Color.WHITE);
    }

    /**
     * 开始画
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        // 遍历数组
        // 得到每个数组的遍历器
        Iterator<Graph> iterator = graphs.iterator();
        // 循环遍历 取出数据
        while (iterator.hasNext()){
            // 从集合中获取一个图对象
            Graph line = iterator.next();
            //绘制图像
            canvas.drawPath(line.path, line.paint);
        }
        //canvas.drawPath(mPath, mPain);
    }

    /**
     * 接受触摸
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //创建当前这条线对应的paint和path
                Paint mPain = new Paint(Paint.ANTI_ALIAS_FLAG);
                mPain.setColor(lineColor);
                mPain.setStrokeWidth(lineSize);
                mPain.setStyle(Paint.Style.STROKE);
                mPain.setStrokeCap(Paint.Cap.ROUND);//末端圆

                mPath = new Path();

                //设置起点 就是触摸点
                mPath.moveTo(event.getX(),event.getY());

                //保存当前这个图像的详细信息
                Graph temp = new Graph(mPain, mPath);
                graphs.add(temp);
                orginalGraphs.add(temp);

                break;
            case MotionEvent.ACTION_MOVE:
                //链接path路径 从path的终点到触摸点连成一条线
                mPath.lineTo(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        //每一次触摸之后画上去
        invalidate();
        return true;
    }

    /**
     * 封装起来,创建私有类，来管理画笔和路径
     */
    private class Graph{
        Paint paint;
        Path path;

        private Graph(Paint paint, Path path){
            this.paint = paint;
            this.path = path;
        }
    }

    /**
     * 撤销 删除数组最后一个图像
     */
    public void removeLast(){
        if (graphs.size() > 0){
            graphs.remove(graphs.size() - 1);
            invalidate();
        }
    }
    /**
     * 清空 删除数组所有图像
     */
    public void removeAll(){
        graphs.clear();
        invalidate();
    }
    /**
     * 还原 返回上一步
     */
    public void returnToLastStep(){
        // 判断缓存中是否有
        if(graphs.size() < orginalGraphs.size()){
            // 获取上一步的索引值
            int index = graphs.size() - 1 + 1;
            // 从原始里面取index 添加到操作数组中
            graphs.add(orginalGraphs.get(index));
            invalidate();
        }
    }
    /**
     * 橡皮擦
     */

    /**
     * 提供set get方法 来设置画笔颜色和大小
     * @return
     */
    public int getLineColor() {
        return lineColor;
    }

    public void setLineColor(int lineColor) {
        this.lineColor = lineColor;

    }

    public int getLineSize() {
        return lineSize;
    }

    public void setLineSize(int lineSize) {
        this.lineSize = lineSize;
    }
}

main.java文件

package com.example.a16_drawboard;

import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private DrawBoardView boardView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 获取画板对象
        boardView = findViewById(R.id.board);
        //获取滑动条对象
        final Slider slider = findViewById(R.id.slider);
        slider.setMax(30);// 设置进度条的滑动区间
        slider.setStyle(Slider.SLIDER);
         /*
         new Timer().schedule(new TimerTask() {
         @Override
         public void run() {
         slider.setProgress(
         (float) (slider.getProgress()+0.01));
         }
         },0,100);
         */
        slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
            @Override
            public void progressChanged(float progress) {
                //将滑动条的进度值设置为 线条的宽度
                boardView.setLineSize((int) progress);
            }
        });


    }
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
    }
    @Override
    protected void onStart() {
        super.onStart();
    }
    @Override
    protected void onResume() {
        super.onResume();
        //设置横竖屏
        setRequestedOrientation(
                ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR);
    }

    /**
     * 设置按钮响应事件
     * 选择颜色
     * @param view
     */
    public void choicColor(View view) {
        // 获取按钮上的颜色
        ColorDrawable drawable = (ColorDrawable) view.getBackground();

        // 获取颜色
        boardView.setLineColor(drawable.getColor());
    }
    /**
     * 撤销
     */
    public void goBack(View view) {
        boardView.removeLast();
    }

    /**
     * 清空
     * @param view
     */
    public void cleat(View view) {
        boardView.removeAll();
    }

    /**
     * 橡皮擦
     * @param view
     */
    public void eraser(View view) {
        // 获取画板背景色
        ColorDrawable drawable = (ColorDrawable) boardView.getBackground();
        // 设置线条的颜色和背景色相同
        if (drawable != null){
            boardView.setLineColor(drawable.getColor());
        }else {
            boardView.setLineColor(Color.TRANSPARENT);
        }

    }

    /**
     * 保存
     * @param view
     */
    public void save(View view) {
    }

    /**
     * 还原上一步
     * @param view
     */
    public void lastStep(View view) {
        boardView.returnToLastStep();
    }
}