前期知识
横竖屏的切换
1.配置文件：
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文件
创建画板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 graphs;//操作数组
private ArrayList 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 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();
}
}