Menerapkan penggeser (SeekBar) di Android

Question

Lebih

Question

Menerapkan penggeser (SeekBar) di Android

Saya ingin mengimplementasikan slider, yang pada dasarnya adalah dua garis, satu vertikal dan satu horisontal, melintasi tempat layar disentuh. Saya telah berhasil membuatnya, tetapi saya memiliki masalah:

Slider tidak terlalu mulus, ada sedikit penundaan ketika saya menggerakkan jari
Jika saya menempatkan dua slider, itu bukan multitouch, dan saya ingin menggunakan keduanya secara bersamaan.

Ini kodenya:

public class Slider extends View {

    private Controller controller = new Controller();
    private boolean initialisedSlider;
    private int sliderWidth, sliderHeight;
    private Point pointStart;
    private Paint white;
    private int mode;

    final static int VERTICAL = 0, HORIZONTAL = 1, BOTH = 2;

    public Slider(Context context) {
        super(context);
        setFocusable(true);    
        // TODO Auto-generated constructor stub
    }
    public Slider(Context context, AttributeSet attrs) {
        super(context, attrs);     
        setFocusable(true);    
        pointStart = new Point();
        initialisedSlider = false;   
        mode = Slider.BOTH;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(!initialisedSlider) {
            initialisedSlider = true;
            sliderWidth = getMeasuredWidth();
            sliderHeight = getMeasuredHeight();

            pointStart.x = (int)(sliderWidth/2.0);
            pointStart.y = (int)(sliderHeight/2.0);
            controller = new Controller(pointStart, 3);

            white = new Paint();
            white.setColor(0xFFFFFFFF);
        }

        canvas.drawLine(controller.getCoordX(),0,
                        controller.getCoordX(),sliderHeight, 
                        white);
        canvas.drawLine(0, controller.getCoordY(), 
                        sliderWidth, controller.getCoordY(), 
                        white);

    }

    public boolean onTouchEvent(MotionEvent event) {
        int eventaction = event.getAction();     
        int X = (int)event.getX(); 
        int Y = (int)event.getY(); 
        switch (eventaction) { 
        case MotionEvent.ACTION_DOWN:
            if(isInBounds(X,Y)) {
                updateController(X, Y);
            }
            break;
        case MotionEvent.ACTION_MOVE:
            if(isInBounds(X,Y)) {
                updateController(X, Y);
            }
            break;
        case MotionEvent.ACTION_UP:
            if(isInBounds(X,Y)) {
                updateController(X, Y);
            }
            break;
        }
        invalidate();  
        return true; 
    }

    private boolean isInBounds(int x, int y) {
        return ((x<=(sliderWidth)) && (x>=(0)) 
                 && (y<=(sliderHeight)) && (y>=(0)));
    }
    private void updateController(int x, int y) {
        switch(mode) {
        case Slider.HORIZONTAL:
            controller.setCoordX(x);
            break;
        case Slider.VERTICAL:
            controller.setCoordY(y);
            break;
        case Slider.BOTH:
            controller.setCoordX(x);
            controller.setCoordY(y);
            break;
        }
    }

    private class Controller {
        private int coordX, coordY;
        Controller() {

        }
        Controller(Point point, int width) {
            setCoordX(point.x);
            setCoordY(point.y);
        }
        public void setCoordX(int coordX) {
            this.coordX = coordX;
        }
        public int getCoordX() {
            return coordX;
        }
        public void setCoordY(int coordY) {
            this.coordY = coordY;
        }
        public int getCoordY() {
            return coordY;
        }
    }
}

Dan file XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <com.android.lasttest.Slider 
        android:id="@+id/slider"
        android:layout_width="100dp" 
        android:layout_height="100dp" 
        android:layout_gravity="center_horizontal" 
        android:adjustViewBounds="true"/>
    <com.android.lasttest.Slider 
        android:id="@+id/slider"
        android:layout_width="150dp" 
        android:layout_height="150dp" 
        android:layout_gravity="center_horizontal" 
        android:adjustViewBounds="true"/>
    <com.android.lasttest.Slider 
        android:id="@+id/slider"
        android:layout_width="200dp" 
        android:layout_height="200dp" 
        android:layout_gravity="center_horizontal" 
        android:adjustViewBounds="true"/>

</LinearLayout>

Suragch

Pertanyaan edit 14 Oktober 2017 в 5:39

Pemrograman

android

slider

touch

seekbar

Solution / Answer

Suragch

14 Oktober 2017 в 5:38

Lebih

Cara mengimplementasikan SeekBar

Tambahkan SeekBar ke tata letak Anda

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <SeekBar
        android:id="@+id/seekBar"
        android:max="100"
        android:progress="50"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

Catatan

max adalah nilai tertinggi yang bisa dicapai oleh seek bar. Standarnya adalah 100. Minimumnya adalah 0. Nilai xml min hanya tersedia dari API 26, tetapi Anda dapat secara terprogram mengkonversi rentang 0-100 ke apa pun yang Anda butuhkan untuk versi sebelumnya.
progress adalah posisi awal dari titik slider (disebut "thumb").
Untuk SeekBar vertikal gunakan android:rotation="270".

Dengarkan perubahan dalam kode

public class MainActivity extends AppCompatActivity {

    TextView tvProgressLabel;

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

        // set a change listener on the SeekBar
        SeekBar seekBar = findViewById(R.id.seekBar);
        seekBar.setOnSeekBarChangeListener(seekBarChangeListener);

        int progress = seekBar.getProgress();
        tvProgressLabel = findViewById(R.id.textView);
        tvProgressLabel.setText("Progress: " + progress);
    }

    SeekBar.OnSeekBarChangeListener seekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            // updated continuously as the user slides the thumb
            tvProgressLabel.setText("Progress: " + progress);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            // called when the user first touches the SeekBar
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            // called after the user finishes moving the SeekBar
        }
    };
}

Catatan

Jika anda tidak perlu melakukan update apapun saat pengguna menggerakkan seekbar, maka anda bisa memperbarui UI di onStopTrackingTouch.

Lihat juga

Tutorial SeekBar Dengan Contoh Di Android Studio

Suragch

Jawaban edit 14 Oktober 2017 в 5:47

16

0

user158

22 Oktober 2019 в 10:24

Lebih

Untuk pembaca di masa mendatang!

Mulai dari komponen material android 1.2.0-alpha01, Anda memiliki komponen slider

ex:

<com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:valueFrom="20f"
        android:valueTo="70f"
        android:stepSize="10" />