畫板——滑動條盯荤，進度條，橫豎屏切換

畫板

本文要點

橫豎屏的切換
系統(tǒng)滑動條控件（SeekBar）
自定義滑動條焕盟，進度條

要點詳解

橫豎屏的切換
1.1 配置?件 screenOrientation:

常見參數(shù)：
sensor: 感應(yīng)屏幕的?向隨著屏幕的?向變化?變化
portrait: 不會旋轉(zhuǎn)
landscape: 橫屏固定
sensorLandscape: 感應(yīng)地橫向切換

配置文件設(shè)置橫豎屏

1.2 代碼設(shè)置

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);

系統(tǒng)滑動條控件（SeekBar）

常見參數(shù)：
background：控件背景顏色
progressTint：進度條顏色
progressBackgroundTint：進度條背景顏色
thumbTint：拇指顏色
max：最大數(shù)值

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);
        //關(guān)鍵幀動畫
        //補間動畫：旋轉(zhuǎn) 平移 縮放 漸變
        //屬性動畫：ObjectAnimator
                  //ValueAnimator 在給定值區(qū)間動畫
                  //ViewPropertyAnimator animator().動畫 快速動畫
        slider.animate().rotation(90);
        //監(jiān)聽滑動條的滑動事件
        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) {
                //監(jiān)聽已經(jīng)開始拖拽
                System.out.println("start");
            }

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

    }

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

        //設(shè)置橫豎屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
    }

SeekBar

自定義滑動條秋秤，進度條

實現(xiàn)：
1.進度條
2.滑動條
3.橫豎切換

3.1 創(chuàng)建Slider Class,繼承View并實現(xiàn)方法

創(chuàng)建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; //小圓點縮放尺寸基數(shù)
    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;//設(shè)置最大值
    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) {
            //將進度值轉(zhuǎn)化為控件中的尺寸位置
            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代碼調(diào)用

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

        //設(shè)置橫豎屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
    }

滑動條的功能是調(diào)節(jié)畫筆的大小，本期內(nèi)容結(jié)束脚翘，下期將實現(xiàn)畫板的其他功能：更換畫筆顏色灼卢，撤銷，清除来农，保存等鞋真。

畫板（1）

畫板（1）

畫板——滑動條盯荤，進度條，橫豎屏切換

本文要點

要點詳解