安卓Switch动画实现

来源：互联网发布：3ds淘宝编辑：程序博客网时间：2024/05/29 10:10

新项目要实现下面的一个按钮点击效果，在自定义动画和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" />

效果图：

阅读全文

0 0