在上一次滑动条和进度条的基础上完成了基础画板的demo
1.xml配置(实现界面按钮的布局)
2.Slider extends View
1.创建几个画笔
image.png
2.初始化设置
image.png
3.onDraw实现画
image.png
4.添加触摸事件
image.png
5.实现回调
image.png
6.详细代码
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;
}
public int getStyle() {
return style;
}
public void setStyle(int style) {
this.style = style;
}
public float getProgress() {
return progress;
}
public void setProgressColor(int progress){
//计算比例
this. progress= (float) (progress*1.0/max);
setProgress(this.progress);
}
public void setProgress(float progress) {
this.progress = progress;
if(progress< 1.001){
//将进度条 转化为控件中的尺寸位置
if(getWidth()>getHeight()){
position=progress*getWidth();
}else{
position=progress*getHeight();
}
invalidate();
}
}
public void setMax(int max){
this .max=max;
}
@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 interface OnSliderChangeListener{
//通过这个方法回调数据
void progressChanged(float progress);
}
private void callback(){
if(onSliderChangeListener!=null){
if(getWidth()>getHeight()){
progress= position/getWidth() ;
}else{
progress=position/getHeight();
}
onSliderChangeListener.progressChanged(progress*max);
}
}
public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
this.onSliderChangeListener = onSliderChangeListener;
}
}
3.MainActivity extends AppCompatActivity
1.实现按钮功能的方法
image.png
2详细代码
public class MainActivity extends AppCompatActivity {
private DrawBoardView drawBoardView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Slider slider=findViewById(R.id.slider);
slider.setMax(30);
slider.setStyle(Slider.SLIDER);
//获取画板视图对象
drawBoardView=findViewById(R.id.DrawBoard);
slider.setProgress(drawBoardView.getLineSize());
slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progressChanged(float progress) {
//滑动条的进度值设置为线条宽度
drawBoardView.setLineSize((int) progress);
}
});
/*
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) {
}
});
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
}
/**
* 自定义滑动条Slider
* 进度条;没有thumb小圆点 不接受触摸事件
* 滑动条：有thumb小圆点 接受触摸事件
* 1.当有触摸的时候小圆点放大
* 2.监听滑动事件
* 横竖切换;width>height 横着 width4.DrawBoardView extends View
public class DrawBoardView extends View {
private ArrayList graphs;
private ArrayListoriginalGraphs;//原始数组
private int LineColor= Color.BLACK;
private int LineSize=15;
Path mPath;
public DrawBoardView(Context context) {
super(context);
init();
}
public DrawBoardView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init(){
//初始化数组
graphs=new ArrayList<>();
originalGraphs=new ArrayList<>();
setBackgroundColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas) {
//遍历数组
Iterator iterator=graphs.iterator();
while (iterator.hasNext()){
//从集合中获取图形对象
Graph line = iterator.next();
//绘制图形
canvas.drawPath(line.path,line.paint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//创建当前这条线对应的Paint和Path
Paint mPaint= new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(LineColor);
mPaint.setStrokeWidth(LineSize);
mPaint.setStyle(Paint.Style.STROKE);
mPath=new Path();
//设置起点
mPath.moveTo(event.getX(),event.getY());
//保存当前这个图形的详细信息
graphs.add(new Graph(mPaint,mPath));
originalGraphs.add(new Graph(mPaint,mPath));
break;
case MotionEvent.ACTION_MOVE:
//连接从path终点到当前触摸点的线
mPath.lineTo(event.getX(),event.getY());
break;
case MotionEvent.ACTION_UP:
break;
}
invalidate();
return true;
}
//创建私有类来管理图形的画笔和路径
private class Graph{
Paint paint;
Path path;
public Graph(Paint paint,Path path){
this.paint=paint;
this.path=path;
}
}
public void setLineSize(int lineSize) {
this.LineSize = lineSize;
}
//删除最后一个图形 撤销
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()