Android编程实现可滑动的开关效果(附demo源码下载)

本文实例讲述了android编程实现可滑动的开关效果。分享给大家供大家参考，具体如下：

闲着没事，把之前写的一个demo放上来分享下。就是一个开关，实现可滑动和动画效果。不是图片切换。

好了，先上图：

完整实例代码点击此处。

直接把自定义的这个view代码放上来，有注释应该很好理解：
首先是布局：

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/sv_container"
  android:layout_width="230dip"
  android:layout_height="38dip"
  android:background="@drawable/usage_list_dark" >
  <imageview
    android:id="@+id/iv_switch_cursor"
    android:layout_width="120dip"
    android:layout_height="36dip"
    android:layout_centervertical="true"
    android:layout_marginleft="0.5dip"
    android:layout_marginright="0.5dip"
    android:background="@drawable/usage_list_green" />
  <linearlayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center" >
    <textview
      android:id="@+id/switch_text_true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:gravity="center"
      android:text="开" />
    <textview
      android:id="@+id/switch_text_false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:gravity="center"
      android:text="关" />
  </linearlayout>
</relativelayout>

接着是这个view的代码，继承自linearlayout ：

package com.lxb.switchdemo;
import android.content.context;
import android.graphics.color;
import android.os.handler;
import android.os.message;
import android.view.layoutinflater;
import android.view.motionevent;
import android.view.view;
import android.view.view.onclicklistener;
import android.view.animation.animation;
import android.view.animation.animation.animationlistener;
import android.view.animation.linearinterpolator;
import android.view.animation.translateanimation;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.relativelayout;
import android.widget.textview;
public class switchview extends linearlayout implements onclicklistener {
  private static final int flag_move_true = 1; // 向左滑动标识
  private static final int flag_move_false = 2; // 向右滑动标识
  private static final int handle_layout_cursor = 100; // 处理调用开关的layout方法
  private context context; // 上下文对象
  private relativelayout sv_container; // switchview的外层layout
  private imageview iv_switch_cursor; // 开关邮标的imageview
  private textview switch_text_true; // true的文字信息控件
  private textview switch_text_false; // false的文字信息控件
  private boolean ischecked = true; // 是否已开
  private boolean checkedchange = false; // ischecked是否有改变
  private oncheckedchangelistener oncheckedchangelistener; // 用于监听ischecked是否有改变
  private int margin = 1; // 游标离边缘位置(这个值视图片而定, 主要是为了图片能显示正确)
  private int bg_left; // 背景左
  private int bg_right; // 背景右
  private int cursor_left; // 游标左部
  private int cursor_top; // 游标顶部
  private int cursor_right; // 游标右部
  private int cursor_bottom; // 游标底部
  private animation animation; // 移动动画
  private int currentflag = flag_move_true; // 当前移动方向flag
  public switchview(context context) {
    super(context);
    this.context = context;
    initview();
  }
  @override
  protected void onlayout(boolean changed, int l, int t, int r, int b) {
    super.onlayout(changed, l, t, r, b);
    // 获取所需要的值
    bg_left = sv_container.getleft();
    bg_right = sv_container.getright();
    cursor_left = iv_switch_cursor.getleft();
    cursor_top = iv_switch_cursor.gettop();
    cursor_right = iv_switch_cursor.getright();
    cursor_bottom = iv_switch_cursor.getbottom();
  }
  private handler mhandler = new handler() {
    @override
    public void handlemessage(message msg) {
      switch(msg.what) {
      case handle_layout_cursor:
        iv_switch_cursor.layout(cursor_left, cursor_top, cursor_right, cursor_bottom);
        break;
      }
    }
  };
  public void onclick(view v) {
    // 控件点击时触发改变checked值
    if(v == this) {
      changechecked(!ischecked);
    }
  }
  /**
   * 初始化控件
   */
  private void initview() {
    layoutinflater inflater = (layoutinflater) context.getsystemservice(context.layout_inflater_service);
    view view = inflater.inflate(r.layout.switch_view, this);
    view.setonclicklistener(this);
    sv_container = (relativelayout) view.findviewbyid(r.id.sv_container);
    switch_text_true = (textview) view.findviewbyid(r.id.switch_text_true);
    switch_text_false = (textview) view.findviewbyid(r.id.switch_text_false);
    changetextcolor();
    iv_switch_cursor = (imageview) view.findviewbyid(r.id.iv_switch_cursor);
    iv_switch_cursor.setclickable(false);
    iv_switch_cursor.setontouchlistener(new ontouchlistener() {
      int lastx; // 最后的x坐标
      public boolean ontouch(view v, motionevent event) {
        switch(event.getaction()) {
        case motionevent.action_down:
          lastx = (int) event.getrawx();
          cursor_left = v.getleft();
          cursor_top = v.gettop();
          cursor_right = v.getright();
          cursor_bottom = v.getbottom();
          break;
        case motionevent.action_move:
          int dx = (int) event.getrawx() - lastx;
          cursor_left = v.getleft() + dx;
          cursor_right = v.getright() + dx;
          // 超出边界处理
          if(cursor_left <= bg_left + margin) {
            cursor_left = bg_left + margin;
            cursor_right = cursor_left + v.getwidth();
          }
          if(cursor_right >= bg_right - margin) {
            cursor_right = bg_right - margin;
            cursor_left = cursor_right - v.getwidth();
          }
          v.layout(cursor_left, cursor_top, cursor_right, cursor_bottom);
          lastx = (int) event.getrawx();
          break;
        case motionevent.action_up:
          calculateischeck();
          break;
        }
        return true;
      }
    });
  }
  /**
   * 计算处于true或是false区域, 并做改变处理
   */
  private void calculateischeck() {
    float center = (float) ((bg_right - bg_left) / 2.0);
    float cursor_center = (float) ((cursor_right - cursor_left) / 2.0);
    if(cursor_left + cursor_center <= center) {
      changechecked(true);
    } else {
      changechecked(false);
    }
  }
  /**
   * 改变checked, 根据checked移动游标
   * @param ischecked
   */
  private void changechecked(boolean ischecked) {
    if(this.ischecked != ischecked) {
      checkedchange = true;
    } else {
      checkedchange = false;
    }
    if(ischecked) {
      currentflag = flag_move_true;
    } else {
      currentflag = flag_move_false;
    }
    cursormove();
  }
  /**
   * 游标移动
   */
  private void cursormove() {
    // 这里说明一点, 动画本可设置animation.setfillafter(true)
    // 令动画进行完后停在最后位置. 但这里使用这样方式的话.
    // 再次拖动图片会出现异常(具体原因我没找到)
    // 所以最后只能使用onanimationend回调方式再layout游标
    animation = null;
    final int tox;
    if(currentflag == flag_move_true) {
      tox = cursor_left - bg_left - margin;
      animation = new translateanimation(0, -tox, 0, 0);
    } else {
      tox = bg_right - margin - cursor_right;
      animation = new translateanimation(0, tox, 0, 0);
    }
    animation.setduration(100);
    animation.setinterpolator(new linearinterpolator());
    animation.setanimationlistener(new animationlistener() {
      public void onanimationstart(animation animation) {
      }
      public void onanimationrepeat(animation animation) {
      }
      public void onanimationend(animation animation) {
        // 计算动画完成后游标应在的位置
        if(currentflag == flag_move_true) {
          cursor_left -= tox;
          cursor_right = cursor_left + iv_switch_cursor.getwidth();
        } else {
          cursor_right = bg_right - margin;
          cursor_left = cursor_right - iv_switch_cursor.getwidth();
        }
        // 这里不能马上layout游标正确位置, 否则会有一点点闪屏
        // 为了美观, 这里迟了一点点调用layout方法, 便不会闪屏
        mhandler.sendemptymessagedelayed(handle_layout_cursor, 5);
        // 这里是根据是不是改变了ischecked值进行一些操作
        if(checkedchange) {
          ischecked = !ischecked;
          if(oncheckedchangelistener != null) {
            oncheckedchangelistener.oncheckedchanged(ischecked);
          }
          changetextcolor();
        }
      }
    });
    iv_switch_cursor.startanimation(animation);
  }
  /**
   * 改变字体显示颜色
   */
  private void changetextcolor() {
    if(ischecked) {
      switch_text_true.settextcolor(color.white);
      switch_text_false.settextcolor(color.gray);
    } else {
      switch_text_true.settextcolor(color.gray);
      switch_text_false.settextcolor(color.white);
    }
  }
  /**
   * layout游标
   */
  private void layoutcursor() {
    if(ischecked) {
      cursor_left = bg_left + margin;
      cursor_right = bg_left + margin + iv_switch_cursor.getwidth();
    } else {
      cursor_left = bg_right - margin - iv_switch_cursor.getwidth();
      cursor_right = bg_right - margin;
    }
    iv_switch_cursor.layout(cursor_left, cursor_top, cursor_right, cursor_bottom);
  }
  /**
   * ischecked值改变监听器
   */
  public interface oncheckedchangelistener {
    void oncheckedchanged(boolean ischecked);
  }
  public boolean ischecked() {
    return ischecked;
  }
  public void setchecked(boolean ischecked) {
    if(this.ischecked != ischecked) {
      this.ischecked = ischecked;
      if(oncheckedchangelistener != null) {
        oncheckedchangelistener.oncheckedchanged(ischecked);
      }
      layoutcursor();
    }
  }
  public void setoncheckedchangelistener(
      oncheckedchangelistener oncheckedchangelistener) {
    this.oncheckedchangelistener = oncheckedchangelistener;
  }
}

