博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
再造 “手机QQ” 侧滑菜单(二)——高仿左视图
阅读量:6156 次
发布时间:2019-06-21

本文共 880 字,大约阅读时间需要 2 分钟。

代码示例:

本篇文章中,我们将一起使用 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 的同学可以阅读系列文章。

* 在普通 UIViewController 中使用 UITableView 的方法请看:

效果图如下:

Image

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

取出左视图并增加遮罩层

代码:

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

var leftViewController: LeftViewController!

这跟 中提出的解决方案是一个道理。

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

查看效果

动画效果

Image

适配性

3.5 寸:

Image

4.0 寸:

Image

4.7 寸:

Image

5.5 寸:

Image

 

转载地址:http://iwsfa.baihongyu.com/

你可能感兴趣的文章
eclipse decompiler
查看>>
记一个搜索网盘资源的网站
查看>>
jdk1.7和jdk1.8的String的getByte方法的差异
查看>>
java父子进程通信
查看>>
Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案
查看>>
Olap学习笔记
查看>>
Codeforces Round #431 (Div. 1)
查看>>
如何进行数组去重
查看>>
将标题空格替换为 '_' , 并自动复制到剪切板上
查看>>
List Collections sort
查看>>
Mysql -- You can't specify target table 'address' for update in FROM clause
查看>>
使用局部标准差实现图像的局部对比度增强算法。
查看>>
2017-2018-1 20165313 《信息安全系统设计基础》第八周学习总结
查看>>
《代码敲不队》第四次作业:项目需求调研与分析
查看>>
菜鸡互啄队—— 团队合作
查看>>
HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法...
查看>>
SparseArray
查看>>
第二章
查看>>
android背景选择器selector用法汇总
查看>>
[转]Paul Adams:为社交设计
查看>>