画板1.0

一、目的

写代码实现一个画板效果。

开心猿刻

二、知识点

一、横竖屏切换设置：

1.配置文件：

screenOrientation=	意义
"sensor"	随着屏幕的方向变化而变化
"portrait"	竖屏锁定
"landscape"	锁定横屏（一个方向)sensorLandscape 2个方向

2.代码设置：onResume里设置

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_FULLSENSOR);

二、自适应布局

整体：ConstraintLayout约束布局：要约束确定的宽高，xy
部件：LinearLayout

三、自定义滑动条Slider

1.进度条;没有thumb小圆点，不接收触摸
2.滑动条：有小圆点，接收触摸
1.当触摸时小圆点放大
2.监听滑动事件
3.横竖切换：width>height横着 width>height 竖着

创建Slider extends View
1.添加约束

进度条背景

变量

初始化和onDrow

纵、横向效果

进度条小圆点

函数

实现效果

四、滑动

变量、函数

解决：点哪不动哪

画进度条

滑动实现效果

五、外部

样式：进度条 or 滑动条选择

样式

样式的set、get方法

进度值的交互及在MainActivity里的模拟及max值的设置

交互-进度

交互-max值

六、数据回调

接口.png

监听.png

callback的实现和调用和进度条外部问题优化.png

改正：MotionEvent.ACTION_DOWN处不需要条件的判断

三、实际应用

今日实现的最终效果：

11.12的最终效果.png

完整代码：
activity_main.xml:

---

Slider.java(自己创的一个Class用来自定义滑动条的）：有点多，别怕

package com.example.a16palette;

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;

import androidx.annotation.Nullable;

public class Slider extends View {
    private int lineSize = 4;//线的粗细
    private Paint linePaint;//线画笔
    private int lineColor = Color.GRAY;//默认线颜色灰色

    private int centerX;//中心点x
    private int centerY;//中心点y
    private int radius;//小圆点的半径
    private Paint circlePaint;//画圆的画笔
    private int thumbColor = Color.MAGENTA;//圆点的颜色

    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;//设置最大值 默认100
    public float progress;//进度值

    private OnSliderChangeListener onSliderChangeListener;//滑动改变的监听者

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

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

    private void init(){
//        setBackgroundColor(Color.BLACK);
        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);//进度条打底
            canvas.drawLine(0,getHeight()/2,position,getHeight()/2,progressPaint);//进度条
            radius = getHeight()/thumbScale;
            //X的变化
            if (position < radius){
            centerX = radius;
            }else if (position > getWidth() - radius){
                centerX = getWidth() - radius;
            }
            else {
                centerX = (int) position;
            }
            centerY = getHeight()/2;
//            centerY =getPivotY();

        }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;
            centerX = getWidth()/2;
            //Y的变化
            if (position < radius){
                centerY = radius;
            }else if (position > getHeight() - radius){
                centerY = getHeight() - radius;
            }else {
                centerY = (int) position;
            }
        }
//        //画进度条
//        canvas.drawLine();
        //画小圆点
        if (style == SLIDER) {
            canvas.drawCircle(centerX, centerY, radius, circlePaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //小圆点放大
                thumbScale = 2;
                if(getHeight() getWidth()) position =getWidth();
                }else {
                    //竖 Y变化
                    position = event.getY();
                    if(position < 0) position =0;
                    else  if(position > getHeight()) position =getHeight();
                }
                callback();
                break;
            case MotionEvent.ACTION_MOVE:
                //获取当前触摸点的值 XorY
                if(getHeight() getWidth()) position =getWidth();
                }else {
                    //竖 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){
//            onSliderChangeListener.progressChanged(progress * max);//和position/getWidth(横)getHeight(竖)
                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(float progress) {
        this.progress = progress;
        if (progress < 1.0001) {
            //将进度值转换为控件中的尺寸位置
            if (getWidth() > getHeight()) {//横
                position = progress * getWidth();
            } else position = progress * getHeight();
            invalidate();//
        }
    }

    public void setMax(int max) {
        this.max = max;
    }

    public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
        this.onSliderChangeListener = onSliderChangeListener;
    }

    //实现回调数据给外部
    public interface OnSliderChangeListener{
        void progressChanged(float progress);
    }
}

---

MainActivity.java:

package com.example.a16palette;

import androidx.appcompat.app.AppCompatActivity;

import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.widget.SeekBar;

import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Slider slider = findViewById(R.id.slider);
        slider.setMax(50);
        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) {
                System.out.println(""+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);
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override
    protected void onStop() {
        super.onStop();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }
}

四、心得

学了这么久，唯一很明显的变化就是现在打代码的速度快了不少，但是要让自己变思考边自己写还是不太行，希望不久我的手速赶不上想的速度。