[UI Component Basics] Make a single view application with bottom navigation and top navigation

Recently began to write a blog, the things I learned to summarize and summarize.

A lot of beginners iOS mobile app development of the beginning must be scratching the head, not good, is a large chunk of hair down.

Because very confused ah, do not know how to do, there is a real machine has the great God to help people fortunately said, no machine and no friends who is miserable, completely do not know where to start.

In fact, I think that if you really want to learn, the most time, you at least a xcode to use to see.

Early if there is no Xcode, no Apple Computer, you can start from the basic grammar, in fact, OC Grammar is also very painful, what * ah, alloc AH init ah. It is estimated that the world is completely different from the imagination of the people who have learned Java and then come to OC, there will be the impulse to drop the keyboard.

OK, let's get to the point today, actually, what I want to say is, what do I do if I want to do a main interface framework for the app that's currently popular?

First of all, I will not drag the control, basically hit by hand.

The first step is to create a single view application, the view application, in Xcode first.

The second step, click on the appdelegate.m file, in -(BOOL) Application: (uiapplication *) application Didfinishlaunchingwithoptions: (nsdictionary *) Add code to the Launchoptions method, the effect is as follows :

1-(BOOL) Application: (UIApplication *) application didfinishlaunchingwithoptions: (Nsdictionary *) launchoptions {2     //Override point for customization after application launch.3     4     //1. Create a window5Self.window =[[UIWindow alloc]init];6     //2. Set the window position, size7Self.window.frame =[UIScreen mainscreen].bounds;8     9     //3. display windowTen [Self.window makekeyandvisible]; One     //4. Set the root view controller of the main window to the custom Mytabviewcontroller (custom Uitabbarcontroller) ASelf.window.rootViewController =[[Mytabviewcontroller alloc]init]; -  -     returnYES; the}

This is actually the addition of 4 lines of code, the role is to set the main window size, position, and the main window to set the root view controller.

In the third step, customizing a uitabbarcontroller, the so-called Uitabbarcontroller is the common bottom navigation content in the app app, as shown below:

　　

The above picture in the red box is the Uitabbarcontroller concrete display effect, that is, everyone usually contact to see the look. But in fact, Uitabbarcontroller contains multiple child view controllers, namely Childviewcontroller, each of which Childviewcontroller and Uitabbarcontroller are the same size, not just the box above me so big, in the above code, I wrote a code:  Self.window.rootViewController = [[Mytabviewcontroller alloc]init]; That is, I set the custom Uitabbarcontroller as the root view controller of the main window, and the main window is as large as the phone screen, so the size of the Uitabbarcontroller in this code is as big as the phone screen. Every childviewcontroller is as big as a mobile screen.

So, let's add a custom Mytabviewcontroller, the whole add process I have, for unfamiliar friends still helpful:

　　

　　

　　

Following the steps in the previous example diagram, we created a custom Uitabbarcontroller component Mytabviewcontroller the

Fourth step, click on the mytabviewcontroller.m file to add code to achieve specific details.

First of all, a uitabbarcontroller component is just beginning with nothing at all, and if you run now, you will see a black interface because nothing.

If you want to add content, add Childviewcontroller (Child View Controller) to the Uitabbarcontroller component, that is, the bottom of the content, where I want to add more than the bottom navigation, I even want to set the top navigation bar, Then we should have a design in mind: First, the display to the user is definitely a uiviewcontroller, if you want to add the top navigation bar, then we should give the user to watch and use this Uiviewcontroller package to a Uinavigationcontroller (Navigation view Controller), if you want to display the bottom navigation content, Then we are going to include this uiviewcontroller Uinavigationcontroller as a childviewcontroller (Child view Controller) for the user to see and use. Added to the Uitabbarcontroller. Below, I will put the code of this process out, please carefully watch and read the comments:

1 #import "MyTabViewController.h"2 3 @interfaceMytabviewcontroller ()4 5 @end6 7 @implementationMytabviewcontroller8 9- (void) Viewdidload {Ten [Super Viewdidload]; One      A     /** - Create 3 uiviewcontroller,1 Uitableviewcontroller and execute the encapsulated ADDCHILDVC method -      */ theuiviewcontroller* home=[[Uiviewcontroller alloc]init]; -[Self addchildvc:home title:@"Home Page"Image@"Tabbar_home"SelectedImage:@"tabbar_home_selected"]; -      -uitableviewcontroller* msg=[[Uitableviewcontroller alloc]init]; +[Self addchildvc:msg title:@"message"Image@"Tabbar_message_center"SelectedImage:@"tabbar_message_center_selected"]; -      +uiviewcontroller* discover=[[Uiviewcontroller alloc]init]; A[Self addchildvc:discover title:@"found"Image@"Tabbar_discover"SelectedImage:@"tabbar_discover_selected"]; at      -uiviewcontroller* profile=[[Uiviewcontroller alloc]init]; -[Self addchildvc:profile title:@"I'm"Image@"Tabbar_profile"SelectedImage:@"tabbar_profile_selected"]; - } - /** - * Generate and add a child controller for the current controller, which is included in a uinavigationcontroller and then added to the current controller (Uitabbarcontroller) in  * - * @param CHILDVC need to be added sub-controller to * @param title navigation title and Tabbar caption + * @param image of Tabbaritem image in normal form - * Picture of the selectedimage highlighted Tabbaritem @param the  */ *-(void) ADDCHILDVC: (uiviewcontroller*) CHILDVC title: (nsstring*) title Image: (nsstring*) Image selectedimage: (nsstring*) SelectedImage $ {Panax Notoginseng     //set the navigation title to match the next heading -childvc.navigationitem.title=title; thechildvc.tabbaritem.title=title; +     //Childvc.title=title;//This sentence can be done by the above two lines of code function A      the     //set the Tabbaritem of the sub-controller (that is, a row of navigation content shown below) to display the picture normally +     //imagewithrenderingmode:uiimagerenderingmodealwaysoriginal (Image Presentation mode: Original display) -     //Note: If you give a picture directly to the default color, you want to set the mode to not be rendered $     //namely Imagewithrenderingmode:uiimagerenderingmodealwaysoriginal $ChildVc.tabBarItem.image =[[UIImage imagenamed:image] imagewithrenderingmode:uiimagerenderingmodealwaysoriginal]; -     //set the highlight picture for the tabbaritem of the child controller -ChildVc.tabBarItem.selectedImage =[[UIImage imagenamed:selectedimage] imagewithrenderingmode:uiimagerenderingmodealwaysoriginal]; the     //childVc.view.backgroundColor = Randomcolor; -     //set the style of text that is not selectedWuyinsmutabledictionary* textattrs=[Nsmutabledictionary dictionary]; theTextattrs[nsforegroundcolorattributename] =[Uicolor Blackcolor]; - [Childvc.tabbaritem settitletextattributes:textattrs forstate:uicontrolstatenormal]; Wu     //set the style of the selected text -nsmutabledictionary* seltextattrs=[Nsmutabledictionary dictionary]; AboutSeltextattrs[nsforegroundcolorattributename] =[Uicolor Orangecolor]; $ [Childvc.tabbaritem settitletextattributes:seltextattrs forstate:uicontrolstateselected]; -      -     //wrapping the sub-controller in a Uinavigationcontroller -uinavigationcontroller* nav=[[Uinavigationcontroller alloc] INITWITHROOTVIEWCONTROLLER:CHILDVC]; A      +     //Add the packaged uinavigationcontroller to the child view controller of the controller the [self addchildviewcontroller:nav]; -}

Through this code, you can find that OC actually a bit of egg pain, but, if the study thoroughly, you will find that everything is a reason, I hope this blog useful to everyone, if there are any comments or suggestions, welcome to me to discuss and study: qq:1750587828

Again, I feel that iOS development is like this, first of all, you have to save memory usage and traffic usage, second, the interface of the design of the simpler the more the Fool the better, third, the code is more, the system provides components can not solve on the custom, custom, if solve trouble with a third party. I have a bit of emotion, and everyone to share the encouragement.

[UI Component Basics] Make a single view application with bottom navigation and top navigation