Как реализовать трехстороннюю скользящую кнопку в Android

Question

Я хочу реализовать трехстороннюю скользящую кнопку для моего приложения.в первой позиции он должен показывать один цвет, в центре он должен показывать другой цвет, а в конечной позиции он должен снова менять цвет.Здесь я даю изображения для этого.

Как я могу это реализовать?

Answer 1

Это на самом деле выглядит как расширение seekbar .

Чтобы реализовать этот вид слайдера, я бы создал класс, который расширяет seekbar . В Конструкторе я бы использовал .setMax (2); , что означает, что панель поиска имеет только 3 позиции / шаги.

Тогда в реализации по умолчанию я бы включил seekbar.OnChangeListener () . Там в методе pogressChanged (...) переключите фоновое изображение с помощью .setBackgroundDrawable (...) и при необходимости измените большой палец с помощью .setThumb (.. .) к изображению вашего желания.

Если вы даже хотите изменить положение ползунка, вы можете реализовать обработку событий Click, и там изменить положение ползунка с помощью .setProgress ();

Это очень простая в использовании и быстрая реализация, так как для этого требуется всего несколько строк кода.

Answer 2

Этого можно добиться с помощью RadioGroup.

Вам необходимо настроить RadioButtons внутри RadioGroup следующим образом:

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_toggler"
    android:orientation="horizontal"
    android:padding="4dp">

    <RadioButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button1_background"
        android:button="@null"
        android:checked="true" />

    <RadioButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button2_background"
        android:button="@null"
        android:checked="false" />

    <RadioButton
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button3_background"
        android:button="@null"
        android:checked="false" />

</RadioGroup>

вытяжка / button1_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn1checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn1unchecked"
        android:state_checked="false" />
</selector>

вытяжка / button2_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn2checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn2unchecked"
        android:state_checked="false" />
</selector>

вытяжка / button3_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn3checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn3unchecked"
        android:state_checked="false" />
</selector>

Используйте соответствующие ресурсы для рисования для всех 3 кнопок. Теперь вы можете обработать событие при смене чека RadioGroup.

Answer 3

Вот, пожалуйста, я разработал его для своих нужд, делюсь кодом.Довольно легко сделать и настроить.Просто используйте оператор switch , чтобы найти местоположение указателя и что-то сделать.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@color/md_green_100"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:text="@string/send"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="18sp"
        android:textStyle="bold" />

    <SeekBar
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:backgroundTint="@color/md_green_100"
        android:id="@+id/transferSwitch"
        android:elevation="5dp"
        android:foregroundTint="@color/md_green_100"
        android:indeterminateTint="@color/md_green_100"
        android:max="2"
        android:padding="5dp"
        android:progress="1"
        android:progressBackgroundTint="@color/md_green_100"
        android:progressTint="@color/md_green_100"
        android:secondaryProgressTint="@color/md_green_100"
        android:thumb="@android:drawable/presence_online"
        android:thumbTint="@color/md_green_800"
        app:tickMarkTint="@color/md_green_800" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|end"
        android:gravity="center"
        android:padding="10dp"
        android:text="@string/receive"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

Использование:

SeekBar seekBar = findViewById(SEEKBAR);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
       //Do something here!
       switch(progress){
          case 0: //Left
          case 2: //Right
          case 1: default: //Center 
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
});

Предварительный просмотр:

Answer 4

Создайте новый View и переопределите метод onPaint ().

Нарисуйте растровое изображение «ползунок» в любой позиции A, B или C (крайнее левое, центральное, крайнее правое) и затем установите цвет фонав которой когда-либо находится позиция A, B, C, в которой находится представление. Используя Canvas.drawBitmap () - http://developer.android.com/reference/android/graphics/Canvas.html#drawBitmap(android.graphics.Bitmap, float, float, android.graphics.Paint), чтобы нарисовать растровое изображение

. Вы можетеНарисуйте цвет фона с помощью - Canvas.drawRGB () до . Вы рисуете растровое изображение ползунка

. Имейте некоторую обработку событий для изменения позиции, например, реализуйте onClickListener и слушайте щелчки.Когда вы получаете щелчок, просто добавьте 1 к позиции, чтобы A -> B, B -> C, C -> A и т. Д. И т. Д.