屏幕快照 2016-11-20 下午6.59.38.png
1. 用XIB来布局并显示到模拟器
file--> new --> file --> Cocoa Touch Class --> name : VCRoot ，勾选also create xib file.
生成文件：
屏幕快照 2016-11-20 下午7.24.04.png
点开VCRoot.xib, 在右下角第三个选项添加控件。得到如图结果：
屏幕快照 2016-11-20 下午7.24.57.png
让xib视图显示到模拟控制器：
- 首先在info.plist中删除main storyboard文件
- 在AppDelegate.m中添加代码
头文件 #import "VCRoot.h"
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s8 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
//创建一个窗口对象
self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
//创建根视图控制器对象
//参数一：创建时加载的XIB资源文件名。加载XIB作为视图控制器视图
//参数二：指主文件包，XIB所在的位置
VCRoot* root=[[VCRoot alloc]initWithNibName:@"VCRoot" bundle:[NSBundle mainBundle]];
self.window.rootViewController=root;
[self.window makeKeyAndVisible];
return YES;
}
即可显示：
屏幕快照 2016-11-20 下午7.27.18.png
2. XIB控件的创建
先创建一个project，之后
file--> new --> file --> Cocoa Touch Class --> name : VCRoot ，这次不勾选 also create xib file.
然后再添加一个新文件：
file--> new --> file --> ios/Userinterface/empty
屏幕快照 2016-11-20 下午7.32.52.png
得到一个自己添加的xib文件。
- xib文件与VCRoot的绑定：
点击左侧图标 file owner, 右上角class信息显示的是NSObject，自己输入VCRoot，实现xib文件与VCRoot的绑定。
在右下角控件找到View控件，添加上去。
屏幕快照 2016-11-20 下午7.36.42.png
-
file owner和新添加的view的绑定：
点击file owner --> 右上角第六个选项 --> 拖住view加号，和显示的视图相连：
屏幕快照 2016-11-20 下午7.39.04.png
右上角变为：
屏幕快照 2016-11-20 下午7.40.29.png 修改代理设置
重复第一部分步骤：
-----首先在info.plist中删除main storyboard文件
-----在AppDelegate.m中添加代码
头文件 #import "VCRoot.h"
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s8 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
//创建一个窗口对象
self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
//创建根视图控制器对象
//参数一：创建时加载的XIB资源文件名。加载XIB作为视图控制器视图
//参数二：指主文件包，XIB所在的位置
VCRoot* root=[[VCRoot alloc]initWithNibName:@"VCRoot" bundle:[NSBundle mainBundle]];
self.window.rootViewController=root;
[self.window makeKeyAndVisible];
return YES;
}
修改xib中的背景颜色后，运行，可以看到xib和虚拟机运行结果一致：
屏幕快照 2016-11-20 下午7.45.43.png
3. 设置控件属性
新添加一个控件，点击控件，看右上角第四选项，可以更改控件属性。
屏幕快照 2016-11-20 下午7.58.06.png
4. 控件属性和事件的同步
选中视图，点击右上方中间图标：
屏幕快照 2016-11-20 下午8.04.42.png
显示出代码：
屏幕快照 2016-11-20 下午8.05.09.png
要将左侧视图与右侧代码绑定：
- 找到对应的头文件，进入，点击左侧某个控件，按住ctrl，拖拽到右侧位置：
屏幕快照 2016-11-20 下午8.15.02.png
- 对于按钮来说，还需要同步事件
同样，点击左侧某个控件，按住ctrl，拖拽到右侧位置：选择最上面 action：
屏幕快照 2016-11-20 下午8.20.57.png
最后生成结果：
屏幕快照 2016-11-20 下午8.23.11.png
同时在相应的VCRoot.m文件中也创建出事件函数：
屏幕快照 2016-11-20 下午8.25.05.png
注意：如果想删除某段代码，要点击对应控件，在右上角：
删除Owner，再删除代码，否则会导致程序崩溃。也就是说，要删除的属性前面一定是空心小圆圈。
之后再去VCRoot.m中实现事件函数:
最终结果:
屏幕快照 2016-11-20 下午8.43.09.png
屏幕快照 2016-11-20 下午8.43.23.png
