[UI组件基础] 制作一个带有底部导航以及顶部导航的single view application

　　最近开始写博客了，把我学习到的东西进行汇总和总结。

　　很多初学iOS手机应用程序开发的刚开始肯定是抓头的，搞不好，是大片大片的头发往下扯。

　　因为很迷茫啊，都不知道要怎么弄，有真机有大神帮忙的人还好说，没有机器又没有朋友的人就惨了，完全不知道从何开始。

　　其实我觉得把，如果是真想学，最次最次，你最少弄个XCode用用看。

　　前期如果没有XCode，没有苹果电脑，也可以先从基础语法开始学起，其实oc语法也很蛋疼的，什么*啊，alloc啊init啊。估计跟大家想象的世界完全不同，学了java的人再来看oc，会有摔键盘的冲动。

　　好了，开始今天的正题把，其实我想要说的是，如果想要做一个目前流行的app应用主界面框架，该如何去做？

　　先说一句，我不会拖控件的，基本靠手打。

　　第一步，先在XCode中创建一个single view application,即视图应用程序。

　　第二步，点击AppDelegate.m文件，在- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法中添加代码，效果如下：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.

//1.创建窗口
self.window = [[UIWindow alloc]init];
//2.设置窗口位置，大小
self.window.frame = [UIScreen mainScreen].bounds;

//3.显示窗口
[self.window makeKeyAndVisible];
//4.设置主window的根视图控制器为自定义的myTabViewController（自定义的UITabBarController）
self.window.rootViewController = [[myTabViewController alloc]init];

return YES;
}

　　这里其实就是添加了4句代码，作用是设置主窗口的大小，位置，并且为主窗口设置根视图控制器。

　　第三步，自定义一个UITabBarController，所谓UITabBarController就是app应用里常见的底部导航内容，如下所示：

　　


　　上面的图片中红色方框中框中的就是UITabBarController具体显示效果，也就是大家平时接触到看到得样子。但是实际上，UITabBarController包含了多个子视图控制器，即ChildViewController，而每一个ChildViewController都跟UITabBarController的大小一致，绝不是只是我上面的方框这么点大，在上面的代码里面，我写了一句代码：self.window.rootViewController = [[myTabViewController alloc]init]; 也就是说，我把自定义的UITabBarController设置成了主窗口的根视图控制器，而主窗口和手机屏幕一样大，所以，在这篇代码里面UITabBarController的大小就是和手机屏幕一样大了，每一个ChildViewController也是和手机屏幕一样大。

　　那么，让我们来添加自定义的myTabViewController把，整个添加过程我都截图了，对不熟悉的朋友还是有帮助的：

　　


　　


　　


　　按照上面示例图的步骤，我们就创建好了一个自定义的UITabBarController组件myTabViewController了

　　第四步，点击myTabViewController.m文件添加代码来实现具体细节。

　　首先，一个UITabBarController组件刚开始的时候是什么都没有的，如果你现在运行，你会看到一个黑色的界面，因为什么都没有。

　　如果你想要添加内容，就要为UITabBarController组件添加ChildViewController(子视图控制器)，也就是底部的内容，在这里我不止想要添加底部导航内容，我连顶部导航栏也想要设置，那么我们就应该心里有一个设计：首先，显示给用户观看的肯定是一个UIViewController，如果想要添加顶部导航栏，那么我们就应该将给用户观看和使用的这个UIViewController包到一个UINavigationController(导航视图控制器)中去，如果想要显示底部导航内容，那么我们就要将包含了给用户观看和使用的这个UIViewController的UINavigationController作为一个ChildViewController(子视图控制器)添加到UITabBarController中去。下面，我就将这一个过程的代码放出来，请大家仔细观看并阅读注释：

#import "myTabViewController.h"

@interface myTabViewController ()

@end

@implementation myTabViewController

- (void)viewDidLoad {
[super viewDidLoad];

/**
创建3个UIViewController，1个UITableViewController，并执行封装的addChildVC方法
*/
UIViewController* home=[[UIViewController alloc]init];
[self addChildVC:home title:@"首页" image:@"tabbar_home" selectedImage:@"tabbar_home_selected"];

UITableViewController* msg=[[UITableViewController alloc]init];
[self addChildVC:msg title:@"消息" image:@"tabbar_message_center" selectedImage:@"tabbar_message_center_selected"];

UIViewController* discover=[[UIViewController alloc]init];
[self addChildVC:discover title:@"发现" image:@"tabbar_discover" selectedImage:@"tabbar_discover_selected"];

UIViewController* profile=[[UIViewController alloc]init];
[self addChildVC:profile title:@"我" image:@"tabbar_profile" selectedImage:@"tabbar_profile_selected"];
}
/**
*  为当前控制器生成并添加子控制器，该控制被包含在一个UINavigationController中，然后再被添加到当前控制器（UITabBarController）
*
*  @param childVc       需要进行添加的子控制器
*  @param title         导航标题与tabbar标题
*  @param image         普通形态下的tabbarItem的图片
*  @param selectedImage 高亮显示的tabbarItem的图片
*/
-(void)addChildVC:(UIViewController*)childVc title:(NSString*)title image:(NSString*)image selectedImage:(NSString*)selectedImage
{
//设置导航标题与下标题一致
childVc.navigationItem.title=title;
childVc.tabBarItem.title=title;
//childVc.title=title;//这一句可以完成上面两句代码的作用

//设置子控制器的tabbarItem（即在下方显示的一排导航内容）正常显示图片
//imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal（图片的表现模式:原图显示）
//注意：如果直接给一张图片会被渲染成默认的颜色，所以要设置为不要被渲染的模式
//即imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal
childVc.tabBarItem.image = [[UIImage imageNamed:image] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//设置子控制器的tabbarItem的高亮显示图片
childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//childVc.view.backgroundColor = RandomColor;
//设置未选中文字的样式
NSMutableDictionary* textAttrs=[NSMutableDictionary dictionary];
textAttrs[NSForegroundColorAttributeName] = [UIColor blackColor];
[childVc.tabBarItem setTitleTextAttributes:textAttrs forState:UIControlStateNormal];
//设置选中文字的样式
NSMutableDictionary* seltextAttrs=[NSMutableDictionary dictionary];
seltextAttrs[NSForegroundColorAttributeName] = [UIColor orangeColor];
[childVc.tabBarItem setTitleTextAttributes:seltextAttrs forState:UIControlStateSelected];

//将子控制器包装到一个UINavigationController中
UINavigationController* nav=[[UINavigationController alloc] initWithRootViewController:childVc];

//将包装好的UINavigationController添加到本控制器的子视图控制器中
[self addChildViewController:nav];
}

　　通过这篇代码，大家可以发现，OC其实确实有点蛋疼，但是，如果研究透了，你就会发现，一切都是有原因的，希望这篇博客对大家有用，如果有什么意见或者建议，欢迎大家来找我讨论与学习：QQ:1750587828

　　再说一句把，感觉iOS开发就是这样的，首先，你得节省内存使用和流量的使用，第二，界面的设计越简单越傻瓜越好看越好，第三，代码方面更是，系统提供的组件解决不了就自定义，自定义如果解决麻烦就用第三方。我的一点感慨把，与大家共勉之。