10 minutes to build app mainstream framework

<span id="Label3"></p>Build a mainstream framework interface <ul> <ul> <li>0. Achieving Results<br><br>Snip20150904_5.png <ul> <li>When we played the iphone application, did not find that most of the applications are similar structure, the following Tabbar controller can switch the sub-controller, which has navigation navigation bar</li> <li>This article is mainly to build the framework of the main body, the data is not added temporarily</li> </ul></li> </ul> </ul>Analyze the basic process of doing the project <ul> <ul> <li>1. Building the main framework of the project <ul> <li>(1) build Tabbarcontroller First (there is a bar Below)</li> <li>(2) re-build the Navigationcontroller (there is one, and each sub-controller is not the Same)</li> </ul></li> <li>2. Thinking about how to develop <ul> <li>(1) Storyboard Construction (use When the interface is very small)</li> <li>(2) Pure Code Building (more than 5 interfaces when used, easy to manage, commercial projects, generally use this Way)</li> </ul></li> </ul> </ul>Starting from 0 to build the mainstream framework (pure Code) 1. preparatory work <ul> <ul> <li>Environment deployment</li> </ul> </ul><br>snip20150904_11.png2. initial setup of the basic interface <ul> <ul> <li>First Step design catalog (based on modular +MVC idea, create basic file directories and Files) <ul> <li>Modular thinking Create a directory path (typically created under Real-world paths, then dragged into the Project)</li> <li>Custom Tabbarcontroller</li> </ul></li> </ul> </ul><br>Snip20150904_4.png <ul> <ul> <li>The second step on the code (set windows within APPDELEGATE.M to start the root controller)</li> </ul> </ul><pre class="hljs objectivec"><code class="objectivec">- (<span class="hljs-built_in">BOOL) Application: (<span class="hljs-built_in"><span class="hljs-built_in">uiapplication *) Application didfinishlaunchingwithoptions: (<span class="hljs-built_in">nsdictionary *) launchoptions { <span class="hljs-comment">//1. Creating a window <span class="hljs-keyword"> Self<span class="hljs-variable">. window = [[<span class="hljs-built_in">uiwindow alloc]initwithframe:[<span class="hljs-built_in">uiscreen mainscreen]<span class="hljs-variable">. bounds]; <span class="hljs-comment">//2. Set the Window's root controller Cyxtabbarcontroller *TABBARVC = [[cyxtabbarcontroller alloc]init]; <span class="hljs-keyword">self<span class="hljs-variable">. Window<span class="hljs-variable">. Rootviewcontroller = tabbarvc; <span class="hljs-comment">//3. Display window [<span class="hljs-keyword">Self<span class="hljs-variable">. Window makekeyandvisible]; <span class="hljs-keyword">return <span class="hljs-literal">YES;}</span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></code></pre> <ul> <ul> <li>Step three, Create and add a sub-controller within CYXTABBARCONTROLLER.M</li> </ul> </ul><pre class="hljs objectivec" data-find="_1"><code class="objectivec">- (<span class="hljs-keyword">Void) Viewdidload {[<span class="hljs-keyword">Super viewdidload];<span class="hljs-comment">1. Add a first controller<span class="hljs-comment">1.1 Initialize Cyxoneviewcontroller *ONEVC = [[cyxoneviewcontroller alloc]init];<span class="hljs-comment">1.2 Add ONEVC as the root controller of the Uinavigationcontroller<span class="hljs-built_in">Uinavigationcontroller *NAV1 = [[<span class="hljs-built_in">Uinavigationcontroller alloc]initwithrootviewcontroller:onevc];<span class="hljs-comment">Set the title of the Tabbar NAV1<span class="hljs-variable">. title =<span class="hljs-string">@ "home"; [nav1<span class="hljs-variable">. Navigationbar setbackgroundimage:[<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "commentary_num_bg"] Forbarmetrics:<span class="hljs-built_in">uibarmetricsdefault];<span class="hljs-comment">Set the icon for the Tabbar NAV1<span class="hljs-variable">. Tabbaritem<span class="hljs-variable">. image = [<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "tab_home_icon"];<span class="hljs-comment">Set the title of the Navigationbar ONEVC<span class="hljs-variable">. Navigationitem<span class="hljs-variable">. title =<span class="hljs-string">@ "home";<span class="hljs-comment">Set the background color (these actions can be given to each individual sub-controller) ONEVC<span class="hljs-variable">. View<span class="hljs-variable">. backgroundcolor = [<span class="hljs-built_in">Uicolor whitecolor];<span class="hljs-comment">1.3 Handed Uinavigationcontroller to Uitabbarcontroller management [<span class="hljs-keyword">Self addchildviewcontroller:nav1];<span class="hljs-comment">2. Add a 2nd controller Cyxtwoviewcontroller *TWOVC = [[cyxtwoviewcontroller alloc]init];<span class="hljs-built_in">Uinavigationcontroller *nav2 = [[<span class="hljs-built_in">Uinavigationcontroller alloc]initwithrootviewcontroller:twovc]; Nav2<span class="hljs-variable">. title =<span class="hljs-string">@ "technology"; Nav2<span class="hljs-variable">. Tabbaritem<span class="hljs-variable">. image = [<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "js"]; Twovc<span class="hljs-variable">. Navigationitem<span class="hljs-variable">. title =<span class="hljs-string">@ "technology"; Twovc<span class="hljs-variable">. View<span class="hljs-variable">. backgroundcolor = [<span class="hljs-built_in">Uicolor bluecolor]; [<span class="hljs-keyword">Self addchildviewcontroller:nav2];<span class="hljs-comment">3. Add a 3rd controller Cyxthreeviewcontroller *THREEVC = [[cyxthreeviewcontroller alloc]init];<span class="hljs-built_in">Uinavigationcontroller *nav3 = [[<span class="hljs-built_in">Uinavigationcontroller alloc]initwithrootviewcontroller:threevc]; Nav3<span class="hljs-variable">. title =<span class="hljs-string">@ "blog post"; Nav3<span class="hljs-variable">. Tabbaritem<span class="hljs-variable">. image = [<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "qw"]; Threevc<span class="hljs-variable">. Navigationitem<span class="hljs-variable">. title =<span class="hljs-string">@ "blog post"; Threevc<span class="hljs-variable">. View<span class="hljs-variable">. backgroundcolor = [<span class="hljs-built_in">Uicolor yellowcolor]; [<span class="hljs-keyword">Self addchildviewcontroller:nav3];<span class="hljs-comment"><span class="hljs-comment">//4. Add a 4th controller Cyxfourviewcontroller *FOURVC = [[cyxfourviewcontroller alloc]init]; <span class="hljs-built_in">Uinavigationcontroller *nav4 = [[<span class="hljs-built_in">uinavigationcontroller alloc]initwithrootviewcontroller:fourvc]; nav4<span class="hljs-variable">. title = <span class="hljs-string">@ "my lake"; nav4<span class="hljs-variable">. Tabbaritem<span class="hljs-variable">. image = [<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "user"]; fourvc<span class="hljs-variable">. Navigationitem <span class="hljs-variable">. title = <span class="hljs-string">@ "my lake"; fourvc<span class="hljs-variable">. View<span class="hljs-variable">. backgroundcolor = [<span class="hljs-built_in">uicolor graycolor]; [self<span class="hljs-keyword">addchildviewcontroller:nav4];}</span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre> <ul> <ul> <li>We've got the frame up here, isn't it simple? Effect</li> </ul> </ul><br>Snip20150904_8.png <ul> <ul> <li><p>But you may be tempted to vomit the slot, these are all redundant garbage code, no readability, Let's take a look at the code below</p></li> <li><p>Fourth step, extracting duplicate code</p> <ul> <li>Since all of the code above is written in viewdidload and repeated too much code, resulting in code redundancy, scalability is not high, let's take a preliminary optimization of the Code.</li> <li>Here we extract two methods, one is to add all the sub-controllers, and the other is to add a method for each child controller</li> </ul></li> </ul> </ul><pre class="hljs objectivec" data-find="_10"><code class="objectivec">- (<span class="hljs-keyword">Void) Viewdidload {[<span class="hljs-keyword">Super viewdidload]; [<span class="hljs-keyword">Self setupallchildviewcontroller];}<span class="hljs-comment">/** * Add all child controller methods */-(<span class="hljs-keyword">Void) setupallchildviewcontroller{<span class="hljs-comment">1. Add the first controller Cyxoneviewcontroller *ONEVC = [[cyxoneviewcontroller alloc]init]; [<span class="hljs-keyword">Self SETUPONECHILDVIEWCONTROLLER:ONEVC image:[<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "tab_home_icon"] Title:<span class="hljs-string">@ "home"];<span class="hljs-comment">2. Add a 2nd controller Cyxtwoviewcontroller *TWOVC = [[cyxtwoviewcontroller alloc]init]; [<span class="hljs-keyword">Self SETUPONECHILDVIEWCONTROLLER:TWOVC image:[<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "js"] Title:<span class="hljs-string">@ "technology"];<span class="hljs-comment">3. Add a 3rd controller Cyxthreeviewcontroller *THREEVC = [[cyxthreeviewcontroller alloc]init]; [<span class="hljs-keyword">Self SETUPONECHILDVIEWCONTROLLER:THREEVC image:[<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "qw"] Title:<span class="hljs-string">@ "blog post"];<span class="hljs-comment">4. Add a 4th controller Cyxfourviewcontroller *FOURVC = [[cyxfourviewcontroller alloc]init]; [<span class="hljs-keyword">Self SETUPONECHILDVIEWCONTROLLER:FOURVC image:[<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "user"] Title:<span class="hljs-string">@ "my lake"];}<span class="hljs-comment">/** * method to add a Sub-controller */-(<span class="hljs-keyword">Void) Setuponechildviewcontroller: (<span class="hljs-built_in"><span class="hljs-built_in">Uiviewcontroller *) viewcontroller image: (<span class="hljs-built_in">UIImage *) image title: (<span class="hljs-built_in">nsstring *) title{ <span class="hljs-built_in"> Uinavigationcontroller *NAVC = [[<span class="hljs-built_in">uinavigationcontroller alloc]initwithrootviewcontroller:viewcontroller]; NavC <span class="hljs-variable">. title = title; NAVC<span class="hljs-variable">. Tabbaritem<span class="hljs-variable">. Image = image; [NAVC<span class="hljs-variable">. Navigationbar setbackgroundimage:[<span class="hljs-built_in">UIImage imagenamed:<span class="hljs-string">@ "commentary_num_bg"] forbarmetrics: <span class="hljs-built_in"> uibarmetricsdefault]; Viewcontroller<span class="hljs-variable">. Navigationitem<span class="hljs-variable">. title = title; [self<span class="hljs-keyword">addchildviewcontroller:navc];}</span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre><p><p>10 minutes to build app mainstream framework</p></p></span>