Tạo seekbar và kiến thức hữu ích về seekbar trong Android

5/5 - (1 vote)

Bạn cần sử dụng seekbar và gặp trục trặc 1 chút với nó thì có thể tham khảo bài viết này.

Kết quả mong muốn là hình bên trên, hình bên dưới là seekbar mặc định của Gôgle khi tạo

Để cho cái cục thumb kia ko bị mất một nửa thì chỉ cần thay đổi offset

Đưa seekbar vào view:

<ImageView
        android:id="@+id/sliderMin"
        app:layout_constraintBottom_toTopOf="@+id/guideline19"
        app:layout_constraintEnd_toStartOf="@+id/guideline24"
        app:layout_constraintTop_toTopOf="@+id/guideline26"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/slider_min" />

    <SeekBar
        android:id="@+id/thinSeekBar"
        app:layout_constraintBottom_toTopOf="@+id/guideline19"
        app:layout_constraintEnd_toStartOf="@+id/guideline25"
        app:layout_constraintStart_toEndOf="@+id/guideline24"
        app:layout_constraintTop_toTopOf="@+id/guideline26"
        android:layout_width="0dp"
        android:layout_height="20dp"
        android:paddingStart="0dp"
        android:paddingEnd="0dp"
        android:progress="50"
        android:thumb="@drawable/custom_thumb_seekbar"
        android:thumbOffset="0dp" />

    <ImageView
        android:id="@+id/sliderMax"
        app:layout_constraintBottom_toTopOf="@+id/guideline19"
        app:layout_constraintStart_toEndOf="@+id/guideline25"
        app:layout_constraintTop_toTopOf="@+id/guideline26"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/slider_max" />

File custom_thumb_seekbar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
<shape>


<solid android:color="@android:color/transparent" />
</shape>
</item>
<item
android:width="20dp"
android:height="20dp"
android:drawable="@drawable/position" />

</layer-list>
// giá trị mặc định cục thumb
android:progress="50"

// custom cái cục thumb
android:thumb="@drawable/custom_thumb_seekbar"

// reset 2 đầu cho bằng độ dài seekbar
android:paddingStart="0dp"
android:paddingEnd="0dp"

//không cho cục thumb thoát ra ngoài seekbar
android:thumbOffset="0dp"

// cái này làm constraintLayout thôi
app:layout_constraintBottom_toTopOf="@+id/guideline19"
app:layout_constraintEnd_toStartOf="@+id/guideline25"
app:layout_constraintStart_toEndOf="@+id/guideline24"
app:layout_constraintTop_toTopOf="@+id/guideline26"

Lắng nghe khi người dùng thay đổi giá trị trong Activity hoặc Fragment. Implement nó trước: public class ABCFragment extends Fragment implements SeekBar.OnSeekBarChangeListener

Sau đó nghe nó: thinSeekBar.setOnSeekBarChangeListener(this);

Cuối cùng ghi đè hàm onProgressChanged:

@Override

    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

        float converted = 1f + (progress - 50) / 100f;

    }

Cái tham số fromUser rất hữu ích vì cái seekbar có thể do người dùng họ thay đổi hoặc thông qua hàm setProgress cũng tự thay đổi được. Nên dựa vào đây mà ta có xử lí thích hợp.

Tham khảo thêm vấn đề của người khác: https://stackoverflow.com/questions/3026721/is-it-possible-to-have-a-seekbars-thumb-image-extend-outside-the-bar

Các bài viết không xem thì tiếc:

Thảo luận

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Xem thêm
Nếu bạn dùng Mac có thể làm theo những bước…
 
 
 
 
Facetime iPhone

Main Menu