前言
最近经常交替使用android和ios手机。对于两个系统，从我们常用的列表来看，android一般的列表菜单是通过长按出来的，而ios是通过滑动出现的。比如我们常用的微信，对于android版本，长按某个聊天好友，会弹出 标为未读，置顶聊天，删除聊天 选项；对于ios的版本，右滑，会显示出 标为未读，删除 选项
---------------------------------我是分割线---------------------------------
1. 滑动view
1.1 内容展示
我在android上面，实现了一个滑动的view，模仿的是微信的ios版，先简单列举一下功能，直接上图，看着比较直观一些。下面我放了四个动画，分别是：滑动展开，单击，长按，双击。
滑动效果
滑动展开
单击选择效果
单击选择
长按、双击效果
长按和双击效果
1.2 功能介绍
这个滑动view是一个自定义view，里面主要用了属性动画，触摸检测，触摸反馈，配合测量完成。
使用时，只需要在布局文件里面调用就可以，和 textview 等常用控件一样，像这个样子。
在activity里面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
slideview = findviewbyid(r.id.slide_view1); slideview.setonclicklistener(new listener.onmenuclicklistener() { @override public void onclick(int id) { switch(id){ case r.id.menu_a: util.toast("点击 删除"); break; case r.id.menu_b: util.toast("点击 设为未读"); break; case r.id.sure_delete: util.toast("点击 确认删除"); break; case r.id.long_press: util.toast("长按"); vibratorlib.vibrateshort(); break; case r.id.double_click: util.toast("双击"); break; } } }); |
在xml里面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<android.support.constraint.constraintlayout ...... <demo.com.library.view.slideview android:id="@+id/slide_view1" ... app:image_src="@drawable/crekerli_pig" app:image_margin_start="10dp" app:image_slide_length="60dp" app:title_text="@string/title" app:title_text_size="20sp" app:title_text_color="@color/colorblack" app:title_text_margin_start="10dp" app:message_text="@string/message" app:message_text_size="12sp" app:message_text_color="@color/colorblack" app:message_text_margin_start="10dp" app:menu_a_background="@color/colorred" app:menu_a_text="@string/delete" app:menu_a_text_size="20sp" app:menu_a_aspect="1" app:menu_b_background="@color/colorgray" app:menu_b_text="@string/set" app:menu_b_text_size="20sp" app:menu_b_aspect="1.2"/> ... |
从xml文件里面，细心一点儿可以看出我对slideview的内容分成了 image title message menu_a menu_b 五个部分。对应到view里面，看下面的图示：
页面展开前
页面展开后
下面分别介绍一下五个部分。
2. 五个部分
2.1 image
image 表示用户头像，里面有三个配置参数
|
1
2
3
4
5
6
|
app:image_src="@drawable/crekerli_pig"app:image_margin_start="10dp"app:image_slide_length="60dp"image_srcimage_margin_startimage_slide_length |
2.2 title
|
1
2
3
4
5
6
7
8
|
app:title_text="@string/title"app:title_text_size="20sp"app:title_text_color="@color/colorblack"app:title_text_margin_start="10dp"title_texttitle_text_sizetitle_text_colortitle_text_margin_start |
2.3 message
|
1
2
3
4
5
6
7
8
|
app:message_text="@string/message"app:message_text_size="12sp"app:message_text_color="@color/colorblack"app:message_text_margin_start="10dp"message_textmessage_text_sizemessage_text_colormessage_text_margin_start |
2.4 menu
menu_a 和menu_b的内容是一样的，所以这里放在一起统一讲
|
1
2
3
4
5
6
7
8
|
app:menu_a_background="@color/colorred"app:menu_a_text="@string/delete"app:menu_a_text_size="20sp"app:menu_a_aspect="1"app:menu_a_backgroundorapp:menu_a_textapp:menu_a_text_sizeapp:menu_a_aspect |
slideview github详细地址
总结
以上所述是小编给大家介绍的模仿ios版微信的滑动view效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！原文链接：https://www.jianshu.com/p/737891a4acc3
