大钟的ios开发之旅(4)————简单谈谈ios程序界面实现的三种方式（代码创建，xib和storyboard）

/********************************************************************************************
 * author：conowen@大钟                                                                                                                          
 * E-mail：conowen@hotmail.com

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

 *深圳市动力思维科技发展有限公司                                                                                                         
 * http://blog.csdn.net/conowen                                                                                                              
 * 注：本文为原创，仅作为学习交流使用，转载请标明作者及出处。     

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

一丶前言

       实现ios界面总的来说，有三种方式，传统的是纯代码创建与xib创建，近年来，苹果官网一直推荐用storyboard管理项目界面，最新的xcode创建的project也是默认为storyboard方式了。相对于Android开发而已，界面的管理就两种方式，一种是纯代码，另外一种技术XML布局方式。其实ios与Android的界面管理相同点挺多的，下面就分开说说。

二、纯代码创建

 首先如下，纯代码创建一个UIImageView，并给它设置图片，并且根据设备的不同，动态设置其位置坐标与长宽。

    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);
    
    }

缺点：代码量大，构建控件麻烦，点击的监听函数和delegate要自己手动创建。

三、xib方式创建

       xib创建视图，就如同Android的XML一样，但是它比Android的XML方式还强大。可以直接设置控件的监听函数与delegate，控件的各种属性基本都能设置。

3.1、xib项目的初始化写法

     使用xib的项目，AppDelegate的didFinishLaunchingWithOptions方法中一般这么写。

- (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" bundle: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、绑定xib到代码文件

     新建一个xib文件，然后按照如下图与.m文件绑定。

     点击File,s Owner，在右边的Custom Class输出要绑定的.m文件即可。一般这个.m文件是一个继承UIViewController的类。

3.3、xib文件助手的使用

      建立联系之后，可以在右边的控件栏目中拖拽控件到xib文件中。然后可以点击xcode右上角的show the Assistant editor，打开xib助手编辑器如下图。

按住键盘的ctrl键，拖拽到绑定的m文件对应的h文件中。就可以声明这个控件。

在xib助手边界器界面。右边界面选择m文件，按住键盘的ctrl键，拖拽控件到右边m文件中，就可以快速实现这个控件的点击监听函数。如下图。

3.4、xib方式实现delegate

     对于一些tableview或者UICollectionView，可以直接右键这个控件，然后拖拽dataSource到Files Owner，就可以实现dataSource与delegate函数。不必在.h文件写。

 新建一个带xib的viewcontroller，实现跳转。

            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、xib文件的本质

    其实xib文件就是一个xml文件，右键xib文件，用source code方式打开就可以看到里面的内容了。

<?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>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
            <rect key="frame" x="0.0" y="20" width="768" height="1004"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" id="bff-VE-ebG">
                    <rect key="frame" x="20" y="53" width="360" height="429"/>
                    <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                    <inset key="insetFor6xAndEarlier" minX="0.0" minY="44" 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" eventType="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="simulatedStatusBarMetrics"/>
        </view>
    </objects>
    <resources>
        <image name="app1.png" width="492" height="587"/>
        <image name="app2.png" width="492" height="587"/>
        <image name="app3.png" width="492" height="587"/>
        <image name="app4.png" width="492" height="587"/>
    </resources>
    <simulatedMetricsContainer key="defaultSimulatedMetrics">
        <simulatedStatusBarMetrics key="statusBar" statusBarStyle="blackOpaque"/>
        <simulatedOrientationMetrics key="orientation"/>
        <simulatedScreenMetrics key="destination"/>
    </simulatedMetricsContainer>
</document>

3.6、把iPhone版本的xib更改为ipad版本

用source code方式打开iPhone版本的xib，copy代码覆盖到新建的xib文件中。

在文件头

<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6250" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" variant="6xAndEarlier" propertyAccessControl="none">

<document type="com.apple.InterfaceBuilder3.CocoaTouch.iPad.XIB" version="3.0" toolsVersion="6250" systemVersion="13F34" targetRuntime="iOS.CocoaTouch.iPad" variant="6xAndEarlier" propertyAccessControl="none">

缺点：项目大的话，xib文件过多，不容易统一管理。跳转只能在代码实现，比较混乱。

四、storyboard方式

    storyboard方式是ios5之后Apple提供了一种全新的方式。简单来说，StoryBoard是一个包含了多个xib与xib之间跳转关系的文件。在StoryBoard中不仅可以看到每个ViewController的布局样式，也可以知道各个ViewController之间的转换关系。最近版本的xcode新建的工程都是默认以storyboard方式。可见未来的发展趋势都是storyboard布局方式。

使用storyboard布局的项目 AppDelegate方法中几乎没有内容。

使用实例：
新建一个single view项目，把自动生成的storyboard文件删除。自己再重新新建一个storyboard文件。在项目的targets里面做如下设置


这样项目启动的时候，就会自动加载这个storyboard文件，不用自己代码配置。

打开自己新建的storyboard文件。拉一个Navigation Controller到里面去。这一步的操作，系统也同时帮你新建了一个Table View，点击Navigation Controller在右边的属性栏中的Is Initial View Controller中勾选上。表示这个是初始的Viewcontroller。


把系统帮你新建的那个Table View删除，自己在右边拖一个普通的View Controller到storyboard文件中，在这个新建的View Controller双击一下上面的标题栏，然后在custom那里绑定自己需要绑定的viewcontroller 代码文件。然后按住ctrl键，把Navigation Controller拖拽到新建的View Controller那里，弹出来的对话框，设置为root view controller


可以设置这个view controller的title之类的，如下图。




再新建一个View Controller，同样步骤绑定一个.m文件。拖动一个button到第一个View Controller，然后按住ctrl键，先第二个View Controller拖拽。弹出的对话框中选择show，就可以实现点击button跳转到第二个View Controller的操作。



优点：所有xib集中在一个storyboard文件中，管理方便，View Controller跳转很轻松就可以实现，大大减少代码量。
缺点：由于所有xib都集中在一个文件中，对于一些大型项目，分工起来就比较困难，不好分工，而且采用storyboard方式对系统资源的耗费比代码和xib方式要大。


五、总结

     对于个人而言，我比较偏向于xib为主要的视图构建方式，代码创建为辅助，因为我是从Android开发转到ios开发，比较习惯于每一个activity 对应一个xml布局文件这样的方式，xib也能满足我的需要，目前，暂且是这样使用，等工程需要，在使用storyboard方式，毕竟这是未来的发展趋势。

大钟的ios开发之旅(4)————简单谈谈ios程序界面实现的三种方式（代码创建，xib和storyboard）

原文：http://blog.csdn.net/conowen/article/details/40860667