分栏控制器

2016-11-30 本文已影响0人 yz_wang

1. 基本概念

与导航控制器区别
导航控制器：有层次区别
分栏控制器：平行关系
屏幕快照 2016-11-30 上午9.42.22.png

常用关键字
屏幕快照 2016-11-30 上午9.45.45.png

2. 基本实现

为了手动创建分栏控制器，还是先把原有的ViewController.h和ViewController.m 还有mainstoryboard文件删除。

创建三个视图控制器：

屏幕快照 2016-11-30 上午9.59.32.png

在APPDelegate中添加代码，创建window，并创建三个视图对象和分栏控制器对象：

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s6 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s8 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s10 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s11 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [self.window makeKeyAndVisible];
    
    //创建控制器一
    VCFirst* vcFirst = [[VCFirst alloc]init];
    vcFirst.view.backgroundColor=[UIColor blueColor];
    vcFirst.title=@"视图1";
    
    //创建控制器二
    VCSecond* vcSecond=[[VCSecond alloc]init];
    vcSecond.view.backgroundColor=[UIColor yellowColor];
    vcSecond.title=@"视图二";
    
    //创建控制器三
    VCThird* vcThird=[[VCThird alloc]init];
    vcThird.view.backgroundColor=[UIColor orangeColor];
    vcThird.title=@"视图三";
    
    
    //创建分栏控制器对象
    UITabBarController* tbController=[[UITabBarController alloc]init];
    //创建一个控制器数组对象
    //将所有要被分栏控制器管理的对象添加到数组中
    NSArray* arrayVC= [NSArray arrayWithObjects:vcFirst,vcSecond,vcThird,nil];
    //赋给管理数组
    tbController.viewControllers=arrayVC;
    
    //将分栏控制器作为根视图的控制器
    self.window.rootViewController=tbController;
    
    return YES;
}

分栏控制器对于视图的管理是通过视图数组完成的，分栏控制器的标签就是视图的Title
实现的效果：

屏幕快照 2016-11-30 上午9.58.57.png

屏幕快照 2016-11-30 上午9.59.03.png

屏幕快照 2016-11-30 上午9.59.08.png

</br>
我们可以在添加一些属性：

使一打开就直接显示第三个视图

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}span.s1 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s5 {font-variant-ligatures: no-common-ligatures; color: #272ad8}

    //设置选中的视图控制器的索引
    //实际是通过索引来确定显示哪个控制器
    tbController.selectedIndex=2;

设置tabBar外观

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font-variant-ligatures: no-common-ligatures}span.s3 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s5 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s7 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s8 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}

    //设置透明度
    tbController.tabBar.translucent=NO;
    //改变工具栏颜色
    tbController.tabBar.barTintColor=[UIColor redColor];
    //改变按钮文字颜色
    tbController.tabbat.tintColor=[UIColor blueColor];

改变按钮内容
方法一：在VCFirst.m中创建一个分栏按钮对象

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}span.s1 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s5 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s6 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s7 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s8 {font-variant-ligatures: no-common-ligatures; color: #272ad8}

    //创建一个分栏按钮对象
    UITabBarItem* tabBarItem=[[UITabBarItem alloc]initWithTitle:@"111" image:nil tag:101];
    self.tabBarItem=tabBarItem;```
**注**要把title设置放在backgroundcolor前，才能加载出title。

![屏幕快照 2016-11-30 上午10.14.59.png](https://img.haomeiwen.com/i3281836/c559bdd3a33089f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  方法二：根据系统风格创建按钮

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}span.s1 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s6 {font-variant-ligatures: no-common-ligatures; color: #272ad8}span.s7 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s8 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}

//根据系统风格创建
UITabBarItem* tabBarItem=[[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemContacts tag:101];
//按钮右上角信息
//通常用小红点来提示未读信息
tabBarItem.badgeValue=@"22";
self.tabBarItem=tabBarItem;

实现效果：

![屏幕快照 2016-11-30 上午10.19.49.png](https://img.haomeiwen.com/i3281836/0ce1d0885b80ac53.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


#### 3. 分栏控制器的协议函数
![屏幕快照 2016-11-30 上午10.24.22.png](https://img.haomeiwen.com/i3281836/c358fe3d536702f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如果我们添加足够多的视图，比如六个，出现的结果是系统自动创建一个More：

![屏幕快照 2016-11-30 上午10.31.57.png](https://img.haomeiwen.com/i3281836/5fccf4e5545b2758.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



![屏幕快照 2016-11-30 上午10.33.16.png](https://img.haomeiwen.com/i3281836/73816ef9782dd9cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**点击Edit可以用拖拽实现按钮重新排布**
</br>

##### 协议函数
首先在AppDelegate.h中添加继承：

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s2 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s3 {font-variant-ligatures: no-common-ligatures}

@interface AppDelegate : UIResponder <UIApplicationDelegate,UITabBarControllerDelegate>

然后在AppDelegate.m的BOOL函数中创建一个协议：

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s3 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}

tbController.delegate=self;

在函数外去实现：

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d12f1b}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s3 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s5 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s6 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s7 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s8 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s9 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}

//开始编辑前调用
-(void)tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray *)viewControllers
{
NSLog(@"编辑前");
}

//即将结束前
-(void)tabBarController:(UITabBarController *)tabBarController willEndCustomizingViewControllers:(NSArray *)viewControllers changed:(BOOL)changed
{
NSLog(@"即将结束前");
}

//已经结束
-(void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray *)viewControllers changed:(BOOL)changed
{
NSLog(@"已经结束");
NSLog(@"vc=%@",viewControllers);
}
//选中控制器对象
-(void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
{
if(tabBarController.viewControllers[tabBarController.selectedIndex]==viewController)
{
NSLog(@"ok");
}
NSLog(@"选中控制器对象");
}

可以做的事情：
1. 得到调整后的数组
2. 得到选中的视图index

分栏控制器

1. 基本概念

2. 基本实现

猜你喜欢

热点阅读