android自定义开关控件-SlideSwitch的实例

iphone上有开关控件，很漂亮，其实android4.0以后也有switch控件，但是只能用在4.0以后的系统中，这就失去了其使用价值，而且我觉得它的界面也不是很好看。最近看到了百度魔拍上面的一个控件，觉得很漂亮啊，然后反编译了下，尽管没有混淆过，但是还是不好读，然后就按照自己的想法写了个，功能和百度魔拍类似。

下面是百度魔拍的效果和SlideSwitch的效果

一、原理

继承自view类，override其onDraw函数，把两个背景图（一个灰的一个红的）和一个开关图（圆开关）通过canvas画出来；同时override其onTouchEvent函数，实现滑动效果；最后开启一个线程做动画，实现缓慢滑动的效果。

二、代码

SlideSwitch.java

package com.example.hellojni; 

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; 

/**
 * SlideSwitch 仿iphone滑动开关组件，仿百度魔图滑动开关组件
 * 组件分为三种状态：打开、关闭、正在滑动<br/>
 * 使用方法：
 * <pre>SlideSwitch slideSwitch = new SlideSwitch(this);
 *slideSwitch.setOnSwitchChangedListener(onSwitchChangedListener);
 *linearLayout.addView(slideSwitch);
</pre>
注：也可以加载在xml里面使用
 * @author scott
 *
 */
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);
  } 

}

layout xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#fdfdfd"
  android:orientation="vertical"
  android:paddingLeft="10dip"
  android:paddingRight="10dip" > 

  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/top" /> 

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

    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_centerVertical="true"
      android:text="网络构图"
      android:textSize="15sp" /> 

    <com.example.hellojni.SlideSwitch
      android:id="@+id/slideSwitch1"
      android:layout_width="116dip"
      android:layout_height="46dip"
      android:layout_alignParentRight="true"
      android:layout_centerVertical="true" />
  </RelativeLayout> 

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

    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_centerVertical="true"
      android:text="保留原图"
      android:textSize="15sp" /> 

    <com.example.hellojni.SlideSwitch
      android:id="@+id/slideSwitch2"
      android:layout_width="116dip"
      android:layout_height="46dip"
      android:layout_alignParentRight="true"
      android:layout_centerVertical="true" />
  </RelativeLayout> 

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

    <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_centerVertical="true"
      android:text="拍照声音"
      android:textSize="15sp" /> 

    <com.example.hellojni.SlideSwitch
      android:id="@+id/slideSwitch3"
      android:layout_width="116px"
      android:layout_height="46px"
      android:layout_alignParentRight="true"
      android:layout_centerVertical="true" />
  </RelativeLayout> 

  <TextView
    android:id="@+id/textViewTip"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="TextView" /> 

</LinearLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。