前言

• 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 项目架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。