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

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

手Q左视图的展现方式

细部动画

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

适配逻辑

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

对比图如下:

4 寸:

4.7 寸:

开始仿制

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

使用 StoryBoard 构造左视图

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

注:

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

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

效果图如下:

上图中我为了能够显示出白色的字把 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

查看效果

动画效果

适配性

3.5 寸:

4.0 寸:

4.7 寸:

5.5 寸:

再造 “手机QQ” 侧滑菜单(二)——高仿左视图的更多相关文章

  1. 再造 “手机QQ” 侧滑菜单(三)——视图联动

    代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ 本 文中,我们将一起使用 UINavigationController 来管理主视图,并实现点击 ...

  2. 再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

    本系列文章中,我们将尝试再造手机QQ的侧滑菜单,力争最大限度接近手Q的实际效果,并使用 Auto Layout 仿造左侧菜单,实现和主视图的联动. 代码示例:https://github.com/jo ...

  3. 实现“手机qq”侧滑菜单 -- 吴欧

    基本数据采集 经过体验,手机QQ采用的应该是线性动画,即视图缩放比例等随手指在屏幕上滑动的距离以一次方程的形式变化. 提取基本数据,向右侧滑达到最大幅度时: 1.   右侧主视图左边界距离屏幕左边界的 ...

  4. iOS仿QQ侧滑菜单、登录按钮动画、仿斗鱼直播APP、城市选择器、自动布局等源码

    iOS精选源码 QQ侧滑菜单,右滑菜单,QQ展开菜单,QQ好友分组 登录按钮 3分钟快捷创建高性能轮播图 ScrollView嵌套ScrolloView(UITableView .UICollecti ...

  5. 自定义控件?试试300行代码实现QQ侧滑菜单

    Android自定义控件并没有什么捷径可走,需要不断得模仿练习才能出师.这其中进行模仿练习的demo的选择是至关重要的,最优选择莫过于官方的控件了,但是官方控件动辄就是几千行代码往往可能容易让人望而却 ...

  6. 史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  7. Swift实战-小QQ(第2章):QQ侧滑菜单

    QQ侧滑实现架构:需要建立以下几个ViewController:1.XQBaseViewController 2.LeftViewController3.RightViewController4.Co ...

  8. 仿QQ侧滑菜单<大自然的搬运工-代码不是我的>

    1.记录下效果图 2.二个工具类 package myapplication.com.myapplicationfortest.utils; import android.util.Log; /** ...

  9. 如鹏网仿QQ侧滑菜单:ResideMenu组件的使用笔记整理+Demo

    ResideMenu菜单 课堂笔记: https://github.com/SpecialCyCi/AndroidResideMenu Github:如何使用开源组件1. 下载 下载方式: 1. 项目 ...

随机推荐

  1. HDU 1787 GCD Again

    题目大意:求小于n的gcd(i,n)大于1的个数: 题解:欧拉函数直接求gcd(i,n)==1的个数  用n减即可 #include <cstdio> int eular(int n){ ...

  2. SqlServer2012导入Oracle详细案例

    第一次使用SqlServer2012,界面和VS2012风格一致了,Great! 进入正题,这篇博文主要写一下自己亲测的一个案例,使用SqlServer2012的“导入和导出数据”功能向Oracle1 ...

  3. HDU 2527

    题目描述          HDU 2527 分析         霍夫曼编码的应用.         本题没有必要构造一棵完整的霍夫曼树.只需利用霍夫曼编码的原理,每次挑选频率最低的两个元素进行合并 ...

  4. iOS中怎样加入自己定义的字体

    苹果对于开发,确实在细节方面下了非常大的功夫,只是不管一个平台下多大的功夫,仍然会有些需求是无法涵盖的.比方字体吧. 我们的应用为了能更加个性化.会须要不同的字体.有时候有些字体是非常特殊的.甚至是购 ...

  5. BCS--使用SharePoint Designer创建外部内容类型

    使用SharePoint Designer创建外部列表(也可以在浏览器中创建列表) http://www.cnblogs.com/haogj/archive/2011/05/01/2033845.ht ...

  6. UML初了解

    最近项目中有看UML图,很是模糊一些东西,今天查资料,发现这篇博文很好,转载了,也解了不少疑惑. 原文:http://www.uml.org.cn/oobject/201008311.asp 在绘画U ...

  7. C++之对象存储空间_对象模型

    C++编译器如何完成面向对象理论向计算机程序的转化 #include<stdio.h>//////c++对象模型和结构体一样         class Test            { ...

  8. memcache学习使用

    一.安装 二.telnet测试 启动:memcached -d -m 120.24.242.100 -p 11211 -u root 测试:telnet localhost 11211 >> ...

  9. SQLserver查询数据类型为ntext是空或NULL值的方法

    --为空的值text ntext select * from lf_newsNg_utf where datalength(newsContentE)=0 or datalength(newsCont ...

  10. python--data type

    1.Python中常见的数据类型有: 数据类型    内建函数 整型    int(),long() 浮点型    float() 字符串型    str() 列表    list() 元组    t ...