iOS应用主流UI架构实现

Posted 2020-09-24 claireyuancy

一、介绍
如今ios开发过程中，最常见的一种UI架构是：界面底部是四五个tab bar 、中间是内容显示、顶部是包括标题及返回等操作button，当点击进入某个模块后可以点击进行返回。这样的架构的应用比較常见的如：微信、支付宝、京东、去哪儿等大部分应用都是这样的UI架构。下图所看到的：

二、创建方法
iOS开发SDK中提供了比較方便的类：UITabBarController、UINavigationController、UIViewController组合起来进行实现。

通常在 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 。应用生命周期方法中完毕主UI架构的创建。

详细步骤为 ：1、新建与tab bar个数一致的UIViewController 实例，初始化title，button等。

                      2、新建与tab bar个数一致UINavigationController实例，通过调用initWithRootViewController 分别赋给响应的UIViewController实例。

                      3、新建一个UITabBarController实例变量，然后给UITabBarController的viewControllers数组赋值为上面新建的多个UINavigationController实例。


                      4、把AppDelegate中的window属性的 rootViewController 设置为一个UITabBarController实例变量，

                      5、然后调用[self.window makeKeyAndVisible]方法显示界面。

三、详细实现代码

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   

    self.window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];

    self.window.backgroundColor= [UIColor redColor];

    [self loadMainFrame];

    [self.window makeKeyAndVisible];

    return YES;

}

详细的实现位于loadMainFrame方法中

-(void)loadMainFrame{



    LOneViewController *oneController = [[LOneViewController alloc]init];

    UINavigationController *onNav = [[UINavigationController alloc]initWithRootViewController:oneController];

    oneController.tabBarItem.title[email protected]"First";

    oneController.tabBarItem.image = [UIImage imageNamed:@"one.png"];



  LOneViewController *twoController = [[LOneViewController alloc]init];

    UINavigationController *twoNav = [[UINavigationController alloc]initWithRootViewController:oneController];

    twoController.tabBarItem.title[email protected]"First";

    twoController.tabBarItem.image = [UIImage imageNamed:@"one.png"];



    LThreeViewController *threeController = [[LThreeViewController alloc]init];

    UINavigationController *threeNav = [[UINavigationController alloc]initWithRootViewController:threeController];

    threeNav.tabBarItem.title[email protected]"Three";

    threeNav.tabBarItem.image=[UIImage imageNamed:@"three.png"];



    LFourViewController *fourController = [[LFourViewController alloc]init];

    UINavigationController *fourNav = [[UINavigationController alloc]initWithRootViewController:fourController];

    fourNav.tabBarItem.title[email protected]"Four";

    fourNav.tabBarItem.image=[UIImage imageNamed:@"four.png"];

    fourNav.navigationBar.tintColor=[UIColor yellowColor];



    LFiveViewController *fiveController = [[LFiveViewController alloc]init];

    UINavigationController *fiveNav = [[UINavigationController alloc]initWithRootViewController:fiveController];

    fiveNav.navigationBar.tintColor=[UIColor yellowColor];

    fiveNav.tabBarItem.title[email protected]"Five";

    fiveNav.tabBarItem.image=[UIImage imageNamed:@"five.png"];    

    UITabBarController *tabController=[[UITabBarController alloc]init];



    [tabController setViewControllers:@[onNav,twoNav,threeNav,fourNav,fiveNav] ];



    self.window.rootViewController = tabController;


}


如上面代码所看到的：新建了四个UIViewController、以及四个UINavigationController，并把四个UIViewController设置为对应UINavigationController的rootViewController，然后把四个UINavigationController分别增加到UITabBarController的ViewControllers数组中。 然后设置 self.window.rootViewController为UITabBarController，最后    通过[self.window makeKeyAndVisible];方法完毕UI架构的创建。