Skip to content

Latest commit

 

History

History
55 lines (28 loc) · 3.23 KB

weixin-ui-analyse.md

File metadata and controls

55 lines (28 loc) · 3.23 KB

微信界面剖析

微信界面剖析分为:首界面,单个界面,字体大小,素材等。

首界面

可以先查看简单易用的页面栈框架

先看看微信的首界面。有四个分页,BottomBar 可以显示当前页面的以及进行切换。TopBar 显示微信的应用名称和两个按钮。所以首页面的实现可以使用一个横向的 ListView 来实现,内部有四个不同的页面,使用 VisualItemModel 进行加载。

weixin-ui-analyse-01

现在取其中的聊天界面为例子。

weixin-ui-analyse-02

在点开一个联系人进行聊天时,会将一个聊天页面压入页面栈。

weixin-ui-analyse-03

先不管聊天界面是如何实现的。就讲讲页面压栈要注意的问题。

先回到首界面的 Chats。里面有若干个联系人,在点击某一个联系人之后,触发一个函数,将聊天页面压入栈。一般是由 MouseArea 触发 clicked 信号,然后触发页面入栈的函数。

问题来了,由于页面入栈的实现问题,StackView 将一个页面推入栈顶是需要时间的,所以 StackView 会产生一个过渡,来提高用户体验,如果你的手速够快的话,双击某个联系人,会不会触发两次点击事件呢?答案是,会的。所以在触发页面入栈的函数中应该添加一个处理语句,在当前页面 A 要将页面 B 入栈时,在处理函数中添加一句 A.enable = false;,在 B 页面弹出后,设置 A.enable = true;。就不会因为点击过快,触发两次函数,向页面栈压入两个页面了。

ps: 后来在微信上,拼手速,以极快速度点击设置,确实会压入两个或两个以上的设置页面。不同安卓机,有不同响应,版本为 6.2.4。看来是通病啊。在当前页面压入另一个页面时,是需要时间的,在这个处理过程中,当前页面不做屏蔽处理的话,是十分麻烦的。当然,这种误操作只会有程序猿才能发现。

这个 enable 属性为真时,允许处理键盘和鼠标事件。详细查看 Item::enable

字体大小

字体大小,以及安卓各个硬件上差异,进行适配就有些问题了。如何进行字体大小适配?

直接查看 SparrowUI.js 的字体设置大小。使用了 pointSize 这个计量单位可以很好的工作在不同屏幕下。可以按照自己需求改动 UI.js 中的字体大小值。

单个界面

要注意微信在各个屏幕分辨率下,每个可选项的高度,其实是根据字体大小来决定的。例如上下的留白是根据字体的高度。

素材

素材获取来源互联网,所有权归腾讯公司所有。

Model/View

随着研究的深入,我发现,QtQuick 本身提供的 ListModel 不能很好的适应类似于微信这样的界面业务。必须要从 C++ 中重写对应的逻辑模型。

TODO


查看 Sparrow 框架

查看一周 app 计划可以了解到更多的安卓开发的问题。