目的

完成画板demo的前期步骤

相关技术、及其使用

xml配置文件：创建SeekBar比较简单，但是不足之处在于当实现横屏的时候就比较麻烦
代码创建：代码创建SeekBar比较简单，能够很好地实现横竖屏切换。

2、创建Slider类继承于View
初始化线条，小圆点，进度条的画笔：

   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);
    }

3、调用onDraw 方法进行横竖屏的画图

 protected void onDraw(Canvas canvas) {
        //canvas 画布
        if(getWidth() > getHeight()){
            //横着
            canvas.drawLine(0,getHeight()/2,getWidth(),getHeight()/2,linePaint);
            if(position > 0){
                //画进度条背景
                canvas.drawLine(0,getHeight()/2,getWidth(),getHeight()/2,progressPaint);
            }
            cy = getHeight()/2 ;
            radius = getHeight()/thumbScale;
            //确定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);
            }
            cx = getWidth()/2;
            radius = getWidth()/thumbScale;
            //确定中点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);
        }
    }

4、通过onTouchEvent方法来实现进度条随着触摸位置的改变：

  public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //小圆点放大
                thumbScale = 2;
                if(getWidth() > getHeight()){
                    //横着 getWidth 表示得到LinearLayout的大小   y不变 x 改变
                    position = event.getX();
                }else {
                    //竖着  x 不变 y 改变
                    position = event.getY();
                    if(position < 0){
                        position=0;
                    }else if(position > getHeight()){
                        position = getHeight();
                    }
                }
                callBake();
                 break;
            case MotionEvent.ACTION_MOVE:
                //横竖两种情况
                //获取当前触摸点的值 x y
                if(getWidth() > getHeight()){
                    //横着 getWidth 表示得到LinearLayout的大小   y不变 x 改变
                    position = event.getX();
                }else {
                    //竖着  x 不变 y 改变
                    position = event.getY();
                    if(position < 0){
                        position=0;
                    }else if(position > getHeight()){
                        position = getHeight();
                    }
                }
                callBake();
                 break;
            case MotionEvent.ACTION_UP:
                thumbScale = 4;
                 break;
        }
        if(style == SLIDER){
            //重新绘制
            invalidate();
        }
        return true;
    }

5、写一个获取进度值的方法callback（）：

 private void callBake(){
        if(onSliderChangeListener != null){
            if(getWidth() > getHeight()){
                progress = position / getWidth();
            }else {
                progress = position / getHeight();
            }
            onSliderChangeListener.progressChanged(progress*max);
        }
    }

6、定义接口和监听器来监听Slider改变值：

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

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

PS

今天画板的前期布局主要是进度条的代码设置，进一步的学习了通过代码画图Paint。