一、APP主流UI框架结构
搭建过程和注意点
1.> UIWindow
UIWindow继承自UIView，通常在一个app中只会有一个UIWindow对象。
iOS程序启动完毕后，创建的第一个视图控件就是UIWindow，接着创建控制器，然后再创建控制器的view，最后将控制器的view添加到UIWindow上，于是控制器的view就显示在屏幕上了。
一个iOS程序之所以能显示到屏幕上，完全是因为它有UIWindow。也就说，没有UIWindow，就看不见任何UI界面
UIWindow的创建方式：
在有storyboard中的创建过程：
程序首先会执行Main函数，然后执行Main函数中的UIApplicationMain（）方法,根据该方法中的第三个和第四个参数分别创建UIApplication对象和Application的代理对象，并且把代理设置给application，根据项目配置文件info.plist里面的storyboard的name，找到对应的storyboard，接下来创建一个UIWindow对象，之后根据箭头所指向的控制器创建它的初始化控制器，自动把该控制器设置为UIWindow的根控制器，接下来再将window显示出来，即看到了运行后显示的界面。
在没有storyboard中的创建过程：
先执行Main函数，执行UIApplicationMain（）,根据其第三个和第四个参数创建Application，创建代理，并且把代理设置给application，开启一个事件循环，当程序加载完毕，他会调用代理的didFinishLaunchingWithOptions:方法。在该方法中，会创建一个Window,然后创建一个控制器，并把该控制器设置为UIWindow的根控制器，接下来再将window显示出来，即看到了运行后显示的界面。
(1)最好通过代码设置根控制器，而不是使用storyboard
具体步骤是：
步骤1：程序一启动，不加载storyboard，则通过下图将选中的那行删除。
5F238E09-C560-4181-BF63-CF21903D88E3.png
步骤2：程序一启动，加载Application，设置Window的rootViewController。一般Window的rootViewController是一个UITabBarController，但是UITabBarController自带的UITabBar长得比较矬，因此需要自定义一个UITabBarController，自己添加一个新的TabBar
(2.)从iOS9开始的常见报错
Application windows are expected to have a root view controller at the end of application launch
-从iOS9开始,在程序启动完毕那一刻显示出来的窗口必须要设置根控制器
百思不得姐
在AppDelegate.m创建根控制器
-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 创建窗口,并设置frame
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
// 设置根控制器
ZBSTabBarController *tabBar = [[ZBSTabBarController alloc] init];
self.window.rootViewController = tabBar;
// 显示窗口
[self.window makeKeyAndVisible];
return YES;
}```
***
######自定义Tabbar，添加自定义的导航控制器（4个）以及导航控制器的根控制器到tabbar上
* 先自定义导航控制器以及导航控制器的根控制器
* 添加子控制器(先进行初始化一个子控制器，将其添加到tabbar上，在调用这个方法，添加子控制器)
/**
- 添加子控制器
*/
-(void)addChildViewControllers
{
[self setupChildViewController:[[ZBSNavController alloc] initWithRootViewController:[[ZBSNewController alloc] init]] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
[self setupChildViewController:[[ZBSNavController alloc] initWithRootViewController:[[ZBSMeController alloc] init]] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
[self setupChildViewController:[[ZBSNavController alloc] initWithRootViewController:[[ZBSEssenceController alloc] init]] title:@"精华" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
[self setupChildViewController:[[ZBSNavController alloc] initWithRootViewController:[[ZBSFollowController alloc] init]] title:@"关注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
}
/**
- 初始化一个子控制器
- @param vc 子控制器
- @param title 标题
- @param image 图标
- @param selectedImage 选中的图标
*/
-(void)setupChildViewController:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
vc.tabBarItem.title = title;
if (image.length){// 图片名有具体值（即排除传进来空串或者nil）
vc.tabBarItem.image = [UIImage imageNamed:image];
vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
}
// 添加到tabbar
[self addChildViewController:vc];
}
效果如图：
***
##图片被渲染以及解决方法：
> 什么情况会出现渲染？
> 一般图片选中状态下或者按钮样式是system时出现渲染
有些图片会被系统自动渲染成`蓝色`, 解决方案有`2种`：
######第一种：（只设置点击时的图片即可）
> 直接在xcassets文件中配置，如下图：
######第二种
再次产生一张不会进行渲染的图片
核心代码是：
// 1.加载图片
vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
// 2.产生一张不会进行自动渲染的图片
UIImage *selected= [vc.tabBarItem.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
vc.tabBarItem.selectedImage = selected;
项目中代码是：
/**
- 初始化一个子控制器
- @param vc 子控制器
- @param title 标题
- @param image 图标
- @param selectedImage 选中的图标
*/
-(void)setupChildViewController:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
vc.tabBarItem.title = title;
if (image.length){// 图片名有具体值（即排除传进来空串或者nil，否则系统有时会警告）
vc.tabBarItem.image = [UIImage imageNamed:image];
vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
UIImage *selected= [vc.tabBarItem.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
vc.tabBarItem.selectedImage = selected;
}
// 添加到tabbar
[self addChildViewController:vc];
}
效果图是：
***
##文字属性的设置
由上图可看出，文字也被渲染成蓝色，所以需要设置文字样式。
——直接设置每一个tabBarItem对象
—— 通过UITabBarItem的appearance对象统一设置
——核心代码
[item setTitleTextAttributes:normalAttr forState:UIControlStateNormal];
[item setTitleTextAttributes:selectdAttr forState:UIControlStateSelected];
/**
- 设置tabBarItem的文字属性
*/
-(void)setupTabBarItem
{
UITabBarItem *item = [UITabBarItem appearance];
// 设置普通状态下的文字属性
NSMutableDictionary *normalAttr = [NSMutableDictionary dictionary];
normalAttr[NSFontAttributeName] = [UIFont systemFontOfSize: 14];
normalAttr[NSForegroundColorAttributeName] = [UIColor lightGrayColor];
[item setTitleTextAttributes:normalAttr forState:UIControlStateNormal];
// 选中状态下的文字属性
NSMutableDictionary *selectdAttr = [NSMutableDictionary dictionary];
selectdAttr[NSFontAttributeName] = [UIFont systemFontOfSize:14];
selectdAttr[NSForegroundColorAttributeName] = [UIColor grayColor];
[item setTitleTextAttributes:selectdAttr forState:UIControlStateSelected];
}
效果如图：
***
##中间红色按钮的添加（2种方法）
######第一种：
1. 多添加一个子控制器，图片、文字都设置nil，用来占位。
[self setupChildViewController:[[UIViewController alloc] init] title:nil image:nil selectedImage:nil];
2. 增加一个发布按钮
@property(nonatomic, weak) UIButton *publishBtn
pragma Mark-懒加载
-(UIButton )PublishBtn
{
if (!_publishBtn) {
// 增加发布按钮
UIButton publishBtn = [UIButton buttonWithType:UIButtonTypeCustom];
publishBtn.zs_width = self.tabBar.zs_width / 5;
publishBtn.zs_height = self.tabBar.zs_height;
publishBtn.zs_centerX = self.tabBar.zs_width * 0.5 ;
publishBtn.zs_centerY = self.tabBar.zs_height * 0.5;
[publishBtn setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
[publishBtn setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateSelected];
[self.tabBar addSubview:publishBtn];
}
return _publishBtn;
}
/
* 为什么要在viewWillAppear:方法中添加发布按钮?
* 当viewWillAppear:方法被调用的时候, tabBar内部已经添加了5个UITabBarButton
* 就可以实现一个效果 : [发布按钮]盖在其他UITabBarButton上面
*/
-(void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[self PublishBtn];
}
#####问题
`-(void)viewWillAppear:(BOOL)animated`方法会调用好多次，每一次将要显示view时都会调用，也就是中间按钮会加载多次。
#####解决方法有两种：
第一种：和上述代码一样使用懒加载即可（推荐使用，因为`addSubviews`会保证按钮永远在最上面）
第二种：
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
/**** 增加一个发布按钮 ****/
UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
publishButton.backgroundColor = XMGRandomColor;
[publishButton setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
[publishButton setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
publishButton.frame = CGRectMake(0, 0, self.tabBar.frame.size.width / 5, self.tabBar.frame.size.height);
publishButton.center = CGPointMake(self.tabBar.frame.size.width * 0.5, self.tabBar.frame.size.height * 0.5);
[publishButton addTarget:self action:@selector(publishClick) forControlEvents:UIControlEventTouchUpInside];
[self.tabBar addSubview:publishButton];
});
}
######第二种
去掉占位，自定义tabbar，重新布局，解决位置问题（其他都一样）
**设置中心点位置，应先设尺寸，后设中心**
pragma Mark-懒加载
-(UIButton *)publishBtn
{
if (!_publishBtn) {
// 增加发布按钮
UIButton *publishBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[publishBtn setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
[publishBtn setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateSelected];
[self addSubview:publishBtn];
_publishBtn = publishBtn;
}
return _publishBtn;
}
pragma Mark - 初始化
-(instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
self.backgroundImage = [UIImage imageNamed:@"tabbar-light"];
}
return self;
}
/**
- 布局子控件
*/
-(void)layoutSubviews
{
[super layoutSubviews];
CGFloat btnW = self.zs_width / 5;
CGFloat btnH = self.zs_height;
CGFloat btnY = 0;
// 按钮的索引
int btnIndex = 0;
for (UIView *subview in self.subviews) {
// 过滤掉非UItabBarButton
if (subview.class != NSClassFromString(@"UITabBarButton")) continue;
// 设置frame
CGFloat btnX = btnW * btnIndex;
if (btnIndex >= 2) {
btnX += btnW;
}
subview.frame = CGRectMake(btnX, btnY, btnW, btnH);
btnIndex ++;
}
/**** 中间按钮frame的设置 **/
self.publishBtn.zs_width = self.zs_width / 5;
self.publishBtn.zs_height = self.zs_height;
self.publishBtn.zs_centerX = self.zs_width * 0.5 ;
self.publishBtn.zs_centerY = self.zs_height * 0.5;
}
######在`TabBarController`里定义`更换TabBar`的方法
// 更换TabBar
[self setupTabBar];
/**
- 更换tabBar
*/
-(void)setupTabBar
{
[self setValue:[[ZBSTabBar alloc] init] forKeyPath:@"tabBar"];
}
