SlideSwitch仿iphone滑动开关组件，仿百度魔图滑动开关组件Android

              SlideSwitch 仿iphone滑动开关组件，仿百度魔图滑动开关组件

1.AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.glsite.mobilesafe">

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".ui.SettingActivity"></activity>
        <activity android:name=".ui.UserCenterActivity" />
        <activity android:name=".ui.SplashActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".ui.MainActivity" />
        <activity android:name=".ui.DirectoryListViewActivity" />
    </application>

</manifest>

2.activity_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_seting"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffefebe7"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/main_title"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="#074060">

        <ImageButton
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@drawable/titlebar_logo_back" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="系统设置"
            android:textColor="@color/white"
            android:textSize="20sp" />

    </RelativeLayout>

    <ScrollView
        android:id="@+id/seting_scrollview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbarStyle="outsideOverlay">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:text="显示与快捷设置"
                android:textColor="@color/gray"
                android:textSize="12sp" />

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <RelativeLayout
                    android:id="@+id/seting_message"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="14dp"
                    android:background="@drawable/preference_first_item"
                    android:clickable="true">


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:padding="8dp"
                        android:text="是否开启站内消息"
                        android:textColor="#000"
                        android:textSize="14sp" />

                    <com.glsite.widght.SlideSwitch
                        android:id="@+id/msg_slideSwitch"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true" />

                </RelativeLayout>


                <RelativeLayout
                    android:id="@+id/seting_item2"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/preference_item"
                    android:clickable="true"
                    android:gravity="center_vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:padding="8dp"
                        android:text="软件更新"
                        android:textColor="#000"
                        android:textSize="14sp" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:scaleType="matrix"
                        android:src="@drawable/mm_submenu" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/seting_shortCut"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/preference_item"
                    android:clickable="true"
                    android:gravity="center_vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:padding="8dp"
                        android:text="桌面快捷方式"
                        android:textColor="#000"
                        android:textSize="14sp" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:scaleType="matrix"
                        android:src="@drawable/mm_submenu" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/seting_advertisement"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/preference_last_item"
                    android:clickable="true"
                    android:gravity="center_vertical">


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:padding="8dp"
                        android:text="广告显示设置"
                        android:textColor="#000"
                        android:textSize="14sp" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:scaleType="matrix"
                        android:src="@drawable/mm_submenu" />
                </RelativeLayout>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

3.app\src\main\java\com\glsite\widght\SlideSwitch.java

package com.glsite.widght;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;

import com.glsite.mobilesafe.R;

/**
 * SlideSwitch 仿iphone滑动开关组件，仿百度魔图滑动开关组件
 * 组件分为三种状态：打开、关闭、正在滑动<br/>
 * 使用方法：
 * <pre>SlideSwitch slideSwitch = new SlideSwitch(this);
 * slideSwitch.setOnSwitchChangedListener(onSwitchChangedListener);
 * linearLayout.addView(slideSwitch);
 * </pre>
 * 注：也可以加载在xml里面使用
 *
 */
public class SlideSwitch extends View {
    public static final String TAG = "SlideSwitch";
    public static final int SWITCH_OFF = 0;//关闭状态
    public static final int SWITCH_ON = 1;//打开状态
    public static final int SWITCH_SCROLING = 2;//滚动状态

    //用于显示的文本
    private String mOnText = "打开";
    private String mOffText = "关闭";

    private int mSwitchStatus = SWITCH_OFF;

    private boolean mHasScrolled = false;//表示是否发生过滚动

    private int mSrcX = 0, mDstX = 0;

    private int mBmpWidth = 0;
    private int mBmpHeight = 0;
    private int mThumbWidth = 0;

    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private OnSwitchChangedListener mOnSwitchChangedListener = null;

    //开关状态图
    Bitmap mSwitch_off, mSwitch_on, mSwitch_thumb;

    public SlideSwitch(Context context) {
        this(context, null);
    }

