画板——滑动条，进度条，横竖屏切换

画板

本文要点

横竖屏的切换
系统滑动条控件（SeekBar）
自定义滑动条，进度条

要点详解

横竖屏的切换
1.1 配置⽂件 screenOrientation:

常见参数：
sensor: 感应屏幕的⽅向随着屏幕的⽅向变化⽽变化
portrait: 不会旋转
landscape: 横屏固定
sensorLandscape: 感应地横向切换

配置文件设置横竖屏

1.2 代码设置

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);

系统滑动条控件（SeekBar）

常见参数：
background：控件背景颜色
progressTint：进度条颜色
progressBackgroundTint：进度条背景颜色
thumbTint：拇指颜色
max：最大数值

xml配置

        <SeekBar
            android:id="@+id/slider"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#666"
            android:progressTint="#000"
            android:progressBackgroundTint="#f00"
            android:thumbTint="#fff"
            android:max="100"/>

MainActivity代码配置

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       SeekBar slider=findViewById(R.id.slider);
        //关键帧动画
        //补间动画：旋转 平移 缩放 渐变
        //属性动画：ObjectAnimator
                  //ValueAnimator 在给定值区间动画
                  //ViewPropertyAnimator animator().动画 快速动画
        slider.animate().rotation(90);
        //监听滑动条的滑动事件
        slider.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                //进度值改变
                System.out.println("change");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //监听已经开始拖拽
                System.out.println("start");
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //停止拖拽 手放开
                System.out.println("stop");
            }
        });
    }

    }

    @Override
    protected void onResume() {
        super.onResume();

        //设置横竖屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
    }

SeekBar

自定义滑动条，进度条

实现：
1.进度条
2.滑动条
3.横竖切换

3.1 创建Slider Class,继承View并实现方法

创建Slider

3.2 xml对控件布局

<swu.xujiangtao.day_11drawtop.Slider
            android:id="@+id/slider"
            android:layout_width="20dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:layout_marginRight="20dp"/>

3.3 Slider详细代码

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 PROGERSS=0;//进度条
    public static int SLIDER=1;//滑动条
    private int style=PROGERSS;//默认样式

    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(float progress) {
        this.progress = progress;
        if (progress<0.001) {
            //将进度值转化为控件中的尺寸位置
            if (getWidth() > getHeight()) {
                position = progress * getWidth();
            } else {
                position = progress * getHeight();
            }
        }
        invalidate();
    }

    public int getMax() {
        return max;
    }

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

    public interface OnSliderChangeListener{
        void progressChanged(float progress);
    }

3.4 MainActivity代码调用

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);
//        new Timer().schedule(new TimerTask() {
//            @Override
//            public void run() {
//                slider.setProgress(
//                        (float) (slider.getProgress()+0.01));
//            }
//        },0,100);

        slider.setMax(50);
        slider.setStyle(Slider.SLIDER);

        slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
            @Override
            public void progressChanged(float progress) {
                System.out.println(""+progress);
            }
        });

    }

    @Override
    protected void onResume() {
        super.onResume();

        //设置横竖屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
    }

滑动条的功能是调节画笔的大小，本期内容结束，下期将实现画板的其他功能：更换画笔颜色，撤销，清除，保存等。

画板（1）

画板（1）

画板——滑动条，进度条，横竖屏切换

本文要点

要点详解