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