模仿iOS版微信的滑动View效果

2025-05-29 0 90

前言

最近经常交替使用android和ios手机。对于两个系统,从我们常用的列表来看,android一般的列表菜单是通过长按出来的,而ios是通过滑动出现的。比如我们常用的微信,对于android版本,长按某个聊天好友,会弹出 标为未读,置顶聊天,删除聊天 选项;对于ios的版本,右滑,会显示出 标为未读,删除 选项

———————————我是分割线———————————

1. 滑动view

1.1 内容展示

我在android上面,实现了一个滑动的view,模仿的是微信的ios版,先简单列举一下功能,直接上图,看着比较直观一些。下面我放了四个动画,分别是:滑动展开,单击,长按,双击。

滑动效果

模仿iOS版微信的滑动View效果

滑动展开

单击选择效果

模仿iOS版微信的滑动View效果

单击选择

长按、双击效果

模仿iOS版微信的滑动View效果

长按和双击效果

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里面,看下面的图示:

模仿iOS版微信的滑动View效果

页面展开前

模仿iOS版微信的滑动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_src

image_margin_start

image_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_text

title_text_size

title_text_color

title_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_text

message_text_size

message_text_color

message_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_backgroundor

app:menu_a_text

app:menu_a_text_size

app:menu_a_aspect

slideview github详细地址

总结

以上所述是小编给大家介绍的模仿ios版微信滑动view效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 模仿iOS版微信的滑动View效果 https://www.kuaiidc.com/89128.html

相关文章

发表评论
暂无评论