Build the mainstream App framework in ten minutes

[[147883]]

Build mainstream framework interface

Achievement

• When we play with iPhone applications, have you noticed that most applications have a similar structure as shown above? The TabBar controller below can switch sub-controllers, and there is a Navigation bar above.
• Our article mainly builds the framework of the main body, and the data has not been added yet

Analyze the basic process of doing projects

1. Build the main framework of the project

• First build tabBarController (there is one below)
• Then build NavigationController (there is one line above, and each sub-controller is different)

2. Think about the development approach

• Storyboard construction (used when there are few interfaces)
• Pure code construction (used when there are more than 5 interfaces, easy to manage, generally used in commercial projects)

Building a mainstream framework from scratch (pure code)

1. Preparation

• Environment deployment

2. Initially build the basic interface

The first step is to design the directory (based on the modular + MVC concept, create basic file directories and files)

• Create directory paths with modular ideas (usually create them in the real path first, then drag them into the project)
• Customizing TabBarController

The second step is to put the code (set the window to start the root controller in AppDelegate.m)

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 // 1. Create a window  
    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; 
 
 // 2. Set the root controller of the window  
    CYXTabBarController *tabBarVC = [[CYXTabBarController alloc]init];
    self.window.rootViewController = tabBarVC; 
 
 // 3. Display window  
    [self.window makeKeyAndVisible]; 
 
 return YES;
 }

The third step is to create and add a subcontroller in CYXTabBarController.m

- ( void )viewDidLoad {
 [ super viewDidLoad]; 
 
 // 1. Add the first controller  
 // 1.1 Initialization  
    CYXOneViewController *oneVC = [[CYXOneViewController alloc]init]; 
 
 // 1.2 Add oneVC as the root controller of UINavigationController  
    UINavigationController *nav1 = [[UINavigationController alloc]initWithRootViewController:oneVC]; 
 
 // Set the title of the tabBar  
 nav1.title = @ "Home" ;
    [nav1.navigationBar setBackgroundImage:[UIImage imageNamed:@ "commentary_num_bg" ] forBarMetrics:UIBarMetricsDefault]; 
 
 // Set the tabBar icon  
    nav1.tabBarItem.image = [UIImage imageNamed:@ "tab_home_icon" ]; 
 
 // Set the title of navigationBar  
 oneVC.navigationItem.title = @ "Home" ; 
 
 // Set the background color (these operations can be done by each individual child controller)  
    oneVC.view.backgroundColor = [UIColor whiteColor]; 
 
 // 1.3 Hand over UINavigationController to UITabBarController for management  
    [self addChildViewController:nav1]; 
 
 // 2. Add the second controller  
    CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init];
    UINavigationController *nav2 = [[UINavigationController alloc]initWithRootViewController:twoVC];
 nav2.title = @ "Technology" ;
    nav2.tabBarItem.image = [UIImage imageNamed:@ "js" ];
 twoVC.navigationItem.title = @ "Technology" ;
    twoVC.view.backgroundColor = [UIColor blueColor];
    [self addChildViewController:nav2]; 
 
 // 3. Add the third controller  
    CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init];
    UINavigationController *nav3 = [[UINavigationController alloc]initWithRootViewController:threeVC];
 nav3.title = @ "Blog Post" ;
    nav3.tabBarItem.image = [UIImage imageNamed:@ "qw" ];
 threeVC.navigationItem.title = @ "Blog Post" ;
    threeVC.view.backgroundColor = [UIColor yellowColor];
    [self addChildViewController:nav3]; 
 
 // 4. Add the 4th controller  
    CYXFourViewController *fourVC = [[CYXFourViewController alloc]init];
    UINavigationController *nav4 = [[UINavigationController alloc]initWithRootViewController:fourVC];
 nav4.title = @ "My Jianghu" ;
    nav4.tabBarItem.image = [UIImage imageNamed:@ "user" ];
 fourVC.navigationItem.title = @ "My Jianghu" ;
    fourVC.view.backgroundColor = [UIColor grayColor];
    [self addChildViewController:nav4]; 
 
 }

At this point, we have built the framework. Isn't it simple? The effect is as shown below:

But you may be tempted to complain that these are all redundant junk codes and unreadable. Let's extract the code below.

Step 4: Extract duplicate code

• Since all the above codes are written in viewDidLoad and there are too many repeated codes, resulting in code redundancy and low scalability, let's make a preliminary optimization of the code.
• Two methods are extracted here, one is the method to add all sub-controllers, and the other is the method to add each sub-controller

- ( void )viewDidLoad {
 [ super viewDidLoad]; 
 
    [self setUpAllChildViewController];
 } 
 
 /**
 * Add all sub-controller methods
 */  
 - ( void )setUpAllChildViewController{
 // 1. Add the first controller  
    CYXOneViewController *oneVC = [[CYXOneViewController alloc]init];
    [self setUpOneChildViewController:oneVC image:[UIImage imageNamed:@ "tab_home_icon" ] title:@ "Home" ]; 
 
 // 2. Add the second controller  
    CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init];
    [self setUpOneChildViewController:twoVC image:[UIImage imageNamed:@ "js" ] title:@ "Technology" ]; 
 
 // 3. Add the third controller  
    CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init];
    [self setUpOneChildViewController:threeVC image:[UIImage imageNamed:@ "qw" ] title:@ "Bowen" ]; 
 
 // 4. Add the 4th controller  
    CYXFourViewController *fourVC = [[CYXFourViewController alloc]init];
 [self setUpOneChildViewController:fourVC image:[UIImage imageNamed:@ "user" ] title:@ "My Jianghu" ];
 } 
 
 
 /**
 * Method to add a subcontroller
 */  
 - ( void )setUpOneChildViewController:(UIViewController *)viewController image:(UIImage *)image title:(NSString *)title{ 
 
    UINavigationController *navC = [[UINavigationController alloc]initWithRootViewController:viewController];
 navC.title = title;
    navC.tabBarItem.image = image;
    [navC.navigationBar setBackgroundImage:[UIImage imageNamed:@ "commentary_num_bg" ] forBarMetrics:UIBarMetricsDefault]; 
 
    viewController.navigationItem.title = title; 
 
    [self addChildViewController:navC];
 }