再造 “手机QQ” 侧滑菜单(二)——高仿左视图
本篇文章中,我们将一起使用 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 即可(透明色)。
取出左视图并增加遮罩层
这里有一点心得体会:为了保证 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” 侧滑菜单(二)——高仿左视图的更多相关文章
- 再造 “手机QQ” 侧滑菜单(三)——视图联动
代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ 本 文中,我们将一起使用 UINavigationController 来管理主视图,并实现点击 ...
- 再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果
本系列文章中,我们将尝试再造手机QQ的侧滑菜单,力争最大限度接近手Q的实际效果,并使用 Auto Layout 仿造左侧菜单,实现和主视图的联动. 代码示例:https://github.com/jo ...
- 实现“手机qq”侧滑菜单 -- 吴欧
基本数据采集 经过体验,手机QQ采用的应该是线性动画,即视图缩放比例等随手指在屏幕上滑动的距离以一次方程的形式变化. 提取基本数据,向右侧滑达到最大幅度时: 1. 右侧主视图左边界距离屏幕左边界的 ...
- iOS仿QQ侧滑菜单、登录按钮动画、仿斗鱼直播APP、城市选择器、自动布局等源码
iOS精选源码 QQ侧滑菜单,右滑菜单,QQ展开菜单,QQ好友分组 登录按钮 3分钟快捷创建高性能轮播图 ScrollView嵌套ScrolloView(UITableView .UICollecti ...
- 自定义控件?试试300行代码实现QQ侧滑菜单
Android自定义控件并没有什么捷径可走,需要不断得模仿练习才能出师.这其中进行模仿练习的demo的选择是至关重要的,最优选择莫过于官方的控件了,但是官方控件动辄就是几千行代码往往可能容易让人望而却 ...
- 史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。
重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...
- Swift实战-小QQ(第2章):QQ侧滑菜单
QQ侧滑实现架构:需要建立以下几个ViewController:1.XQBaseViewController 2.LeftViewController3.RightViewController4.Co ...
- 仿QQ侧滑菜单<大自然的搬运工-代码不是我的>
1.记录下效果图 2.二个工具类 package myapplication.com.myapplicationfortest.utils; import android.util.Log; /** ...
- 如鹏网仿QQ侧滑菜单:ResideMenu组件的使用笔记整理+Demo
ResideMenu菜单 课堂笔记: https://github.com/SpecialCyCi/AndroidResideMenu Github:如何使用开源组件1. 下载 下载方式: 1. 项目 ...
随机推荐
- http://download.qt-project.org/archive/qt/4.5/qt-all-opensource-src-4.5.2.tar.bz2
Index of /archive/qt/4.5 http://download.qt-project.org/archive/qt/4.5/qt-all-opensource-src-4.5.2.t ...
- Android JNI入门第二篇——Java参数类型与本地参数类型对照
前面一篇通过简单的例子介绍了android中JNI的使用.这一篇从基础上了解一些Java参数类型与本地参数类型区别. 1) java中的返回值void和JNI中的void是完全对应的哦! ...
- Sql server 事务 存储过程
事务( Transaction )是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 通过事务,SQL Server能将逻辑相关的一组操作绑定在一起, ...
- UC/0S2之中断
中断是计算机系统处理异步事件的重要机制.当异步事件发生时,事件通常是通过硬件向cpu发出中断请求的.在一般情况下,cpu响应这个请求后会立即运行中断服务程序来处理该事件: 为了处理任务延时.任务调度等 ...
- 浅谈CSS布局
在No.4中谈及了下盒子模型,引出布局模型 1.布局模型有三类: 1)流动模型 flow(默认) 2)浮动模型 float 3)层模型 layer 2.文档流 :指的是文本沿着从左到右的方向展开 ...
- CSS样式表基础知识、样式表的分类及选择器
一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 二.样式表的分类 1.内联样式表(和html联合 ...
- Querying Microsoft SQL Server 2012 读书笔记:查询和管理XML数据 1 -使用FOR XML返回XML结果集
XML 介绍 <CustomersOrders> <Customer custid="1" companyname="Customer NRZBB&qu ...
- js求指定时间的周一和周日
/*计算指定时间的的周一和周日 return=>{mondy:Date,sundy:Date} parms:{ date:指定时间,如果不指定则取当前时间 } */ function getWe ...
- gcc编译4个阶段
gcc的编译流程分为四个步骤,分别为:· 预处理(Pre-Processing) -E· 编译(Compiling) -S· 汇编(Assembling) -c· 链接 ...
- Linux的五个查找命令find,locate,whereis,which,type
Linux的五个查找命令 1. find 最常见且最强大的命令,可以查找任何文件. 格式 $ find 指定目录 指定条件 指定动作 指定目录: 所要搜索的目录及其子目录,默认当前目录 ...