    public SlideSwitch(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public SlideSwitch(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    //初始化三幅图片
    private void init() {
        Resources res = getResources();
        mSwitch_off = BitmapFactory.decodeResource(res, R.drawable.bg_switch_off);
        mSwitch_on = BitmapFactory.decodeResource(res, R.drawable.bg_switch_on);
        mSwitch_thumb = BitmapFactory.decodeResource(res, R.drawable.switch_thumb);
        mBmpWidth = mSwitch_on.getWidth();
        mBmpHeight = mSwitch_on.getHeight();
        mThumbWidth = mSwitch_thumb.getWidth();
    }

    @Override
    public void setLayoutParams(LayoutParams params) {
        params.width = mBmpWidth;
        params.height = mBmpHeight;
        super.setLayoutParams(params);
    }

    /**
     * 为开关控件设置状态改变监听函数
     *
     * @param onSwitchChangedListener 参见 {@link OnSwitchChangedListener}
     */
    public void setOnSwitchChangedListener(OnSwitchChangedListener onSwitchChangedListener) {
        mOnSwitchChangedListener = onSwitchChangedListener;
    }

    /**
     * 设置开关上面的文本
     *
     * @param onText  控件打开时要显示的文本
     * @param offText 控件关闭时要显示的文本
     */
    public void setText(final String onText, final String offText) {
        mOnText = onText;
        mOffText = offText;
        invalidate();
    }

    /**
     * 设置开关的状态
     *
     * @param on 是否打开开关 打开为true 关闭为false
     */
    public void setStatus(boolean on) {
        mSwitchStatus = (on ? SWITCH_ON : SWITCH_OFF);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        Log.d(TAG, "onTouchEvent  x=" + event.getX());
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mSrcX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                mDstX = Math.max((int) event.getX(), 10);
                mDstX = Math.min(mDstX, 62);
                if (mSrcX == mDstX)
                    return true;
                mHasScrolled = true;
                AnimationTransRunnable aTransRunnable = new AnimationTransRunnable(mSrcX, mDstX, 0);
                new Thread(aTransRunnable).start();
                mSrcX = mDstX;
                break;
            case MotionEvent.ACTION_UP:
                if (mHasScrolled == false)//如果没有发生过滑动，就意味着这是一次单击过程
                {
                    mSwitchStatus = Math.abs(mSwitchStatus - 1);
                    int xFrom = 10, xTo = 62;
                    if (mSwitchStatus == SWITCH_OFF) {
                        xFrom = 62;
                        xTo = 10;
                    }
                    AnimationTransRunnable runnable = new AnimationTransRunnable(xFrom, xTo, 1);
                    new Thread(runnable).start();
                } else {
                    invalidate();
                    mHasScrolled = false;
                }
                //状态改变的时候 回调事件函数
                if (mOnSwitchChangedListener != null) {
                    mOnSwitchChangedListener.onSwitchChanged(this, mSwitchStatus);
                }
                break;

            default:
                break;
        }
        return true;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘图的时候 内部用到了一些数值的硬编码，其实不太好，
        //主要是考虑到图片的原因，图片周围有透明边界，所以要有一定的偏移
        //硬编码的数值只要看懂了代码，其实可以理解其含义，可以做相应改进。
        mPaint.setTextSize(14);
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);

        if (mSwitchStatus == SWITCH_OFF) {
            drawBitmap(canvas, null, null, mSwitch_off);
            drawBitmap(canvas, null, null, mSwitch_thumb);
            mPaint.setColor(Color.rgb(105, 105, 105));
            canvas.translate(mSwitch_thumb.getWidth(), 0);
            canvas.drawText(mOffText, 0, 20, mPaint);
        } else if (mSwitchStatus == SWITCH_ON) {
            drawBitmap(canvas, null, null, mSwitch_on);
            int count = canvas.save();
            canvas.translate(mSwitch_on.getWidth() - mSwitch_thumb.getWidth(), 0);
            drawBitmap(canvas, null, null, mSwitch_thumb);
            mPaint.setColor(Color.WHITE);
            canvas.restoreToCount(count);
            canvas.drawText(mOnText, 17, 20, mPaint);
        } else //SWITCH_SCROLING
        {
            mSwitchStatus = mDstX > 35 ? SWITCH_ON : SWITCH_OFF;
            drawBitmap(canvas, new Rect(0, 0, mDstX, mBmpHeight), new Rect(0, 0, (int) mDstX, mBmpHeight), mSwitch_on);
            mPaint.setColor(Color.WHITE);
            canvas.drawText(mOnText, 17, 20, mPaint);

            int count = canvas.save();
            canvas.translate(mDstX, 0);
            drawBitmap(canvas, new Rect(mDstX, 0, mBmpWidth, mBmpHeight), new Rect(0, 0, mBmpWidth - mDstX, mBmpHeight), mSwitch_off);
            canvas.restoreToCount(count);

            count = canvas.save();
            canvas.clipRect(mDstX, 0, mBmpWidth, mBmpHeight);
            canvas.translate(mThumbWidth, 0);
            mPaint.setColor(Color.rgb(105, 105, 105));
            canvas.drawText(mOffText, 0, 20, mPaint);
            canvas.restoreToCount(count);

            count = canvas.save();
            canvas.translate(mDstX - mThumbWidth / 2, 0);
            drawBitmap(canvas, null, null, mSwitch_thumb);
            canvas.restoreToCount(count);
        }

    }

