SwitchCompat与Switch简单使用

目前很多App用的开关都是仿ios的，因为很多Android开发人员都别要求仿ios,表示有点悲哀，Android应该就自己的风格，而且原生的也很好用。

效果图

可以看到这里面又三个开关前两个是SwithCompat,绿色的是Switch.
话不多说，直接看代码

代码

布局

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_switch1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="25dp"
            android:text="开启夜间模式"
            android:textSize="16sp"/>

        <android.support.v7.widget.SwitchCompat
            android:id="@+id/sc_switch_compat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="25dp"
            android:longClickable="false"
            android:textColor="@color/white"
            android:textOff="Off"
            android:textOn="On"
            app:showText="true"
            app:switchPadding="5dp"
            app:switchTextAppearance="@style/SwitchCompat.Text"
            app:theme="@style/SwitchCompat.Control"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <TextView
            android:id="@+id/tv_switch2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="25dp"
            android:text="开启夜间模式"
            android:textSize="16sp"/>

        <android.support.v7.widget.SwitchCompat
            android:id="@+id/sc_switch_compat2"
            android:layout_width="wrap_content"
            android:layout_height="46dp"

            android:layout_alignParentRight="true"
            android:layout_marginRight="25dp"
            android:checked="false"
            android:longClickable="false"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <TextView
            android:id="@+id/tv_switch3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="25dp"
            android:text="开启夜间模式"
            android:textSize="16sp"/>

        <Switch
            android:id="@+id/s_switch"
            android:layout_width="wrap_content"
            android:layout_height="46dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="25dp"
            android:checked="false"
            android:longClickable="false"
            android:textOff="OFF"
            android:textOn="ON"
            android:theme="@style/SwitchStyle"/>
    </RelativeLayout>

Style

  <style name="SwitchCompat.Control" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlActivated">@color/yellow</item>
        <item name="colorSwitchThumbNormal">@color/red</item>
        <item name="android:colorForeground">@color/red_500</item>
    </style>

    <style name="SwitchCompat.Text" parent="Theme.AppCompat.Light">
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">9dp</item>
    </style>

    <style name="SwitchStyle" parent="AppTheme">
        <item name="colorAccent">@color/green</item>
    </style>

代码

 mSwitchCompat = (SwitchCompat) findViewById(R.id.sc_switch_compat);
        mSwitchCompat.setChecked(false);
        mSwitchCompat.setOnCheckedChangeListener(this);
        mSwitchCompat2 = (SwitchCompat) findViewById(R.id.sc_switch_compat2);
        mSwitchCompat2.setChecked(false);
        mSwitchCompat2.setOnCheckedChangeListener(this);
        mSwitch2 = (Switch) findViewById(R.id.s_switch);
        mSwitch2.setChecked(false);
        mSwitch2.setOnCheckedChangeListener(this);

    @Override
    public void onCheckedChanged(CompoundButton button, boolean checked) {
        if (checked) {        
//         做我们要实现的一些操作
            mDayNightHelper.setMode(DayNight.NIGHT);
            setTheme(R.style.NightTheme);
            switchMode();
            mText.setText("Night");
            mSwitchCompat.setChecked(true);
            mSwitchCompat2.setChecked(true);
            mSwitch2.setChecked(true);
        } else {

            mDayNightHelper.setMode(DayNight.DAY);
            setTheme(R.style.DayTheme);
            switchMode();
            mText.setText("Day");
            mSwitchCompat.setChecked(false);
            mSwitchCompat2.setChecked(false);
            mSwitch2.setChecked(false);
        }
    }

说明

可以看到，除了在Xml里面设置属性，Google还提供了这些方法进行设置，这里就不在写了，跟Xml的效果一样。

夜间模式的实现，可以参考文章《夜间模式的实现》