Как я могу создать пользовательские переключатели в Android с текстом на обеих сторонах дорожки переключателя и в большой палец?

Question

Как я могу создать собственный переключатель в Android, как показано на рисунке ниже:

Когда он включен, он должен выглядеть следующим образом

Мне также нужно показывать эффекты анимации при переключении между двумя категориями. Как я могу этого достичь? Имеются ли сторонние SDK или библиотеки? В настоящее время я разработал его с пользовательским линейным макетом следующим образом:

my_layout.xml:

 <LinearLayout
                android:id="@+id/customSliderLayout"
                android:layout_width="@dimen/_200sdp"
                android:layout_height="@dimen/_39sdp"
                android:layout_centerInParent="true"
                android:orientation="horizontal"
                android:weightSum="2"
                android:background="@drawable/oval_layout_bg"
                android:layout_centerHorizontal="true">

                <Button
                    android:id="@+id/userBtn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:text="@string/toggle_user"
                    android:textSize="@dimen/_18sdp"
                    android:textColor="@color/black_textcolor"
                    android:background="@drawable/back"/>

          <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:textColor="@color/textcolor_white"
                    android:textSize="@dimen/_16sdp"
                    android:gravity="center"
                    android:text="@string/toggle_doctor"/>

            </LinearLayout>

Но мне нужно спроектировать тумблер.

Я также проверил этот libray:

https://github.com/gmarm/BetterSegmentedControl

Но это доступно только для iOS, а не для Android. Мне нужно точно так же, как второй переключатель, который находится в ссылке.

Answer 1

это немного сложно, так как вы не можете написать что-либо на треке, поэтому вам нужно текстовое представление для вашего текста на треке и просто изменить его местоположение, когда это необходимо.Сделайте ваши фигуры или изображения готовыми, а затем переключателем и представлением текста в макете ограничения ... сопоставьте их в том же месте, в котором они вам нужны, затем перейдите к коду, а при включении / выключении переключателя переместите представление текста в другую сторону ...отлично работает ... и для большого пальца:

    cSwitch.setTextOn("doctor");
    cSwitch.setTextOff("user");

я знаю, что есть много возможностей для улучшения, но я так и сделал, и вы можете изменить ширину и высоту для фигур на ...

это мой код, я не сделал то, что вам нужно, лол, вы должны сделать это сами, ха-ха

я надеюсь, что это поможет ... ура

введите изображениеописание здесь

введите описание изображения здесь

переключение формы дорожки

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item
         android:width="11mm"
         android:height="4.2mm">
         <shape android:shape="rectangle">
             <corners android:radius="3.7mm" />
             <stroke
                 android:width="0.3mm"
                 android:color="@color/white" />
             <solid android:color="@color/green" />
         </shape>
     </item>
 </layer-list>

переключение формы большого пальца

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
     <size
        android:width="4.2mm"
        android:height="4.2mm" />
    <corners android:radius="2mm" />
    <solid android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="#bdf7b8" />
</shape>

Макет XML-кода

 <android.support.constraint.ConstraintLayout
    android:id="@+id/signInLayout"
    style="@style/LayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_marginTop="16dp">

 <Switch
        android:id="@+id/cSwitch"
        android:layout_width="wrap_content"
        android:layout_height="4mm"
        android:switchMinWidth="11mm"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/cSwitch_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="2mm"
        android:layout_marginStart="2mm"
        android:text="ON"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="@id/cSwitch"
        app:layout_constraintLeft_toLeftOf="@+id/cSwitch"
        app:layout_constraintTop_toTopOf="@id/cSwitch" />
</android.support.constraint.ConstraintLayout>

и Java-код

    final Switch cSwitch = rootView.findViewById(R.id.cSwitch);
    final TextView cSwitchText = rootView.findViewById(R.id.cSwitch_textView);
    cSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            ConstraintLayout constraintLayout = rootView.findViewById(R.id.signInLayout);
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(constraintLayout);
            constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.TOP, R.id.cSwitch, ConstraintSet.TOP, 0);
            constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.BOTTOM, R.id.cSwitch, ConstraintSet.BOTTOM, 0);
            cSwitch.setThumbDrawable(rootView.getResources().getDrawable(R.drawable.switch_thumb_green));

            if (isChecked) {
                cSwitchText.setText("ON");
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.LEFT, R.id.cSwitch, ConstraintSet.LEFT, 0);
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.RIGHT, ConstraintSet.UNSET, ConstraintSet.RIGHT, 0);
                cSwitch.setTrackDrawable(ContextCompat.getDrawable(rootView.getContext(), R.drawable.switch_track_green));
            } else {
                cSwitchText.setText("OFF");
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.RIGHT, R.id.cSwitch, ConstraintSet.RIGHT, 0);
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.LEFT, ConstraintSet.UNSET, ConstraintSet.LEFT, 0);
                cSwitch.setTrackDrawable(ContextCompat.getDrawable(rootView.getContext(), R.drawable.switch_track_red));
                cSwitch.setThumbDrawable(rootView.getResources().getDrawable(R.drawable.switch_thumb_red));
            }
            constraintSet.applyTo(constraintLayout);

        }
    });