iOS - Frame 项目架构
前言
iOS 常见的几种架构:
- 标签式 Tab Menu
- 列表式 List Menu
- 抽屉式 Drawer
- 瀑布式 Waterfall
- 跳板式 Springborad
- 陈列馆式 Gallery
- 旋转木马式 Carousel
- 点聚式 Plus
1、标签式
优点:
1、清楚当前所在的入口位置
2、轻松在各入口间频繁跳转且不会迷失方向
3、直接展现最重要入口的内容信息
缺点:
功能入口过多时,该模式显得笨重不实用
2、列表式
优点:
1、层次展示清晰
2、可展示内容较长的标题
3、可展示标题的次级内容
缺点:
1、同级内容过多时,用户浏览容易产生疲劳
2、排版灵活性不是很高
3、只能通过排列顺序、颜色来区分各入口重要程度
3、抽屉式
优点:
1、兼容多种模式
2、扩展性好
缺点:
1、隐藏框架中其他入口
2、对入口交互的功能可见性(affordance)要求高
3.1 抽屉式架构简单实现
ViewController.m
#import "ViewController.h"
#import "QCMainViewController.h"
#import "QCDrawerViewController.h" // 设定抽屉视图的宽度
#define DRAWER_VC_WIDTH ((self.view.bounds.size.width * 3) / 4) @interface ViewController () @property (nonatomic, strong) QCMainViewController *mainVC;
@property (nonatomic, strong) UINavigationController *mainNVC; @property (nonatomic, strong) QCDrawerViewController *drawerVC; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; // 添加主视图
self.mainVC = [[QCMainViewController alloc] init];
self.mainNVC = [[UINavigationController alloc] initWithRootViewController:self.mainVC];
[self addChildViewController:self.mainNVC];
[self.view addSubview:self.mainNVC.view]; // 添加抽屉视图
self.drawerVC = [[QCDrawerViewController alloc] init];
self.drawerVC.view.frame = CGRectMake(-DRAWER_VC_WIDTH, 0, DRAWER_VC_WIDTH, self.view.bounds.size.height);
[self addChildViewController:self.drawerVC];
[self.view addSubview:self.drawerVC.view]; // 抽屉视图显示/隐藏回调
__weak typeof(self) weakSelf = self;
self.mainVC.myBlock = ^(BOOL isPush){ CGRect mainNVCFrame = weakSelf.self.mainNVC.view.bounds;
CGRect drawerVCFrame = weakSelf.self.drawerVC.view.bounds; mainNVCFrame.origin.x = isPush ? DRAWER_VC_WIDTH : 0;
drawerVCFrame.origin.x = isPush ? 0 : -DRAWER_VC_WIDTH; [UIView animateWithDuration:0.5 animations:^{
weakSelf.mainNVC.view.frame = mainNVCFrame;
weakSelf.drawerVC.view.frame = drawerVCFrame;
}];
};
} @end
QCMainViewController.h
#import <UIKit/UIKit.h> @interface QCMainViewController : UIViewController @property (nonatomic, copy) void (^myBlock)(BOOL); @end
QCMainViewController.m
#import "QCMainViewController.h" @interface QCMainViewController () @property (nonatomic, assign, getter = isPush) BOOL push; @end @implementation QCMainViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor yellowColor]; self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"抽屉" style:UIBarButtonItemStylePlain target:self action:@selector(pushDrawer)]; // 功能测试
for (NSUInteger i = 0; i < 5; i++) {
UIButton *btn = [[UIButton alloc] init];
[self.view addSubview:btn];
btn.frame = CGRectMake(20, 200 + i * 60, 100, 50);
btn.tag = i +1;
[btn setTitle:[NSString stringWithFormat:@"按钮 %li", i + 1] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
}
} // 功能测试
- (void)btnClick:(UIButton *)btn {
NSLog(@"按钮 %li", btn.tag);
} // 抽屉视图显示/隐藏
- (void)pushDrawer { self.push = !self.isPush; if (self.myBlock != nil) {
self.myBlock(self.isPush);
}
} // 触摸手势抽屉视图显示/隐藏
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { if (self.isPush) {
[self pushDrawer];
}
} @end
QCDrawerViewController.m
#import "QCDrawerViewController.h" @interface QCDrawerViewController () @end @implementation QCDrawerViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor blueColor]; // 功能测试
for (NSUInteger i = 0; i < 5; i++) {
UIButton *btn = [[UIButton alloc] init];
[self.view addSubview:btn];
btn.frame = CGRectMake(20, 200 + i * 60, 100, 50);
btn.tag = i +1;
[btn setTitle:[NSString stringWithFormat:@"功能 %li", i + 1] forState:UIControlStateNormal];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
}
} // 功能测试
- (void)btnClick:(UIButton *)btn {
NSLog(@"功能 %li", btn.tag);
} @end
效果
3.2 抽屉式架构第三方框架实现
第三方框架 GitHub 地址
效果
4、瀑布式
优点:
1、浏览时产生流畅体验
缺点:
1、缺乏对整体内容的体积感,容易发生空间位置迷失
2、浏览一段时间后,容易产生疲劳感
5、跳板式
优点:
1、清晰展现各入口
2、容易记住各入口位置,方便快速找到
缺点:
1、无法在多入口间灵活跳转,不适合多任务操作
2、容易形成更深的路径
3、不能直接展现入口内容
4、不能显示太多入口次级内容
6、陈列馆式
优点:
1、直观展现各项内容
2、方便浏览经常更新的内容
缺点:
1、不适合展现顶层入口框架
2、容易形成界面内容过多,显得杂乱
3、设计效果容易呆板
7、旋转木马式
优点:
1、单页面内容整体性强
2、线性的浏览方式有顺畅感、方向感
缺点:
1、不适合展示过多页面
2、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面
3、由于各页面内容结构相似,容易忽略后面的内容
8、点聚式
优点:
1、灵活
2、展示方式有趣
3、使界面更开阔
缺点:
1、隐藏框架中其他入口
2、对入口交互的功能可见性(affordance)要求高
iOS - Frame 项目架构的更多相关文章
- iOS项目架构文档
设计的项目架构主要引用MVVM+MVC架构,并以功能模块分级.以下为目录结构. 初级目录: 我们只需要关注SGZH文件夹下的目录,其他为Xcode管理的目录.可以看到此目录为项目初级目录,我们开发过程 ...
- 李洪强iOS开发之 - 项目架构
李洪强iOS开发之 - 项目架构 01 - 在Appdelegate中设置跟控制器 //导入头文件
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- 直接拿来用!最火的iOS开源项目
1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS.Mac OS X网络通信类库,现在是G ...
- (转)直接拿来用!最火的iOS开源项目(二)
“每一次的改变总意味着新的开始.”这句话用在iOS上可谓是再合适不过的了.GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7, ...
- 无限互联IOS电影项目视频笔记
下面是该iOS项目视频教程的内容大纲: 观看指南 (1)项目为第一阶段内容 (2)需要熟练掌握OC语言 (3)UI部分需要学习到第十节课 (4)项目适合刚入门的iOS开发者 1.第一天 (1)iOS ...
- GitHub上最火的40个iOS开源项目
1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS. Mac OS X网络通信类库,现在是 ...
- GitHub上有很多不错的iOS开源项目
GitHub上有很多不错的iOS开源项目,个人认为不错的,有这么几个:1. ReactiveCocoa:ReactiveCocoa/ReactiveCocoa · GitHub:GitHub自家的函数 ...
- GitHub上非常受开发者欢迎的iOS开源项目(二)
"每一次的改变总意味着新的开始."这句话用在iOS上可谓是再合适不过的了.GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x ...
随机推荐
- 使用 Grafana、collectd 和 InfluxDB 打造现代监控系统
想打造 New Relic 那样漂亮的实时监控系统我们只需要 InfluxDB/collectd/Grafana 这三个工具,这三个工具的关系是这样的: 采集数据(collectd)-> 存储数 ...
- Linux modules install
安装模块的时候出现错误:modprobe: chdir(3.0.35-g6774ed9-dirty): No such file or directory. 内核模块没有安装正确.本文记录解决方法. ...
- 关于iOS去除数组中重复数据的几种方法
关于iOS去除数组中重复数据的几种方法 在工作工程中我们不必要会遇到,在数组中有重复数据的时候,如何去除重复的数据呢? 第一种:利用NSDictionary的AllKeys(AllValues)方 ...
- 使用curl命令操作elasticsearch
使用curl命令操作elasticsearch 大岩不灿 发表于 2015年4月25日 浏览 7,426 次 第一:_cat系列_cat系列提供了一系列查询elasticsearch集群状态的接口.你 ...
- in-list iterator
in-list iterator --针对目标sql的in后面是常量集合的首选项处理方法,其处理效率通常都会比in-list expansion高--使用in-list iterator的时候,in所 ...
- StringByAppendingPathComponent和stringByAppendingString的区别
cyy:自我理解,不保证正确,但亲自试验确实可行:若用 stringByAppendingString 则需要手动在名称前加 “/”符号,而stringByAppendingPathComponen ...
- ZOJ 3781 Paint the Grid Reloaded(BFS)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3781 Leo has a grid with N rows an ...
- asp获取文件名和扩展名的函数代码
<% '获取文件名(不含扩展名) Function getFilename(text)text = Left(text,inStrRev(text,".")-1)getFil ...
- 《zw版·Halcon-delphi系列原创教程》 酸奶自动分类脚本(机器学习、人工智能)
<zw版·Halcon-delphi系列原创教程>酸奶自动分类脚本(机器学习.人工智能) Halcon强大的图像处理能力,令人往往会忽视其内核,是更加彪悍的机器学习.人工智能. ...
- debuggee python
my_debugger_defines.py #encoding:utf-8 from ctypes import * from sys import version as py_ver # In p ...