Android开发-Switch开关控件的使用
- switch在布局中的属性
- 如何自定义Switch控件
- 选择器 track.xml 用于控制Switch不同状态下,滑动条的底图
- 选择器 thumb.xml 用于控制Switch不同状态下,按钮的显示状态
- Switch在Java文件中实现开关事件
- 效果图
switch在布局中的属性
了解如何使用switch控件,必须从了解switch属性开始,如下便是:
属性名 | 作用 |
textOn | 控件打开时显示的文字 |
textOff | 控件关闭时显示的文字 |
thumb | 控件开关的图片 |
track | 控件开关的轨迹图片 |
typeface | 设置字体类型 |
switchMinWidth | 开关最小宽度 |
switchPadding | 设置开关与文字的空白距离 |
switchTextAppearance | 设置文本的风格 |
checked | 设置初始选中状态 |
splitTrack | 是否设置一个间隙,让滑块与底部图片分隔(API 21及以上) |
showText | 设置是否显示开关上的文字(API 21及以上) |
如何自定义Switch控件
在日常开发中,我们基本上不会使用最开始的Switch控件,所以就需要自定义一下这个控件,最主要设置thumb和track这两个属性。
选择器 track.xml 用于控制Switch不同状态下,滑动条的底图
<?xml version="1.0" encoding="utf-8"?>
<!-- 底层下滑条的样式选择器,可控制Switch在不同状态下,底下下滑条的颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="@drawable/green_track" />
<item android:drawable="@drawable/gray_track" />
</selector>
连接green_track(1)和gray_track(2)两个xml文件
<!--1 -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度30 此处设置宽度无效-->
<size android:height="30dp"/>
<!-- 圆角弧度 15 -->
<corners android:radius="15dp"/>
<!-- 变化率 定义从左到右的颜色不变 -->
<gradient
android:endColor="#888888"
android:startColor="#888888" />
</shape>
<!--2 -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度40 -->
<size android:height="40dp" android:width="40dp"/>
<!-- 圆角弧度 20 -->
<corners android:radius="20dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="#666666"/>
</shape>
选择器 thumb.xml 用于控制Switch不同状态下,按钮的显示状态
<?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_thumb" />
<item android:drawable="@drawable/gray_thumb" />
</selector>
连接green_thumb(3)和gray_thumb(4)两个xml文件
<!--3 -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度40 -->
<size android:height="40dp" android:width="40dp"/>
<!-- 圆角弧度 20 -->
<corners android:radius="20dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="#33da33"/>
</shape>
<!--4 -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度40 -->
<size android:height="40dp" android:width="40dp"/>
<!-- 圆角弧度 20 -->
<corners android:radius="20dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="#666666"/>
</shape>
最后在activity_main.xml文件中添加这个控件,设置thumb和track这两个属性
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center"
xmlns:android="http://schemas.android.com/apk/res/android" >
<Switch
android:id="@+id/kaiguan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/thumb"
android:track="@drawable/track"
/>
</LinearLayout>
Switch在Java文件中实现开关事件
MainActivity.java文件中设置Switch控件监听,调用setOnCheckedChangeListener() 方法实现开关事件
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
Switch s;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
s = findViewById(R.id.kaiguan);
s.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (s.isChecked()){
Toast.makeText(MainActivity.this,"开启",Toast.LENGTH_LONG).show();
}else {
Toast.makeText(MainActivity.this,"关闭",Toast.LENGTH_LONG).show();
}
}
});
}
}
效果图