Android 与 SwitchButton亲密约会《-》

由于最近翻墙感觉自己要学的东西太多，可能有一些基础的东西像今天我要讲的是SwitchButton之前是ToggleButton，直接看效果图



How To Use

xmlns:toggle="http://schemas.android.com/apk/res-auto"

<com.zcw.togglebutton.ToggleButton
android:layout_width="54dp"
toggle:tbOnColor="#f00"
toggle:tbOffColor="#ddd"
toggle:tbSpotColor="#00f"
toggle:tbOffBorderColor="#000"
toggle:tbBorderWidth="2dp"
android:layout_height="30dp" >
</com.zcw.togglebutton.ToggleButton>
ToggleButton toggleBtn;

//切换开关
toggleBtn.toggle();
//切换无动画
toggleBtn.toggle(false);
//开关切换事件
toggleBtn.setOnToggleChanged(new OnToggleChanged(){
@Override
public void onToggle(boolean on) {
}
});

toggleBtn.setToggleOn();
toggleBtn.setToggleOff();
//无动画切换
toggleBtn.setToggleOn(false);
toggleBtn.setToggleOff(false);

//禁用动画
toggleBtn.setAnimate(false);

SwitchButton.An beautiful+lightweight+custom-style-easy switch widget for Android,minSdkVersion >= 11

这句话的意思就是Android最低版本的sdk是11

然后看下准备工作

首先添加gradle一句代码如下

1、

compile 'com.github.zcweng:switch-button:0.0.2@aar'

2、然后Sync一下ok然后进行初始化这里不再赘述

3、在Style.xml添加不同的样式

mSwitchButton= (SwitchButton) findViewById(R.id.switch_button);
mSwitchButton.setChecked(true);
mSwitchButton.isChecked();
mSwitchButton.toggle();//打开开关
mSwitchButton.toggle(true);//switch state 开关打开状态
mSwitchButton.setShadowEffect(true);//disable 是否显示阴影效果shadow effect
mSwitchButton.setEnabled(true);//disable button是否显示按钮
mSwitchButton.setEnableEffect(true);//disable the switch animation 是否产生动画
//设置选中的监听事件
mSwitchButton.setOnCheckedChangeListener(new SwitchButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(SwitchButton view, boolean isChecked) {
if(mSwitchButton.isChecked()){
Toast.makeText(MainActivity.this,"当前选中状态",Toast.LENGTH_LONG).show();
}
}
});

}

> 布局文件main.xml
> `<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:toggle="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<!--<com.zcw.togglebutton.ToggleButton-->
<!--android:layout_marginTop="10dp"-->
<!--android:id="@+id/togglebutton"-->
<!--android:layout_width="54dp"-->
<!--toggle:tbOnColor="#f00"-->
<!--toggle:tbOffColor="#ddd"-->
<!--toggle:tbSpotColor="#00f"-->
<!--toggle:tbOffBorderColor="#000"-->
<!--toggle:tbBorderWidth="2dp"-->
<!--android:layout_height="30dp" >-->
<!--</com.zcw.togglebutton.ToggleButton>-->
<com.suke.widget.SwitchButton
style="?attr/sb_shadow_effect"
android:id="@+id/switch_button"
android:layout_marginTop="10dp"
android:layout_marginLeft="300dp"
toggle:sb_button_color="@color/colorAccent"
toggle:sb_checked="true"
toggle:sb_shadow_radius="5dp"
toggle:sb_show_indicator="false"
toggle:theme="@style/AlertDialog.AppCompat.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.suke.widget.SwitchButton
style="?attr/sb_shadow_effect"
android:layout_marginTop="10dp"
android:layout_marginLeft="300dp"
toggle:sb_button_color="@color/colorPrimary"
toggle:sb_checked="true"
toggle:sb_shadow_radius="5dp"
toggle:sb_show_indicator="false"
toggle:theme="@style/AlertDialog.AppCompat.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.suke.widget.SwitchButton
style="?attr/sb_shadow_effect"
android:layout_marginTop="10dp"
android:layout_marginLeft="300dp"
toggle:sb_button_color="@color/colorPrimaryDark"
toggle:sb_checked="true"
toggle:sb_shadow_radius="5dp"
toggle:sb_show_indicator="true"
toggle:theme="@style/AlertDialog.AppCompat.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/> <com.suke.widget.SwitchButton
style="?attr/sb_shadow_effect"
android:layout_marginTop="10dp"
android:layout_marginLeft="300dp"
toggle:sb_button_color="@color/colorAccent"
toggle:sb_checked="true"
toggle:sb_shadow_radius="5dp"
toggle:sb_show_indicator="false"
toggle:theme="@style/TextAppearance.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.suke.widget.SwitchButton
style="?attr/sb_shadow_effect"
android:layout_marginTop="10dp"
android:layout_marginLeft="300dp"
toggle:sb_button_color="@color/colorAccent"
toggle:sb_checked="true"
toggle:sb_shadow_radius="3dp"
toggle:sb_show_indicator="false"
toggle:theme="@style/AlertDialog.AppCompat.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.suke.widget.SwitchButton
style="?attr/sb_shadow_effect"
android:layout_marginTop="10dp"
android:layout_marginLeft="300dp"
toggle:sb_button_color="#FFFFCC"
toggle:sb_checked="true"
toggle:sb_shadow_radius="5dp"
toggle:sb_show_indicator="false"
toggle:theme="@style/AlertDialog.AppCompat.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.suke.widget.SwitchButton
style="?attr/sb_shadow_effect"
android:layout_marginTop="10dp"
android:layout_marginLeft="300dp"
toggle:sb_button_color="#66eecc"
toggle:sb_checked="true"
toggle:sb_shadow_radius="10dp"
toggle:sb_show_indicator="false"
toggle:theme="@style/Base.AlertDialog.AppCompat.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</LinearLayout>
`

Style.xml文件代码如下

<attr name="sb_shadow_radius" format="reference|dimension"/>       阴影半径
<attr name="sb_shadow_offset" format="reference|dimension"/>       阴影偏移
<attr name="sb_shadow_color" format="reference|color"/>            阴影颜色
<attr name="sb_uncheck_color" format="reference|color"/>           关闭颜色
<attr name="sb_checked_color" format="reference|color"/>           开启颜色
<attr name="sb_border_width" format="reference|dimension"/>        边框宽度
<attr name="sb_checkline_color" format="reference|color"/>         开启指示器颜色
<attr name="sb_checkline_width" format="reference|dimension"/>     开启指示器线宽
<attr name="sb_uncheckcircle_color" format="reference|color"/>     关闭指示器颜色
<attr name="sb_uncheckcircle_width" format="reference|dimension"/> 关闭指示器线宽
<attr name="sb_uncheckcircle_radius" format="reference|dimension"/>关闭指示器半径
<attr name="sb_checked" format="reference|boolean"/>               是否选中
<attr name="sb_shadow_effect" format="reference|boolean"/>         是否启用阴影
<attr name="sb_effect_duration" format="reference|integer"/>       动画时间，默认300ms
<attr name="sb_button_color" format="reference|color"/>            按钮颜色
<attr name="sb_show_indicator" format="reference|boolean"/>        是否显示指示器，默认true：显示
<attr name="sb_background" format="reference|color"/>              背景色，默认白色
<attr name="sb_enable_effect" format="reference|boolean"/>         是否启用特效，默认true

总而言之特别简单另外需要自己尝试点击这里switchbutton

晚安！好困！