|
开发环境：xcode10.1，ios12.1
第六步优化，增加顶部导航栏，顺带解决跳转页面的时候的动画为水平左推，因为大部分iOS都是这样，用户已经习惯，反正我是看其他跳转动画极其变扭，推荐直接看下篇
1.创建一个项目
2.把自动创建的ViewController.h，ViewController.m删除
学网上视频的，估摸着是不想跟后面的项目有冲突吧，其实是便于统一而已。菜鸟照做就好了。
3.再把info.plist中的main storyboard base file name 删掉
鼠标放在旁边有个”-“号，从没用过苹果电脑的我，找了好久的删除在哪，还是看视频学到的。
下图我已经删除了的样子：
增加一个地方：
菜鸟注意了：点击那个 + 号 ，弹出的下拉框中就能找到App Transport ...，在App Transport ...下再创建一个Allow Arb...，你需要先把App Transport ...前面的三角点一下，变成下面这个图的样子，你在点击 + 号就能在其子目录中创建item了，下拉框中选择Allow Arb...，将其右边的值改为yes。
4.创建3个UIViewController。
操作步骤：点击上图黄色文件夹，右键New File —> Cocoa Touch Class —>next —>
修改class命，选择uiviewcontroller类型 —>next —>create
 
按上面的创建步骤，创建class名为VCSecond，VCThird。如下图：
5.在AppDelegate.m中包含之前创建的3个UIViewController
AppDelegate为整个应用的一个代理，提供程序启动、退出等类似监控的接口。做过小程序的话可以理解为小程序的app.json
6.在AppDelegate.m的didFinishLaunchingWithOptions方法中添加如下代码
//创建window
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
//显示window
[self.window makeKeyAndVisible];
//创建控制器一
VCFirst* vcFirst = [[VCFirst alloc] init];
VCSecond* vcSecond = [[VCSecond alloc] init];
VCThird* vcThird = [[VCThird alloc] init];
vcFirst.title = @"首页";
vcSecond.title = @"搜索";
vcThird.title = @"个人";
vcFirst.view.backgroundColor = [UIColor blueColor];
vcSecond.view.backgroundColor = [UIColor yellowColor];
vcThird.view.backgroundColor = [UIColor redColor];
//创建分栏控制器
UITabBarController* tbController = [[UITabBarController alloc] init];
//设置分栏控制器整体颜色（选中状态）
tbController.tabBar.tintColor = [UIColor colorWithRed:112.0/255.0 green:100.0/255.0 blue:225.0/255.0 alpha:1.0];
//创建一个控制器数组对象
//将所有的要被分栏控制器管理的对象添加到数组中
NSArray* arrayVC = [NSArray arrayWithObjects:vcFirst,
vcSecond,
vcThird, nil];
//将分栏视图控制器管理数组赋值
tbController.viewControllers = arrayVC;
//将分栏控制器作为根视图控制器
self.window.rootViewController = tbController;
//设置分栏控制器的透明度
tbController.tabBar.translucent = NO;
return YES;
优化代码：这一步，创建UINavigationController，将每个UINavigationController都放在UITabBarController中，这样在每个(VCFirst,VCSecond,VCThird)跳转页面就会用UINavigationController的pushViewController的跳转动画，向左推，如果用上一篇那样初始化，pushViewController将无法跳转，只能用prsentViewController跳转，然而他默认的跳转动画，是从下往上，如果你遇到这样的情况，就应该向上面一样用UINavigationController初始化UITabBarController。
//创建window
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
//显示window
[self.window makeKeyAndVisible];
//创建控制器一
VCFirst* vcFirst = [[VCFirst alloc] init];
UINavigationController * nav1 = [[UINavigationController alloc]initWithRootViewController:vcFirst];
nav1.navigationBar.barTintColor = [UIColor whiteColor];
VCSecond* vcSecond = [[VCSecond alloc] init];
UINavigationController * nav2 = [[UINavigationController alloc]initWithRootViewController:vcSecond];
nav2.navigationBar.barTintColor = [UIColor whiteColor];
VCThird* vcThird = [[VCThird alloc] init];
UINavigationController * nav3 = [[UINavigationController alloc]initWithRootViewController:vcThird];
nav3.navigationBar.barTintColor = [UIColor whiteColor];
vcFirst.title = @"首页";
vcSecond.title = @"搜索";
vcThird.title = @"我的";
vcFirst.view.backgroundColor = [UIColor whiteColor];
vcSecond.view.backgroundColor = [UIColor yellowColor];
vcThird.view.backgroundColor = [UIColor blueColor];
//创建分栏控制器
UITabBarController* tbController = [[UITabBarController alloc] init];
//创建一个控制器数组对象
//将所有的要被分栏控制器管理的对象添加到数组中
NSArray* arrayVC = [NSArray arrayWithObjects:nav1,
nav2,
nav3, nil];
//将分栏视图控制器管理数组赋值
tbController.viewControllers = arrayVC;
//将分栏控制器作为根视图控制器
self.window.rootViewController = tbController;
//设置分栏控制器的透明度
tbController.tabBar.translucent = NO;
return YES;
7.测试运行，
点击Xcode左上角的三角运行按钮运行，旁边正方形按钮是停止，再旁边就是可以选择模拟器的型号
等一会就会出现一个ip7p的魔模拟器了，放张gif：
8.给各个栏添加图标icon
首先，你先去网上找一套你喜欢的icon，或者要你公司的前端给你，要他给你跟ios选中颜色一样的一套和原本灰色的一样，主要是保证选中时，icon与文字统一变色，类似微信的效果。
然后重名命图片名，建议英文名，格式为：[email protected](选中--蓝色) [email protected](未选中--灰色)
在xcode的Assets.xcassets中新建images文件夹，直接拖拉你的图片到images中，下图是如何创建images文件夹
或者右键images文件夹，选择import也可
最后一步：在VCFirst的viewDidLoad方法中添加如下代码：
UITabBarItem* tarBarItem = [[UITabBarItem alloc] initWithTitle:@"首页" image:nil tag:101];
tarBarItem.image =[[UIImage imageNamed:@"WechatIMG5_11"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tarBarItem.selectedImage =[[UIImage imageNamed:@"WechatIMG5_12"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.tabBarItem = tarBarItem;
按照上面步骤对VCSecond和VCThird做同样的操作，但是要注意，“首页”和图片名要改为对应的文字和图片！！！
最后测试一下 大功告成：
放一张第六步优化后的页面：
下一篇，讲解如何嵌套h5页面，敬请期待。。。
|