一个常见的三段式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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,847评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,208评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,587评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,942评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,332评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,587评论 1赞 218
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,853评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,568评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,273评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,373评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,031评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2赞 269

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,937评论 3赞 118
  • 世界上最遥远的距离
    世界上最遥远的距离 不是海浪逐沙千里 而是风儿带着沙 停了却将它遗弃 世界上最遥远的距离 不是无情寡义 而是满心期...
    candy555阅读 214评论 0赞 0
  • 晚安，长沙
    送给所有和我一样在都市里失眠着的好友，希望每天梦醒，一切都是充满激情和快乐，让我们互相道一句:晚安！ 滴答滴答滴答...
    泥土上的草阅读 170评论 0赞 0
  • 记北京规划展览馆一行(月儿原创）
    记北京规划展览馆一行 ----陈皓月 11月22日中午，我们初二小五班参观了北京市规划展览馆，展馆共四层，以...
    似山若水的自在时光阅读 228评论 0赞 0
  • 2017.09.19
    现在已是凌晨，本身感冒，头就有些疼，应该是蒙上被子睡觉的，并且明早还要早起为家人做早饭。可是心里憋了很...
    猫宁萌阅读 120评论 0赞 0