Big clock iOS Development tour (4) ———— A brief talk about three ways to implement the iOS program Interface (code creation, Xib and storyboard)

/***********************************
 * author:[email protected] Big clock                                                                                        & nbsp                                  &NBS P  &NBSP
 * e-mail:[email protected]

 *site:http://www.idealpwr.com / 

 * Shenzhen Power Thinking Technology Development Co., Ltd.                                             &N Bsp                          ,         &NB Sp                        
 * http://blog.csdn.net/ conowen                                                      and nbsp                          ,         &NB Sp                   
 * Note: This article is original, only as a learning exchange use, reprint please indicate the author and source.     

********************************************************************************************/

I. Preface

To implement the iOS interface in general, there are three ways, traditional pure code creation and Xib creation, in recent years, Apple's official website has been recommended to manage the project interface with storyboard, the latest Xcode created by default for project storyboard way. Compared to the development of Android, the interface is managed in two ways, one is pure code, the other is a technical XML layout method. In fact, iOS and Android interface management is very much the same, the following is said separately.

Second, pure code creation

First, the pure code creates a Uiimageview, sets the picture, and, depending on the device, dynamically sets its position coordinates and length-width.

    Uiimageview *food=[[uiimageview alloc] init];    Food.image=[uiimage Imagenamed:_imgname];    if ([[Uidevice currentdevice] userinterfaceidiom] = = Uiuserinterfaceidiompad) {        Food.frame=cgrectmake (width* 0.25+WIDTH/2-197*4/6), HEIGHT+HEIGHT/2, 197*4/3, 260*4/3);    }    else{        Food.frame=cgrectmake ((WIDTH*0.25+WIDTH/2-90*4/6), HEIGHT+HEIGHT/2, 90*4/3, 118*4/3);        }

Pros: The flexibility to adapt to a variety of environments, no matter what iOS version, or Iphone,ipad, can dynamically adapt to a variety of scenarios.

Cons: Large code size, trouble building control, click on the Listener function and delegate to manually create it yourself.

Third, Xib way to create

Xib creates a view, just like the XML for Android, but it's more powerful than the way Android does XML. You can set the control's listener function and delegate directly, and the various properties of the control can be set basically.

3.1. Initialization of Xib Project

Using Xib's project, Appdelegate's Didfinishlaunchingwithoptions method is generally written in this way.

