一个常见的三段式iOS app的开发框架

做开发两年，觉得有必要重新学习下基础的知识，在公司开发时比较依赖前辈写的框架开发，突然想到自己开发一个框架对于自己复习下基础知识很有帮助，于是就有这个项目

一个常见三段式的app就是UITabbarController + UINavigationController + 滑动菜单导航。滑动菜单导航就是上面有个导航菜单，通过滑动切换VC。

这些控件除了滑动菜单，其余的都是系统自带的，但是我们常看见的市面上的UITabarController都不是那么的常规，比如tabbar的中间会带一个自定义的button，用来做发布的功能。而系统自带的UINavigationController则有时候会遇到难以解决的BUG，比如我最近开发一个看短视频的app，发现当使用系统UINavigationController去手动pop或者自动pop时，会导致播放中的视频严重卡顿，找不到正常的进度，而自定义的截屏式导航却不会，看了一下斗鱼等常见的视频app都是采用截屏式看来也是有原因的。

所以我对上面的功能做了封装，使用分类的方式，方便项目的移植。同样还封装了tableView，collectionView，滑动菜单，网络请求（使用AFN），交互控件集成...，使用该框架可以很快速的开发一个如下的app。

image

一个app开发的准备工作

首先需要确定app的风格，比如提示弹框要用什么格式，下拉刷新，上拉加载，普通loading的UI风格又是啥的，一个普通页面的一些通用初始化，比如都是白色背景的页面，后退的back按钮，我把所有这些交互相关的封装成一个控件GDInteraction，确定一个app的UI风格后，通过继承它去确定全局的UI风格，该控件是以分类的方式集成到了UIViewController上，同时默认关闭，以防止影响到一些系统内部的VC，比如键盘依附的VC。

确定完app风格，就需要做网络请求的基本设置，比如加密头，通用头，超时秒数。这就是网络请求控件GDNetwork，通过继承它去自定义通用的网络设置。改控件同样集成到了UIViewController的属性上，可快速的进行页面的网络请求，同时也封装了常用的网络请求方法，进行独立的网络请求。

在app启动时初始化自定义组件的类型

[UIViewController registerNetworkClass:@"GDMyNetwork"];
[UIViewController registerInteractionClass:@"GDMyInteraction"];

这部分由于代码较多，通过下面UIViewController一点点介绍

UITabbarController

如上图看到的tabbar上中间的发布按钮，只需要在UITabbarController初始化时创建一个button即可

//在tabbar加入一个中间btn，直接设置frame，x参数无效，始终置于所有tabItem的中间(count / 2);
UIButton *centerBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, -30, 60, 60)];
[centerBtn setImage:[UIImage imageNamed:@"c_tabbar_post"]   forState:UIControlStateNormal];
self.tabBar.gd_centerBtn = centerBtn;
self.tabBar.gd_centerAction = ^{
            NSLog(@"gd_centerAction");
};

