安卓Switch动画实现

新项目要实现下面的一个按钮点击效果，在自定义动画 和switchCompat之间，我还是选择了compat。

在下面我就做了记录，如何实现这样的效果；

效果图如下

 1)导入资源图片thumb.png ,thumb_on.png ,track_nomal.png ,track_on.png ,track_press.png

 2)实现thumb_selector.xml 

    <?xml version="1.0" encoding="utf-8"?>  
    <selector xmlns:android="http://schemas.android.com/apk/res/android">  
        <!--选中时的滑块图片-->  
    <item android:drawable="@drawable/thumb_on" android:state_checked="true"/>  
        <!--正常情况滑块图片-->  
    <item android:drawable="@drawable/thumb"/>  
    </selector>  

3)实现track_selector.xml

    <?xml version="1.0" encoding="utf-8"?>  
        <selector xmlns:android="http://schemas.android.com/apk/res/android">  
        <!--打开时switch轨迹图片-->  
        <item android:state_pressed="true"  android:drawable="@drawable/track_on" />  
        <!--按压时switch轨迹图片-->  
        <item android:state_checked="true"  android:drawable="@drawable/track_press" />  
        <!--正常状态switch轨迹图片-->  
        <item                               android:drawable="@drawable/track_nomal" />  
      
        </selector>  

4)主布局actiity_second.xml

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    android:paddingBottom="@dimen/activity_vertical_margin"  
    android:paddingLeft="@dimen/activity_horizontal_margin"  
    android:paddingRight="@dimen/activity_horizontal_margin"  
    android:paddingTop="@dimen/activity_vertical_margin"  
    tools:context="com.example.aswitch.SecondActivity">  
  
    <android.support.v7.widget.SwitchCompat  
        android:layout_marginTop="10dp"  
        android:layout_below="@+id/CustomSwitchCompat_tv"  
        android:id="@+id/CustomSwitchCompat"  
        android:layout_width="wrap_content"  
        android:minWidth="40dp"  
        android:minHeight="20dp"  
        android:layout_height="wrap_content" />  
 
</RelativeLayout>

5)主布局java类SecondActivity.java   

public class SecondActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener{  
  
    private SwitchCompat customSwitchCompat;  
    private TextView custom_result,CustomSwitchCompat_tv;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_second);  
        //实例化  
        customSwitchCompat = (SwitchCompat) findViewById(R.id.CustomSwitchCompat);  
        custom_result = (TextView) findViewById(R.id.custom_result);  
        //设置自定义的thumb和track  
       customSwitchCompat.setThumbResource(R.drawable.thumb_selector);  
        customSwitchCompat.setTrackResource(R.drawable.track_selector);  
        //设置Switch事件监听  
        customSwitchCompat.setOnCheckedChangeListener(this);  
    }  
  
    /* 
    继承监听器的接口并实现onCheckedChanged方法 
    * */  
    @Override  
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
                if(isChecked){  
                    custom_result.setText("开");  
                }else {  
                    custom_result.setText("关");  
                }  
    }  
} 

常规属性：

android:typeface="normal":设置字体类型  
android:track="":设置开关的轨迹图片  
android:textOff="开"：设置开关checked的文字  
android:textOn="关"：设置开关关闭时的文字  
android:thumb="":设置开关的图片  
android:switchMinWidth=""：开关最小宽度  
android:switchPadding="":设置开关 与文字的空白距离  
android:switchTextAppearance="":设置文本的风格  
android:checked="":设置初始选中状态  
android:splitTrack="true":是否设置一个间隙，让滑块与底部图片分隔（API 21及以上）  
android:showText="true"：设置是否显示开关上的文字（API 21及以上） 

简单使用：

    <?xml version="1.0" encoding="utf-8"?>  
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:tools="http://schemas.android.com/tools"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        xmlns:app="http://schemas.android.com/apk/res-auto"  
        android:paddingBottom="@dimen/activity_vertical_margin"  
        android:paddingLeft="@dimen/activity_horizontal_margin"  
        android:paddingRight="@dimen/activity_horizontal_margin"  
        android:paddingTop="@dimen/activity_vertical_margin"  
        tools:context="com.example.aswitch.MainActivity">  
      
        <TextView  
            android:id="@+id/switch_tv"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="switch:" />  
        <Switch  
            android:layout_marginTop="10dp"  
            android:layout_below="@+id/switch_tv"  
            android:id="@+id/switch1"  
            android:typeface="normal"  
            android:textOff="开"  
            android:textOn="关"  
            android:switchMinWidth="40dp"  
            android:switchPadding="10dp"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" />  
        <TextView  
            android:id="@+id/text"  
            android:layout_marginTop="10dp"  
            android:layout_below="@+id/switch1"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="Hello World!" />  
      
    
    </RelativeLayout>  

代码：

public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener{  
  
    private Switch aSwitch;  
    private SwitchCompat aSwitchCompat;  
    private TextView text1,text2,switchText,switchCompatText;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        //实例化  
        aSwitch = (Switch) findViewById(R.id.switch1);  
        aSwitchCompat = (SwitchCompat) findViewById(R.id.switch_compat);  
        text1 = (TextView) findViewById(R.id.text);  
        text2 = (TextView) findViewById(R.id.text1);  
        //设置Switch事件监听  
        aSwitch.setOnCheckedChangeListener(this);  
        aSwitchCompat.setOnCheckedChangeListener(this);  
    }  
  
    /* 
    继承监听器的接口并实现onCheckedChanged方法 
    * */  
    @Override  
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
        switch (buttonView.getId()){  
            case R.id.switch1:  
                if(isChecked){  
                    text1.setText("开");  
                }else {  
                    text1.setText("关");  
                }  
                break;  
            default:  
                break;  
        }  
    }  
}  

效果图：

《------------------------------------------------------------------------------------华丽的分割线------------------------------------------------------------------- 》

在styles.xml中自定义style

<!--自定义switch的按钮和轨迹颜色theme-->    
<style name="mySwitch" parent="Theme.AppCompat.Light">  
    <!-- switch 打开时的按钮的颜色 轨迹颜色默认为30%（看效果就明白30%是怎么回事了）这个颜色 -->  
    <item name="colorControlActivated">@android:color/holo_green_dark</item>  
    <!--  switch关闭时的按钮的颜色 -->  
    <item name="colorSwitchThumbNormal">@color/colorAccent</item>  
    <!-- switch关闭时的轨迹的颜色 30%这个颜色 -->  
    <item name="android:colorForeground">@color/colorPrimaryDark</item>  
  
</style>    

在布局文件中通过android:theme="@style/mySwitch"设置

    <android.support.v7.widget.SwitchCompat  
         android:layout_marginTop="10dp"  
         android:layout_below="@+id/switch_compat_tv"  
         android:id="@+id/switch_compat"  
         android:typeface="normal"  
         android:theme="@style/mySwitch"  
         android:switchMinWidth="40dp"  
         android:switchPadding="10dp"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content" />   

效果图：