
1. 用XIB来布局并显示到模拟器
file--> new --> file --> Cocoa Touch Class --> name : VCRoot ,勾选also create xib file.
生成文件:

点开VCRoot.xib, 在右下角第三个选项添加控件。得到如图结果:

让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;
}
即可显示:

2. XIB控件的创建
先创建一个project,之后
file--> new --> file --> Cocoa Touch Class --> name : VCRoot ,这次不勾选 also create xib file.
然后再添加一个新文件:
file--> new --> file --> ios/Userinterface/empty

得到一个自己添加的xib文件。
- xib文件与VCRoot的绑定:
点击左侧图标 file owner, 右上角class信息显示的是NSObject,自己输入VCRoot,实现xib文件与VCRoot的绑定。
在右下角控件找到View控件,添加上去。

-
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和虚拟机运行结果一致:

3. 设置控件属性
新添加一个控件,点击控件,看右上角第四选项,可以更改控件属性。

4. 控件属性和事件的同步
选中视图,点击右上方中间图标:

显示出代码:

要将左侧视图与右侧代码绑定:
- 找到对应的头文件,进入,点击左侧某个控件,按住ctrl,拖拽到右侧位置:

- 对于按钮来说,还需要同步事件
同样,点击左侧某个控件,按住ctrl,拖拽到右侧位置:选择最上面 action:

最后生成结果:

同时在相应的VCRoot.m文件中也创建出事件函数:

注意:如果想删除某段代码,要点击对应控件,在右上角:

删除Owner,再删除代码,否则会导致程序崩溃。也就是说,要删除的属性前面一定是空心小圆圈。
之后再去VCRoot.m中实现事件函数:

最终结果:


网友评论