Switch+OnCheckedChangeListener实现滑动按钮

如何实现图示的滑动按钮呢?

核心在于先在xml中用Switch语句实现按钮,但是默认的按钮样式很丑,所以我们还需要自己设置,滑动按钮是由底部和按钮组成,底部变化用strack,按钮变化用thumb

<Switch  android:id="@+id/switchButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="USB调试" android:textSize="40sp" <!--底部轨迹--> android:track="@drawable/track" <!--按钮样式--> android:thumb="@drawable/thumb" <!--默认状态(默认为关)--> android:checked="false" <!--滑动按钮的长度--> android:switchMinWidth="60dp" <!--按钮与文本框的距离--> android:switchPadding="100dp" />

所以我们需要另设@drawable/track,@drawable/thumb文件,他们都有两种状态,所以我们还要写四个文件(除了ic_launcher_background和huaji_icon之外都是我们需要创建的

先设置底部框track

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/green_track"></item>
    <item android:state_checked="false" android:drawable="@drawable/grey_track"></item>
</selector>

然后新建green_track,grey_track

<?xml version="1.0" encoding="utf-8"?>
<!--注意这里要把selector改为shape-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--框的高度,宽度是在界面的xml中switchMinWidth设置的-->
<size android:height="30dp"></size>
<!--让边框显示圆角-->
<corners android:radius="15dp"></corners>
<!--边框颜色变化-->
<gradient android:endColor="@color/green" android:startColor="@color/green"></gradient>
</shape>

grey_track一样

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="30dp"></size>
    <corners android:radius="15dp"></corners>
    <gradient android:endColor="@color/gray" android:startColor="@color/gray"></gradient>
</shape>

然后再设置按钮

green_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="30dp" android:width="30dp"></size>
<!--按钮默认是方的,设置为圆,如果尺寸再大一点的话,要想保持为圆,弧度也要变大-->
    <corners android:radius="15dp"></corners>
<!--按钮颜色设置为白色-->
    <gradient android:startColor="#FFFFFFFF"></gradient>
    <gradient android:endColor="#FFFFFFFF"></gradient>
<!--最外面一圈是绿色-->
    <stroke android:width="1dp" android:color="@color/green"></stroke>

</shape>

效果图


gray_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="30dp" android:width="30dp"></size>
    <corners android:radius="15dp"></corners>
    <gradient android:startColor="#ffffff"></gradient>
    <gradient android:endColor="#ffffff"></gradient>
    <stroke android:width="1dp" android:color="@color/gray"></stroke>
</shape>

最后是我们的java文件设置关系,主要就是加一个OncheckedListener***

package com.example.a18307.link;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Switch;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
//switch是关键字,不能用来实例化
    private Switch aSwitch;
// private ArrayList<String>strings;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        aSwitch=(Switch)this.findViewById(R.id.switchButton);

        aSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if(b)
                Toast.makeText(MainActivity.this,"按钮开了",Toast.LENGTH_SHORT).show();
                else
                    Toast.makeText(MainActivity.this,"按钮关了",Toast.LENGTH_SHORT).show();
            }
        });
    }
}
全部评论

相关推荐

11-18 15:57
门头沟学院 Java
最终归宿是测开:这个重邮的大佬在重邮很有名的,他就喜欢打92的脸,越有人质疑他,他越觉得爽😂
点赞 评论 收藏
分享
叮咚鸭:群众里面有坏人
点赞 评论 收藏
分享
小红书 后端开发 总包n+8w+期权
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务