    public void drawBitmap(Canvas canvas, Rect src, Rect dst, Bitmap bitmap) {
        dst = (dst == null ? new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()) : dst);
        Paint paint = new Paint();
        canvas.drawBitmap(bitmap, src, dst, paint);
    }

    /**
     * AnimationTransRunnable 做滑动动画所使用的线程
     */
    private class AnimationTransRunnable implements Runnable {
        private int srcX, dstX;
        private int duration;

        /**
         * 滑动动画
         *
         * @param srcX     滑动起始点
         * @param dstX     滑动终止点
         * @param duration 是否采用动画，1采用，0不采用
         */
        public AnimationTransRunnable(float srcX, float dstX, final int duration) {
            this.srcX = (int) srcX;
            this.dstX = (int) dstX;
            this.duration = duration;
        }

        @Override
        public void run() {
            final int patch = (dstX > srcX ? 5 : -5);
            if (duration == 0) {
                SlideSwitch.this.mSwitchStatus = SWITCH_SCROLING;
                SlideSwitch.this.postInvalidate();
            } else {
                Log.d(TAG, "start Animation: [ " + srcX + " , " + dstX + " ]");
                int x = srcX + patch;
                while (Math.abs(x - dstX) > 5) {
                    mDstX = x;
                    SlideSwitch.this.mSwitchStatus = SWITCH_SCROLING;
                    SlideSwitch.this.postInvalidate();
                    x += patch;
                    try {
                        Thread.sleep(10);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                mDstX = dstX;
                SlideSwitch.this.mSwitchStatus = mDstX > 35 ? SWITCH_ON : SWITCH_OFF;
                SlideSwitch.this.postInvalidate();
            }
        }

    }

    public static interface OnSwitchChangedListener {
        /**
         * 状态改变 回调函数
         *
         * @param status SWITCH_ON表示打开 SWITCH_OFF表示关闭
         */
        public abstract void onSwitchChanged(SlideSwitch obj, int status);
    }
}

3.1 drawable-hdpi\bg_switch_off.png

3.2 drawable-hdpi\bg_switch_on.png

3.3 drawable-hdpi\switch_thumb.png

4.SettingActivity

package com.glsite.mobilesafe.ui;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.widget.Toast;

import com.glsite.mobilesafe.R;
import com.glsite.widght.SlideSwitch;


public class SettingActivity extends Activity implements SlideSwitch.OnSwitchChangedListener {

    private SlideSwitch mSlideSwitch;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题;注意把BaseActivity继承的AppCompatActivity类改成继承Activity类;因为AppCompatActivity与Activity类使用的风格不同
        setContentView(R.layout.activity_setting);
        initView();//初始化视图
    }

    private void initView() {
        mSlideSwitch = findViewById(R.id.msg_slideSwitch);
        mSlideSwitch.setOnSwitchChangedListener(this);
    }

    @Override
    public void onSwitchChanged(SlideSwitch obj, int status) {
        switch (obj.getId()) {
            case R.id.msg_slideSwitch:
Toast.makeText(this,"slideSwitch: "+status, Toast.LENGTH_SHORT).show();
                break;

            default:
                break;
        }
    }
}