最后是activity使用这个view:

package com.lxb.switchdemo;
import android.app.activity;
import android.os.bundle;
import android.view.view;
import android.view.view.onclicklistener;
import android.widget.button;
import android.widget.linearlayout;
import android.widget.textview;
import android.widget.toast;
import com.lxb.switchdemo.switchview.oncheckedchangelistener;
public class switch_demoactivity extends activity implements onclicklistener {
  private linearlayout layout;
  private textview tv_showcheck;
  private switchview sv;
  private button btn_set_true;
  private button btn_set_false;
  private button btn_getstate;
  @override
  public void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.main);
    layout = (linearlayout) findviewbyid(r.id.layout);
    tv_showcheck = (textview) findviewbyid(r.id.tv_showcheck);
    sv = new switchview(this);
    tv_showcheck.settext("当前状态: " + getstate(sv.ischecked()));
    sv.setoncheckedchangelistener(new oncheckedchangelistener() {
      public void oncheckedchanged(boolean ischecked) {
        tv_showcheck.settext("当前状态: " + getstate(ischecked));
      }
    });
    layout.addview(sv);
    btn_set_true = (button) findviewbyid(r.id.btn_set_true);
    btn_set_false = (button) findviewbyid(r.id.btn_set_false);
    btn_getstate = (button) findviewbyid(r.id.btn_getstate);
    btn_set_true.setonclicklistener(this);
    btn_set_false.setonclicklistener(this);
    btn_getstate.setonclicklistener(this);
  }
  public void onclick(view v) {
    switch(v.getid()) {
    case r.id.btn_set_true:
      sv.setchecked(true);
      break;
    case r.id.btn_set_false:
      sv.setchecked(false);
      break;
    case r.id.btn_getstate:
      toast.maketext(switch_demoactivity.this,
          sv.ischecked() + "", toast.length_short).show();
      break;
    }
  }
  private string getstate(boolean state) {
    if(state) {
      return "开";
    }
    return "关";
  }
}

实现起来还是很简单的，主要还是坐标什么的需要计算与调整。

当然可能还会有一些bug存在，有需要的可以下下来自行修改，也可以和我讨论。

更多关于android相关内容感兴趣的读者可查看本站专题：《android通信方式总结》、《android调试技巧与常见问题解决方法汇总》、《android开发入门与进阶教程》、《android多媒体操作技巧汇总(音频,视频,录音等)》、《android基本组件用法总结》、《android视图view技巧总结》、《android布局layout技巧总结》及《android控件用法总结》

希望本文所述对大家android程序设计有所帮助。