仿IOS可滑动开关自定义样式

AndroidWidget 2015-11

关于这个话题，网上有不少第三方Demo，这里参考 SwitchButton 开关按钮 的多种实现方式 ，为了使其更易于使用，我们稍作修改，大体的修改思路是增加xml自定义样式，使得View分离的更为清晰明了。

定义styleable

<resources>
    <declare-styleable name="customCheckSwitchButton">
        <attr name="checkswitch_bottom" format="reference|color" />
        <attr name="checkswitch_btn_pressed" format="reference|color" />
        <attr name="checkswitch_btn_unpressed" format="reference|color" />
        <attr name="checkswitch_frame" format="reference|color" />
        <attr name="checkswitch_mask" format="reference|color" />
    </declare-styleable>
</resources>

改造View构造器

public CheckSwitchButton(Context context, AttributeSet attrs) {
    this(context, attrs, android.R.attr.checkboxStyle);
}
public CheckSwitchButton(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.customCheckSwitchButton);
    final int N = a.getIndexCount();
    for (int i = 0; i < N; i++) {
        int attr = a.getIndex(i);
        switch (attr) {
        case R.styleable.customCheckSwitchButton_checkswitch_bottom:
            Drawable bottomD = a.getDrawable(attr);
            if (bottomD != null) {
                BitmapDrawable bottomBD = (BitmapDrawable) bottomD;
                if (bottomBD != null) {
                    mBottom = bottomBD.getBitmap();
                }
            }
            break;
        case R.styleable.customCheckSwitchButton_checkswitch_btn_pressed:
            Drawable pressedD = a.getDrawable(attr);
            if (pressedD != null) {
                BitmapDrawable bottomBD = (BitmapDrawable) pressedD;
                if (bottomBD != null) {
                    mBtnPressed = bottomBD.getBitmap();
                }
            }
            break;
        case R.styleable.customCheckSwitchButton_checkswitch_btn_unpressed:
            Drawable unPressedD = a.getDrawable(attr);
            if (unPressedD != null) {
                BitmapDrawable bottomBD = (BitmapDrawable) unPressedD;
                if (bottomBD != null) {
                    mBtnNormal = bottomBD.getBitmap();
                }
            }
            break;
        case R.styleable.customCheckSwitchButton_checkswitch_frame:
            Drawable frameD = a.getDrawable(attr);
            if (frameD != null) {
                BitmapDrawable bottomBD = (BitmapDrawable) frameD;
                if (bottomBD != null) {
                    mFrame = bottomBD.getBitmap();
                }
            }
            break;
        case R.styleable.customCheckSwitchButton_checkswitch_mask:
            Drawable maskD = a.getDrawable(attr);
            if (maskD != null) {
                BitmapDrawable bottomBD = (BitmapDrawable) maskD;
                if (bottomBD != null) {
                    mMask = bottomBD.getBitmap();
                }
            }
            break;
        }
    }
    a.recycle();
    final Resources resources = context.getResources();
    //Default
    if (mBottom == null) {
        mBottom = BitmapFactory.decodeResource(resources, R.drawable.checkswitch_bottom);
    }
    if (mBtnPressed == null) {
        mBtnPressed = BitmapFactory.decodeResource(resources, R.drawable.checkswitch_btn_pressed);
    }
    if (mBtnNormal == null) {
        mBtnNormal = BitmapFactory.decodeResource(resources, R.drawable.checkswitch_btn_unpressed);
    }
    if (mFrame == null) {
        mFrame = BitmapFactory.decodeResource(resources, R.drawable.checkswitch_frame);
    }
    if (mMask == null) {
        mMask = BitmapFactory.decodeResource(resources, R.drawable.checkswitch_mask);
    }
    initView(context);
}

主要的修改在这个View构造器中实现，从XML中解析各种样式并初始化，L65行初始化默认样式，接下来就是xml的简单自定义了。

xml自定义样式

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dip" >
    <com.example.compoundbuttonview.view.CheckSwitchButton
        android:id="@+id/checkSwithcButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:enabled="true"
        custom:checkswitch_bottom="@drawable/checkswitch_bottom"
        custom:checkswitch_btn_pressed="@drawable/checkswitch_btn_pressed"
        custom:checkswitch_btn_unpressed="@drawable/checkswitch_btn_unpressed"
        custom:checkswitch_frame="@drawable/checkswitch_frame"
        custom:checkswitch_mask="@drawable/checkswitch_mask" />
</LinearLayout>        

使用

接下来就可以直接拿来主义了

mCheckSwithcButton = (CheckSwitchButton)findViewById(R.id.checkSwithcButton);

最后看一下效果图

改造结束，虽然比较简单，却使得这个控件非常易于使用和调配。最后，感谢一下原作者的无私奉献。