iOS之定制tabbar

我们知道,一个Tab控制器控制着若干视图控制器,它是由一个数组进行管理的,每一个Tab控制器只有一 UITabBar视图,用于显示UITabBarItem实例。我们通过点击UITabBarItem来切换视图控制器,现在我们就来说怎么定制我们想要的tabbar视图。
步骤一:通过Single ViewApplication取新建一个工程,在Main.storyboard中右边栏中选择TabBarController拖进storyboard操作区间,如图:
iOS之定制tabbar_第1张图片

  步骤二:我们把TabBarViewController连着的两个itemViewController删除,重新拖两个NavigationViewController,并通过vireControllers连线,结果如下:

iOS之定制tabbar_第2张图片

在左边选择对应的控制器的item,在右边的TabBarItem和BarItem中填写相应的信息:
iOS之定制tabbar_第3张图片
iOS之定制tabbar_第4张图片

同理,如果我们需要更多的barItem,重复步骤二便是,即我们需要几个baritem,就拖几个NavigationViewController,再执行相同的操作。
就比如我们要四个baritem,并且在storyboard中的baritem中设置对应的图片后,得到这样的效果:
iOS之定制tabbar_第5张图片

但是,如果我们不想要item下面的标题,去掉标题后问题来了:item图标明显偏上:
iOS之定制tabbar_第6张图片

怎么让这些item居中呢?
我们在这里调整:
iOS之定制tabbar_第7张图片
将Image Inset中的Top和Bottom由原来的0分别改成5,-5即可。
于是得到:
iOS之定制tabbar_第8张图片

显然,这还不是我们最终要的,我们还需要点击效果:有item的切换图标 ,并且有选中效果,我们在AppDelegate中加入如下代码即可:
UITabBarController tabBarController = (UITabBarController )self.window.rootViewController;
UITabBar tabBar = tabBarController.tabBar;
UITabBarItem
tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem
tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];
tabBarItem1.selectedImage = [UIImage imageNamed:@"hot_selected"];
tabBarItem2.selectedImage = [UIImage imageNamed:@"collect_selected"];
tabBarItem3.selectedImage = [UIImage imageNamed:@"category_selected"];
tabBarItem4.selectedImage =[UIImage imageNamed:@"me_selected"];
//设置选中item的图片颜⾊
[tabBarController.tabBar setSelectedImageTintColor:[UIColor whiteColor]];
//设置选中item后,显示在此item下面的图⽚
tabBar.selectionIndicatorImage = [UIImage imageNamed:@"select_bg"];
关于taabr,我们还有这样的设置:
//设置tabBar的背景图⽚
tabBarController.tabBar.backgroundImage = [UIImage imageNamed:@"tabbarbg.png"];
//设置tabBar的背景颜⾊
tabBarController.tabBar.tintColor = [UIColor grayColor];

你可能感兴趣的:(ios)