前言
-
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）要求高