`

UINavigationController

这是一个截屏式的UINavigationController，重写了系统所有的pop，push方法，在整个app生命周期里去设置UINavigationController的截屏是否开启，以及开启后的动画参数即可像使用系统控件一样去使用它

[UINavigationController setScreenShootEnable:YES];
[UINavigationController setPopCoverAlpha:0.6 animationDuration:0.3 minPopWidth:100 maxDragLeft:40];

关于iOS11出现的navigationBarItem偏移问题，这里也有相关的解决方案，使用改变控件的布局标准，代码如下：

UIButton *backBtn = [[UIButton alloc] init];
[backBtn setImage:[UIImage imageNamed:@"navBackIndicatorImg"] forState:UIControlStateNormal];
if (@available(iOS 11.0, *)) {
    //ios11+使用gd_alignmentRectInsets可以任意修改leftBarButtonItems的位置
    backBtn.gd_alignmentRectInsets = UIEdgeInsetsMake(0, 8, 0, -8);
    backBtn.translatesAutoresizingMaskIntoConstraints = NO;
}
backBtn.backgroundColor = [UIColor redColor];
[backBtn addTarget:self action:@selector(pop) forControlEvents:UIControlEventTouchUpInside];
[backBtn sizeToFit];

//ios11-之前下面代码有效，ios11+需要上面的代码加下面的代码才能对bar产生位置偏移
UIBarButtonItem *space = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
                                                                       target:nil
                                                                       action:nil];
space.width = -8;

self.vc.navigationItem.leftBarButtonItems = @[space, [[UIBarButtonItem alloc] initWithCustomView:backBtn]];

UIViewController

这里分成三部分，不展示底层实现，具体看底下源码地址。
这里只展示实现一个功能需要完成的代码量

普通的网络请求展示页面

首先UIViewController有两个存放网络数据的模型，如果想要使用封装的简化代理，需要将网络请求的数据按下列规则存放

/**
 数据源数组，二维数组，第一层为section，第二层为row，gd_datas[0] = gd_firstDatas
 */
@property (nonatomic, strong) NSMutableArray *gd_datas;
/**
 由于大部分控制器只需要一层section，故有此变量
 */
@property (nonatomic, strong) NSMutableArray *gd_firstDatas;

UIViewController集成了两个初始化控件属性以及通过返回值控制控件enable的方法。例如如下代码表示该控制器背景色为白色，导航栏隐藏，同时开启网络控件，交互控件

#pragma mark - 初始化控制器的属性，通过interaction实现
- (BOOL)initialInteraction:(GDInteraction *)interaction {
//这边设置让导航栏隐藏的属性,以及控制器背景色为白色
    GDMyInteraction *myInteraction = (GDMyInteraction *)interaction;
    interaction.navigationBarHidden = YES;
    myInteraction.backgroudColor = [UIColor whiteColor];
    return YES;
}

- (BOOL)initialNetwork:(GDNetwork *)network {
    return YES;
}

进行页面的网络请求代码如下

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initLoad];

    //开始进行页面的网络请求
    [self createAndSendPageRequest];
}


#pragma mark - 网络相关
//页面的请求API
- (NSString *)networkRequestURL {
    return [GDUrlCenter normalPageUrl];    
}

//http请求方式
- (NSString *)httpMethod {
    return @"GET";
}

//请求参数
- (id)parameters {
    return nil;
}

//网络成功的回调    
- (void)finishLoadWithResponse:(id)response {
    GDNetworkResponse *myResponse = response;
    if (myResponse.responseData) {
        NSData *data = [NSJSONSerialization dataWithJSONObject:myResponse.responseData   options:NSJSONWritingPrettyPrinted error:nil];
        NSString *dataStr = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
        _tipLab.text = dataStr;
    }
}

UItableView & UItableViewCell

UIViewController同样用分类的方式集成了tableView
网络请求的方式同上，开启UIViewController的tableView的模式方式以及代理如下，在tableView的模式下默认开启上拉加载，下拉刷新，控件使用MJ，刷新分页逻辑可在交互控件初始化，详情见DEMO

- (void)finishLoadWithResponse:(id)response {
    GDNetworkResponse *myResponse = response;
    
    返回网络数据处理...

    [self.gd_tableView reloadData];

    //处理消息响应
    [self.myInteraction dealInteractionWithResponse:myResponse];
}

- (BOOL)initialNetwork:(GDNetwork *)network {
    return YES;
}

//初始化一个表格控制器只要在交互组件中赋予控制器的类型即可
- (BOOL)initialInteraction:(GDInteraction *)interaction {
    interaction.vcType = GDViewControllerTypeTable;
    return YES;
}

//表格控制器的唯一代理，根据数据类型返回相关的cell类型
- (Class)gd_tableViewCellWithItem:(id)data {
    if ([data isKindOfClass:[GDMessageData class]]) {
      return [GDTableViewCell class];
}

return nil;
}

UITableViewCell封装了指定的数据赋值方法，以及手动算高或者定高返回高度的方法，当使用约束自动算高时则不需要重写定高的方法，高度使用FD框架的缓存

//做好contentView的约束即可自动算高，使用了FD的框架
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {        
        self.selectionStyle = UITableViewCellSelectionStyleNone;
    
        self.messageLab = [UILabel labelWithColor:[UIColor blackColor] font:15];
        self.messageLab.numberOfLines = 2;
        self.messageLab.backgroundColor = [UIColor blueColor];
        [self.contentView addSubview:self.messageLab];
    
        self.moreBtn = [UIButton buttonWithTitle:@"查看全部" TitleColor:[UIColor blackColor] font:12];
        [self.moreBtn addTarget:self action:@selector(checkAction) forControlEvents:UIControlEventTouchUpInside];
        [self.contentView addSubview:self.moreBtn];
        self.moreBtn.backgroundColor = [UIColor redColor];
    
        self.img = [[UIImageView alloc] init];
        [self.contentView addSubview:self.img];
        self.img.backgroundColor = [UIColor greenColor];
        
        [self.messageLab mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.contentView).offset(16);
            make.right.equalTo(self.contentView).offset(-16).priorityMedium();
            make.top.equalTo(self.contentView).offset(10);
        }];
    
        [self.moreBtn mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.messageLab);
            make.top.equalTo(self.messageLab.mas_bottom).offset(4).priorityMedium();
        }];
    
        [self.img mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.messageLab);
            make.top.equalTo(self.moreBtn.mas_bottom).offset(4);
            make.size.mas_equalTo(CGSizeMake(300, 300));
            make.bottom.equalTo(self.contentView).offset(-10);
        }];
    }

    return self;
}

//对相关控件赋值
- (void)setWithData:(NSObject *)data {
    self.messageLab.text = self.data.message;
    if (self.data.isTotal) {
        self.messageLab.numberOfLines = 0;
        [self.moreBtn setTitle:@"收起" forState:UIControlStateNormal];
    } else {
        self.messageLab.numberOfLines = 2;
        [self.moreBtn setTitle:@"查看全部" forState:UIControlStateNormal];
    }

    [self.img sd_setImageWithURL:[NSURL URLWithString:self.data.img]];
}

//如果你需要手动算高或者固定高度，在这边进行回调，默认基类返回-1，代表使用约束自动算高
//+ (CGFloat)tableViewHeightForItem:(id)item {
//    return -1;
//}

一个完整的tableView的流程大致如此

####### UICollectionView & UICollectionViewCell
流程大致与tableView相同，除此添加了header和footer的快速集成。该框架自定义了一个瀑布流的collectionlayout，该布局的特点是，不同的section可定义不同的列间距，行间距，一行的cell个数（width相同，通过间距与个数计算），section总的间距， 同样加了约束自动算高。

//这边是一个响应网络请求的完整例子（刚好这个collection是个比较完整的例子，所以在这里展示）
- (void)finishLoadWithResponse:(id)response {
    GDNetworkResponse *myResponse = response;
    //当下拉刷新时删除所以已加载的数据
    if (self.networkStatus != GDNetworkLoadStatusUpLoading) {
        [self.gd_firstDatas removeAllObjects];
        [self.secondDatas removeAllObjects];
    }

    //数据处理
    NSDictionary *datas = myResponse.responseData;    
    self.myInteraction.newItemCount = 0;
    for (NSDictionary *data in datas[@"data"]) {
        GDMessageData *messageData = [GDMessageData gd_modelWithJson:data];
        if (messageData.idx > 30) {
            [self.secondDatas addObject:messageData];
        } else {
            [self.gd_firstDatas addObject:messageData];
        }
        self.myInteraction.newItemCount++;
    }
    [self.gd_collectionView reloadData];
        
    //通过网络响应结果展示不同的交互页面（空页面，错误页面）
    if (myResponse.error) {
        [self.myInteraction showError:YES];
        return;
    }
    [self.myInteraction showError:NO];

    if ([self.gd_firstDatas count] == 0 && [self.secondDatas count] == 0) {
        [self.myInteraction showEmpty:YES];
        return;
    }
    [self.myInteraction showEmpty:NO];

    if (self.myInteraction.newItemCount <= 0) {
        [self.myInteraction showNoMoreData];
    }
}

//collection只需要指定vcType的类型即可
- (BOOL)initialInteraction:(GDInteraction *)interaction {
    interaction.vcType = GDViewControllerTypeCollection;
    return YES;
}


- (BOOL)initialNetwork:(GDNetwork *)network {
    return YES;
}

#pragma mark - collection overwrite

//根据数据类型返回cell类型
- (Class)gd_collectionViewCellWithItem:(id)item {
    if ([item isKindOfClass:[GDMessageData class]]) {
        return [GDCollectionViewCell class];
    }

    return nil;
}

//根据数据类型返回header的类型
- (Class)gd_collectionHeaderViewItem:(id)item {
    return [GDCollectionHeader class];
}

//根据数据类型返回footer的类型
- (Class)gd_collectionFootViewWithItem:(id)item {
    return [GDCollectionFooter class];
}

//每一行的个数
- (CGFloat)numberOfItemsPerLineWithSection:(NSInteger)section {
    //如果section只有一个，不用判断section，其它代理同理
    if (section == 0) {
        return 2;
    }    
    return 1;
}

//每一个section的内边距
- (UIEdgeInsets)sectionInsetWithSection:(NSInteger)section {
    if (section == 0) {
        return UIEdgeInsetsMake(5, 5, 5, 5);
    }
  
    return UIEdgeInsetsZero;
}

//item之间的列间距
- (CGFloat)xSpacingWithSection:(NSInteger)section {
    if (section == 0) {
        return 5;
    }

    return 0;    
}

//item之间的行间距
- (CGFloat)ySpacingWithSection:(NSInteger)section {
    if (section == 0) {
        return 5;
    }

  return 0;
}

section0如下 （空白的地方为间距）

section0.png

section1 如下

section1.png

滑动菜单

滑动菜单是很多app常用的导航方式，本例也集成了该控件，使用tableView想像的逻辑，比如tableView是根据item映射cell类型，滑动菜单就是item映射viewController的类型，具体代码
头文件

/**
 使用滑动菜单导航先声明一个用来区分不同vc的Item类型
 同时该Item的变量同时是VC的变量参数
 VC的demo:GDTableVC, GDCollectionVC
 */
@interface GDScrollNavTestItem : NSObject

@property (nonatomic, copy) NSString *titleName;
@property (nonatomic, copy) NSString *type;
@property (nonatomic, copy) NSDictionary *testDict;

@end


/**
     继承滑动菜单导航控制器，基类不包含导航的slider，需自定义，slider可参考demo中GDMySlider
 */
@interface MyScrollNavigationController : GDScrollNavigationController

@end

.m

- (void)viewDidLoad {
    [super viewDidLoad];

    [self initSliderAndSubItems];

    //开始根据初始化的数据去创建滑动菜单
    [self gd_reloadNavigationView];
}

#pragma mark - require delegate

//类似于table和collection，返回菜单subVC的数量
- (NSArray *)gd_navSubItems {
    return self.subItems;
}

//同样类似于table和collection，根据item返回菜单的VC类型
- (Class)gd_navSubVCClassForItem:(id)item {
    GDScrollNavTestItem *sliderItem = item;
    if ([sliderItem.type isEqualToString:@"table"]) {
        return NSClassFromString(@"GDTableVC");
    } else if ([sliderItem.type isEqualToString:@"collection"]) {
        return NSClassFromString(@"GDCollectionVC");
    }
  
    return nil;
}

//滑动区域
- (CGRect)gd_navScrollViewFrame {
    return CGRectMake(0, 30, self.view.width, self.view.height - 30);
}

//这样一个常用的滑动菜单导航控制器就完成了，剩下的VC的写法直接参考独立VC的写法即可，并无任何差异

#pragma mark - option delegate (这是两个菜单滑动中的回调)

- (void)gd_callBackSliderIndex:(NSInteger)index {
//    NSLog(@"now index : %ld", index);
}

- (void)gd_callBackNavRatio:(CGFloat)ratio {
    [self.slider setRatio:ratio];
//        NSLog(@"now ratio : %f", ratio);
}

效果如下：

image.png

顶部的slider是自己封装的，不在框架里

image.png

最后

该框架封装了一些常用的方法
例如，多参数方法perform，model json互转，简单的navigaiton路由等等，这些都是为实现前面的方法所封装，该框架有完整的测试demo，还未进行具体app的开发试验，所以一定会有很多bug存在，顶多算一个学习项目
demo地址：https://github.com/QDFish/GDProject