-(BOOL)  Application: (uiapplication *) application didfinishlaunchingwithoptions: (nsdictionary *) launchOptions{Self.window =        [[UIWindow alloc] initwithframe:[[uiscreen mainscreen] bounds];    Uinavigationcontroller *navcontroller;    Homeviewcontroller *homeviewcontrol; if (is_ipad) {Homeviewcontrol = [[Homeviewcontroller alloc] initwithnibname:@ "Homeviewcontroller_ipad" bun            Dle:nil];            } else{Homeviewcontrol = [[Homeviewcontroller alloc] initwithnibname:@ "Homeviewcontroller" bundle:nil];    } Navcontroller = [[Uinavigationcontroller alloc] initwithrootviewcontroller:homeviewcontrol];        Self.window.rootViewController =navcontroller;    Override point for customization after application launch.    Self.window.backgroundColor = [Uicolor Whitecolor];    [Self.window makekeyandvisible]; return YES;} 

3.2. Binding Xib to code files

Create a new Xib file, and then follow the bindings such as the. m file.

Click File,s Owner to output the. m file to be bound on the right of the custom class. In general, this. m file is a class that inherits Uiviewcontroller.

3.3, the use of xib file assistant

After establishing the link, you can drag and drop the control into the Xib file in the control column on the right. You can then click Show the Assistant Editor in the upper right corner of Xcode to open the Xib assistant editor.

Hold down the CTRL key of the keyboard and drag to the H file corresponding to the M file of the binding. You can declare the control.

In the Xib assistant boundary device interface. The right-hand interface selects the M file, presses the CTRL key of the keyboard, and drags the control to the right m file to quickly implement the control's click-Listen function. Such as.

3.4, Xib way to achieve delegate

For some tableview or uicollectionview, you can directly right-click the control, and then drag datasource to files Owner, you can implement DataSource and delegate functions. You do not have to write in the. h file.

Create a new Viewcontroller with xib to achieve jumps.

            Funviewcontroller *funviewcontroller;                        if ([[Uidevice currentdevice] userinterfaceidiom] = = Uiuserinterfaceidiompad) {                                Funviewcontroller = [[ Funviewcontroller alloc] initwithnibname:@ "Funviewcontroller_ipad" Bundle:nil];                            }            else{                Funviewcontroller = [[Funviewcontroller alloc] initwithnibname:@ "Funviewcontroller" Bundle:nil];                            }                        [Self.navigationcontroller Pushviewcontroller:funviewcontroller Animated:yes];

3.5. The nature of xib files

In fact, the Xib file is an XML file, right-xib file, with the source code to open the content can be seen inside.

<?xml version= "1.0" encoding= "UTF-8" standalone= "no"? ><document type= " Com.apple.InterfaceBuilder3.CocoaTouch.iPad.XIB "version=" 3.0 "toolsversion=" 6250 "systemversion=" 13f34 "        Targetruntime= "IOS.CocoaTouch.iPad" variant= "6xAndEarlier" propertyaccesscontrol= "None" > <dependencies> <deployment identifier= "IOS"/> <plugin identifier= "Com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version = "6244"/> </dependencies> <objects> <placeholder placeholderidentifier= "Ibfilesowner" id= "- 1 "userlabel=" File ' s Owner "customclass=" Homeviewcontroller "> <connections> <outlet Property= "BT1" destination= "BFF-VE-EBG" id= "joh-p4-r0x"/> <outlet property= "bt2" destination= "g7d-fl-                SYA "id=" Tzh-x9-dgx "/> <outlet property=" bt3 "destination=" Obz-wc-iez "id=" Knu-g6-sti "/>       <outlet property= "Bt4" destination= "Ygr-nd-5hi" id= "0hk-jv-3op"/>         <outlet property= "View" destination= "I5m-pr-fkt" id= "SFX-ZR-JGT"/> </connections> & lt;/placeholder> <placeholder placeholderidentifier= "Ibfirstresponder" id= "-2" customClass= "UIResponder"/&gt        ; <view clearscontextbeforedrawing= "NO" contentmode= "Scaletofill" id= "I5m-pr-fkt" > <rect key= "Frame" x= " 0.0 "y=" width= "768" height= "1004"/> <autoresizingmask key= "Autoresizingmask" widthsizable= "YES" Heigh tsizable= "YES"/> <subviews> <button opaque= "NO" contentmode= "Scaletofill" Contenthor                    Izontalalignment= "Center" contentverticalalignment= "center" linebreakmode= "middletruncation" id= "Bff-VE-ebG" > <rect key= "Frame" x= "y=", "width=", height= "429"/> <autoresizingmask key= "au Toresizingmask "flexiblemaxx=" yes "flexiblemaxy=" yes "/> <inset key=" insetfor6xandearlier "minX=" 0 .0 "miny=" maxx= "0.0" maxy= " -44"/> <state key= "normal" title= "button" image= "App1.png" > <color key= "Titleshadowcolor" white= "0.5" alpha= "1" colorspace= "Calibratedwhite"/> </state > <connections> <action selector= "bt1action:" destination= "-1" event                            Type= "Touchupinside" id= "akz-lb-p87"/> </connections> </button> </subviews> <color key= "backgroundcolor" red= "0.0" green= "0.80000000000000004" blue= "0.81960784313724999" alpha= "1" colorspace= "Calibratedrgb"/> <simulatedstatusbarmetrics key= "SimulatedSta Tusbarmetrics "/> </view> </objects> <resources> <image name=" App1.png "width=" 492 "height=" 587 "/> <image name=" app2.png "width=" 492 "height=" 587 "/> <image name=" App3.png "wid Th= "492" height= "587"/&GT <image name= "App4.png" width= "492" height= "587"/> </resources> <simulatedmetricscontainer key= "Defaul Tsimulatedmetrics "> <simulatedstatusbarmetrics key=" StatusBar "statusbarstyle=" Blackopaque "/> <s Imulatedorientationmetrics key= "Orientation"/> <simulatedscreenmetrics key= "Destination"/> </simulat Edmetricscontainer></document>

3.6. Change iphone version xib to ipad version

Use source code to open the iphone version of the Xib,copy code to overwrite the new Xib file.

In the file header

<document type= "Com.apple.InterfaceBuilder3.CocoaTouch.XIB" version= "3.0" toolsversion= "6250" systemversion= " 13f34 "Targetruntime=" Ios.cocoatouch "variant=" 6xAndEarlier "propertyaccesscontrol=" None ">

change to the following to add two ipad tags

<document type= "Com.apple.InterfaceBuilder3.CocoaTouch.iPad.XIB" version= "3.0" toolsversion= "6250" systemversion= "13f34" targetruntime= "IOS.CocoaTouch.iPad" variant= "6xAndEarlier" propertyaccesscontrol= "None" >

Advantages: Each viewcontroller corresponding to a separate xib, can be more convenient to manage separately, the project is also convenient for many people to develop together, change the view convenient, without global changes.

Disadvantage: The project is large, xib file too much, not easy unified management. Jumps can only be implemented in code, which is more confusing.

Four, Storyboard way

The storyboard approach is ios5 after Apple offers a whole new way. In a nutshell, storyboard is a file that contains a jump relationship between multiple xib and xib. In storyboard, you can see not only the layout style of each viewcontroller, but also the conversion relationship between each viewcontroller. The latest version of Xcode new project is storyboard by default. The future trend of development is storyboard layout way.

There is little content in the project Appdelegate method that uses the storyboard layout.

Usage Examples:
Create a new single view project and delete the automatically generated storyboard file. Re-create a new storyboard file yourself. Make the following settings in the targets of the project


when the project starts, it will automatically load the storyboard file without its own code configuration.

Open your own new storyboard file. Pull a navigation controller into the inside. This step, the system also helps you to create a new table View, click on the navigation controller in the right side of the property bar is Initial View controller tick. Indicates that this is the initial viewcontroller.


The system to help you create a new table view Delete, you drag a normal view controller to the right of the storyboard file, in the new view controller double-click the above title bar, Then bind yourself to the Viewcontroller code file that you want to bind in custom. Then hold down the CTRL key and drag the navigation controller to the new view controller, and the Pop-up dialog box is set to the root view controller


You can set the title of this view controller, such as.




Create a new view Controller, and the same step binds a. m file. Drag a button to the first view controller, then hold down the CTRL key and drag the second view controller first. Select Show in the Pop-up dialog to enable the Click button to jump to the second view controller.



Advantages: All xib are centralized in a storyboard file, easy to manage, and the View controller jump can be easily implemented, greatly reducing the amount of code.
Disadvantage: Because all xib are concentrated in a file, for some large projects, the division of labor is more difficult, not good division of labor, and the use of storyboard mode of system resources is more expensive than code and Xib way.


V. Summary

For individuals, I prefer to xib as the main view-building approach, the code is created as secondary, because I go from Android Development to iOS development, more accustomed to each activity corresponding to an XML layout file such way, Xib can meet my needs, at present, For the moment, such use, and other engineering needs, in the use of storyboard mode, after all, this is the future trend of development.

Big clock iOS Development tour (4) ———— A brief talk about three ways to implement the iOS program Interface (code creation, Xib and storyboard)