首页 > 代码库 > 大钟的ios开发之旅(4)————简单谈谈ios程序界面实现的三种方式（代码创建，xib和storyboard）
大钟的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);
}优点：可以灵活地适应各种环境，无论是什么ios版本，或者iPhone，ipad，都可以动态地适应各种场景。
缺点：代码量大，构建控件麻烦，点击的监听函数和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">
更改为以下的，就是添加两个iPad标记
<document type="com.apple.InterfaceBuilder3.CocoaTouch.iPad.XIB" version="3.0" toolsVersion="6250" systemVersion="13F34" targetRuntime="iOS.CocoaTouch.iPad" variant="6xAndEarlier" propertyAccessControl="none">
优点：每个viewcontroller对应单独的xib，可以更加方便单独管理，项目也方便多人一起开发，改动视图方便，不用全局改动。
缺点：项目大的话，xib文件过多，不容易统一管理。跳转只能在代码实现，比较混乱。
四、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）