iOS - Frame 项目架构

2016-09-05 1237

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前言iOS 常见的几种架构：标签式 Tab Menu列表式 List Menu抽屉式 Drawer瀑布式 Waterfall跳板式 Springborad陈列馆式 Gallery旋转木马式 Carousel点聚式 Plus1、标签式优点：1、清楚当前所在的入口...

前言

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