再造 “手机QQ” 侧滑菜单(二)——高仿左视图

2015-4-11   /   字数:1223   /   阅读数:24887   /   分类: iOS & Swift     

代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ

本篇文章中,我们将一起使用 Auto Layout 高仿手Q的左侧视图,力争达成从布局到动画的全面类似。由于实现过程繁复,本文将主要讲述思路和心得体会,将不再大段大段地粘贴代码。

手Q左视图的展现方式

细部动画

仔细观察,在把主页往右拖动时,左侧菜单有一个平移和放大的结合动画,并且有一层黑色遮罩层,透明度在不断变化,如下图:

Image

适配逻辑

我对比了 4 寸屏幕和 4.7 寸屏幕上的左视图,很明点的一点是,4.7 寸屏幕上的元素尺寸和字体都比 4 寸屏幕上的大一点,并且有明显的模糊,故手Q采用的应该是 4 寸以上屏幕等比放大的方案。

对比图如下:

4 寸:

Image

4.7 寸:

Image

开始仿制

弄明白手Q的实现细节之后,我们就开始着手实现界面及功能了。

使用 StoryBoard 构造左视图

在 StoryBoard 中新增一个 View Controller,并新增一个名为 LeftViewController 的 UIViewController 类,并在 StoryBoard 中完成绑定。然后搭建出左视图的界面,并使用 Auto Layout 进行完全约束。

注:

* 不熟悉 Auto Layout 的同学可以阅读《Auto Layout 使用心得》系列文章。

* 在普通 UIViewController 中使用 UITableView 的方法请看:《如何在普通 UIViewController 中使用 UITableView》

效果图如下:

Image

上图中我为了能够显示出白色的字把 LeftViewController 主 view 的背景调成了绿色,默认使用 Default 即可(透明色)。

取出左视图并增加遮罩层

代码:https://github.com/johnlui/SwiftSideslipLikeQQ/blob/master/SwiftSideslipLikeQQ/ViewController.swift#L34-L50

这里有一点心得体会:为了保证 LeftViewController 中各类事件的正常相应,需要给 ViewController 增加成员变量(对象):

var leftViewController: LeftViewController!

这跟 《AVAudioPlayer 如何在页面呈现之后按需初始化》 中提出的解决方案是一个道理。

完善跟左视图有关的动画代码,过于繁复请大家直接参考项目代码,此处不再表述:

https://github.com/johnlui/SwiftSideslipLikeQQ/blob/master/SwiftSideslipLikeQQ/ViewController.swift

查看效果

动画效果

Image

适配性

3.5 寸:

Image

4.0 寸:

Image

4.7 寸:

Image

5.5 寸:

Image


下一步:再造 “手机QQ” 侧滑菜单(三)——视图联动

WRITTEN BY

avatar

评论:

不杀生
2016-11-23 15:43
您好  我想问下 有OC 版本的吗  swift  的看得太吃力了
ZhangYuJuan
2015-08-03 22:29
我的左视图tableview的cell不能变成透明,按你的代码来写的。
还有个问题就是,我想先进入otherpage,但不想让Homepage通过show产生的返回按钮起作用该怎么做?
JohnLui
2015-08-04 10:57
@ZhangYuJuan:设置 tableView 的背景色为 default 即可。
禁用返回按钮的方式就太多了,直接拿掉都可以,在 OtherPage 里通过 self.navigationItem 操作。
lastcc
2015-07-18 15:53
就是这里"Reset to suggested constraints" 遇到报错 "Interface Builder internal error..." Xcode 6.4.
我哭了 清除了所有约束还是报错...
有人知道吗,是不是image assets不能直接从另一个工程里拖过来啊。
lion
2015-04-13 14:16
我的xcode版本是6.2的。
JohnLui
2015-04-13 14:38
@lion: 升级一下啦~

发表评论:

© 2011-2024 岁寒  |  Powered by Emlog