清泛IT社区App Inventor 2 中文社区

搜索

扫码访问移动社区 移动社区,您的掌上技术专家

关注我,精彩不错过! 关注我,精彩不错过!

扫码安装最新版AI伴侣 最新版AI伴侣v2.72

Aia Store .aia 源码一站式解决方案 发布日志AI2连接测试ai2Starter模拟器

开通会员送SVIPApp Inventor 2 拓展有奖征文 VIP会员享专有教程,免费赠送基础版*技术支持服务! AI2入门必读中文文档中文教程IoT专题

查看: 6244|回复: 0
打印 上一主题 下一主题

[经验分享] 【转】AppInventor2 在同一屏幕内制作页面滑动切换效果

  • TA的每日心情
    开心
    昨天 07:12
  • 签到天数: 264 天

    [LV.8]以坛为家I

    510

    主题

    882

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    21562

    AI2中文网VIP弹球达人接水果达人撸猫达人

    跳转到指定楼层
    楼主
    发表于 2024-05-12 11:35:17 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    不知有没有人注意到微信的页面切换方式,微信底部有四个Tab标签,分别是消息、联系人、发现和我。很多人都习惯于直接点击图标进行切换,其实还可以左右滑动进行切换的。如图:
    规则一般如下:如果滑动距离超过屏幕的一半,则切换屏幕,否则回到原屏幕。
    我们今天就参照微信的界面制作的一个应用
    组件如下:
    设计如下:
    第一列的列表显示框中联系人1到联系人20用于模拟微信内的联系人,可以垂直滚动。
    剩下三列为了能够更好地看到切换效果而设置成不同的背景颜色。
    最下面是一个水平布局,用于模拟微信中的底部菜单。
    既然要模拟屏幕切换的效果,那就要将四列的宽度全部设置为屏幕的宽度,这个设置无法在设计视图中进行设置,所以我们在编程视图中的屏幕初始化时进行设置。
    注意不能设置为“充满”。
    我们需要一个不可见的扩展插件,就是滚动布局手势识别扩展插件。
    其属性设置如下:
    同时在屏幕初始化的时候也声明其对应的组件名称
    然后,所有组件布置好以后,我们来研究以下距离的关系
    左侧红色方框表示可见区域,黑色方框表示整个水平滚动条布局的总长度。图中上方表示的是每一个垂直(滚动条)布局的边界的位置,即控制水平滚动条布局ScrollTo的值。下面表示的是每个布局中部的距离,即滑动距离在凡两条蓝色虚线之间的位置者,就滑动至靠右的布局当中。搞清楚了数值关系以后就可以开工了。
    根据上面的数据关系可以得出
    再把过程加上去
    然后进行编译并测试。发现无法滑动,总是出现跳动的情况,其实在滑动过程中每时每刻都会触发scrollChanged事件,所以如果用户还没有滑动到位,就触发该事件,并进行判断,进而进行处理,那么用户永远也无法切换页面。
    首先,我们要将局部变量scrollX变成全局变量Global scrollX。使用当水平滚动条布局被松开事件,当水平滚动条布局被松开的时候,再行判断,这样就能保证用户已经滑动到位了再进行判断了。
    再次进行测试。发现根本没有切换页面的效果。其实我们只需要一个计时器就可以了,在滚动条布局被松开的时候开始计时,100毫秒以后再行判断,大功告成了。
    另外,标签菜单的按钮被点击时也可以进行切换哦。
    完整代码如下:
    软件运行效果如下:


    拓展下载:https://bbs.tsingfun.com/thread-1632-1-1.html
    原文来源:https://mp.weixin.qq.com/s/1k6PFZT7HANyUEG3q1PnLQ
    App Inventor 2 中文网 - MIT同步更新的中文本土化平台!v2.72 支持Android 14 更新日志
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    © 2024 tsingfun.com, Inc.  沪ICP备2020034476号-1  沪公网安备31011702000040号

    GMT+8, 2024-11-05 05:28 , Processed in 0.027370 second(s), 42 queries .