项目开发过程中,在完成iOS项目——项目开发环境搭建之后,我们首先需要考虑的就是我们的项目的整体框架与导航架构设计,然后在这个基础上考虑功能模块的完成。
一导航架构设计
一款应用的导航架构设计应该是符合人们的操作惯性和方便操作的特点,也应该在交互上更加合理和人性化,根据项目功能和定位不同,不同的应用的导航设计应该采用不同的技术框架,目前比较常见的导航框架主要有标签式、列表式,矩阵式三大类,如下图。
目前资讯新闻类的移动端项目的主流应用框架基本都是标签式的,这种类型的导航设计技术上基本上都是通过TabBar +导航控制器框架进行搭建完成,大家经常使用到的微博,今日头条等都是采用TabBar +导航控制器这样的框架.TabBar +导航控制器就是在应该TabBar上添加itemBar,每一个itemBar都是一个独立的模块,并且每一个itemBar都对应一个导航控制器。因为每一个itemBar的导航器都不一样,所以应该是先有TabBar再有导航控制器。
我们的项目也属于资讯类,所以我们的项目的框架也是采用TabBar +导航控制器进行搭建。今天我们的主要任务就是搭建我们TabBar,如果采用系统自带的UITabBarController(官网文档戳这里),在使用过程有一下几点需要注意:
每一个barItem都必须对应一个视图控制器,可以是一般的ViewController,也可以是UINavigationController barItem对应的ViewController或UINavigationController的框架如果自定义设置了,注意不要遮挡最下面的TabBar条barItem的顺序与添加到UITabBarController的顺序保持一致当添加的barItem个数& lt;=5个时,均匀分布在最下面的栏条上,如上图所示的4个当添加的barItem个数比;5个时,会只显示前四个添加的barItem,然后加上一个【更多】,点击【更多】弹出一个列表可选,并且列表的右上角有一个【编辑】按钮,点击之后可以调整barItem的显示顺序,如下图所示,所以TabBar +导航控制器框架下的barItem个数最好不要超过5个,否则用户体验不是很好
添加itemBar对应的ViewController的方法有两种:一是使用UITabBarController的,setViewControllers:,方法设置,二是用的ui, addChildViewController:,方法添加子视图,也可以实现添加到tabBar的功能,但是这种方法对于barItem个数比;5的时候,只会显示前五个,剩下的不会出现时出来,也没有【更多】按钮可以选择。
示例代码如下,自定义一个选项继承自UITabBarController,然后重写其,viewDidLoad 方法添加子视图和标签:,
@ implementation XMGTabBarController
- (void) viewDidLoad {
(超级viewDidLoad);//添加4个物品栏
UITableViewController * vc0=[[UITableViewController alloc] init);
vc0.view。写成backgroundColor=[用户界面颜色redColor];
vc0.tabBarItem。标题=@“精华”;
vc0.tabBarItem。形象=[界面图像imageNamed: @“tabBar_essence_icon”);
vc0.tabBarItem。selectedImage=[界面图像imageNamed: @“tabBar_essence_click_icon”);
(自我addChildViewController: vc0);
ui * vc1=[[ui alloc] init);
vc1.view。写成backgroundColor=[用户界面颜色blueColor];
vc1.tabBarItem。title=@”新帖”;
vc1.tabBarItem。形象=[界面图像imageNamed: @“tabBar_new_icon”);
vc1.tabBarItem。selectedImage=[界面图像imageNamed: @“tabBar_new_click_icon”);
(自我addChildViewController: vc1);
UITableViewController *趋势=[[UITableViewController alloc] init);
vc2.view。写成backgroundColor=[用户界面颜色greenColor];
vc2.tabBarItem。标题=@“关注”;
vc2.tabBarItem。形象=[界面图像imageNamed: @“tabBar_friendTrends_icon”);
vc2.tabBarItem。selectedImage=[界面图像imageNamed: @“tabBar_friendTrends_click_icon”);
(自我addChildViewController:趋势);
ui * vc3=[[ui alloc] init);
vc3.view。写成backgroundColor=[用户界面颜色grayColor];
vc3.tabBarItem。title=@“我”;
vc3.tabBarItem。形象=[界面图像imageNamed: @“tabBar_me_icon”);
vc3.tabBarItem。selectedImage=[界面图像imageNamed: @“tabBar_me_click_icon”);
(自我addChildViewController: vc3);//下面的方法也是可以的,推荐使用下面的方法
(自我addChildViewController://@ [vc0 vc1,趋势,vc3]];
}
