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