This is the 30th day of my participation in the August Text Challenge.More challenges in August

background

In the project often switch control requirements, the system provides the default switch sometimes can not meet all requirements, such as color, shape and so on, this time the control needs to be transformed to adapt to the needs. This article briefly introduces the basic use of Switch control

The effect

use

Insert controls into the XML

<Switch
    android:id="@+id/sw_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:track="@drawable/track"
    android:thumb="@drawable/thumb"/>
Copy the code

Off setting gray base map


      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <! -- Height 30 set width invalid -->
    <size android:height="30dp"/>
    <! -- Rounded Angle radian 25 -->
    <corners android:radius="25dp"/>
    <! -- Change rate defines constant color from left to right -->
    <gradient
        android:endColor="# 666666"
        android:startColor="# 666666" />
</shape>
Copy the code

The open state is set to blue background


      
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <! -- Altitude 40 -->
    <size android:height="40dp"/>
    <! -- Rounded Angle radian 25 -->
    <corners android:radius="25dp"/>
    <! -- Change rate -->
    <gradient
        android:endColor="#0000FF"
        android:startColor="#0000FF" />
</shape>
Copy the code

Set the closed state to a white slider and add a gray border around it


      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <! -- Altitude 40 -->
    <size android:height="40dp" android:width="40dp"/>
    <! -- Rounded Angle radian 20 -->
    <corners android:radius="25dp"/>
    <! -- Change rate -->
    <gradient
        android:endColor="#ffffff"
        android:startColor="#ffffff" />
    <stroke android:width="1dp"
        android:color="#9e9e9e"/>
</shape>
Copy the code

Set the closed state to a white slider and add a blue border around it


      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <! -- Altitude 40 -->
    <size android:height="40dp" android:width="40dp"/>
    <! -- Rounded Angle radian 25 -->
    <corners android:radius="25dp"/>
    <! -- Change rate -->
    <gradient
        android:endColor="#ffffff"
        android:startColor="#ffffff" />
    <stroke android:width="1dp"
        android:color="#0000FF"/>
</shape>
Copy the code

Use the selector to set the base color


      
<! -- Control the color of the slider under different Switch states -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/blue_track" />
    <item android:drawable="@drawable/gray_track" />
</selector>
Copy the code

Use the selector to control the slider


      
<! -- Set the color of the button in different states -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/blue_thumb" />
    <item android:drawable="@drawable/gray_thumb" />
</selector>
Copy the code

Monitoring switch status

Switch mSwitch = findViewById(R.id.sw_switch);
mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {}});Copy the code

Commonly used attributes

Android: Checked Sets whether the control is selected Android: Track Sets the background color Android: Thumb sets the slider Android: Text Sets the text of the control Android :textOn Sets the text on the slider when selected Android :showText Sets whether the slider displays text when textOn and textOff are set (showText must be true if textOn and textOff are set)