Android编程实现可滑动的开关效果(附demo源码下载)
程序员文章站
2024-02-29 19:19:28
本文实例讲述了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程序设计有所帮助。
上一篇: 阿里云短信服务
下一篇: SpringBoot个性化配置的方法步骤
推荐阅读
-
Android编程实现可滑动的开关效果(附demo源码下载)
-
Android编程实现可滑动的开关效果(附demo源码下载)
-
Android TreeView效果实现方法(附demo源码下载)
-
Android重写TextView实现文字整齐排版的方法(附demo源码下载)
-
Android编程滑动效果之倒影效果实现方法(附demo源码下载)
-
Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)
-
Android TreeView效果实现方法(附demo源码下载)
-
Android重写TextView实现文字整齐排版的方法(附demo源码下载)
-
Android编程实现简易弹幕效果示例【附demo源码下载】
-
Android编程实现仿QQ发表说说,上传照片及弹出框效果【附demo源码下载】