Блог

Главная - Вопросы по программированию - Пользовательский переключатель Android — дизайна С текстом и дорожкой для большого пальца

Пользовательский переключатель Android — дизайна С текстом и дорожкой для большого пальца

#android #xml #uiswitch

Вопрос:

Я хочу создать пользовательский переключатель. Мой ожидаемый результат похож на эти фотографии;

первый взгляд

второй взгляд

Как я исследовал, есть много способов сделать это с switch помощью , horizontal radio groups , segmented controls .

Поэтому я попытался выполнить свой ожидаемый результат. Мои коды такие;

drawable/switch_track_green.xml:

 lt;?xml version="1.0" encoding="utf-8"?gt; lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"gt;  lt;item  android:width="11mm"  android:height="4.2mm"gt;  lt;shape android:shape="rectangle"gt;  lt;corners android:radius="3.7mm" /gt;  lt;stroke  android:width="0.3mm"  android:color="@color/black" /gt;  lt;solid android:color="@color/teal_200" /gt;  lt;/shapegt;  lt;/itemgt; lt;/layer-listgt;

layout/activity_main.xml

 lt;?xml version="1.0" encoding="utf-8"?gt; lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:layout_gravity="center_vertical"  android:id="@ id/signInLayout"  tools:context=".MainActivity"gt;   lt;Switch  android:id="@ id/cSwitch"  android:layout_width="wrap_content"  android:layout_height="4mm"  android:switchMinWidth="11mm"  android:gravity="center_vertical"  app:layout_constraintLeft_toLeftOf="parent"  app:layout_constraintRight_toRightOf="parent"  app:layout_constraintTop_toTopOf="parent" /gt;   lt;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" /gt;  lt;/androidx.constraintlayout.widget.ConstraintLayoutgt;

MainActivity.java

 package com.example.design_example;  import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import androidx.constraintlayout.widget.ConstraintSet; import androidx.core.content.ContextCompat;  import android.os.Bundle; import android.widget.CompoundButton; import android.widget.Switch; import android.widget.TextView;  public class MainActivity extends AppCompatActivity {   @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   final Switch cSwitch = findViewById(R.id.cSwitch);  final TextView cSwitchText = findViewById(R.id.cSwitch_textView);  cSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  @Override  public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  ConstraintLayout constraintLayout = 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(getResources().getDrawable(R.drawable.switch_track_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(getApplicationContext(), 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(getApplicationContext(), R.drawable.switch_track_green));  }  constraintSet.applyTo(constraintLayout);   }  });  } }

But now I have some problems;

  1. At first open, I see default gray switch, not my custom switch.
  2. When I open it, there is a track on both two sides. And, I don’t see «OFF» text.
  3. When I close it, I don’t see «ON» text.

Can you help me to solve these problems? If possible, can you help me to create my expected output?

Метки: