XIB方法-ios可视化编程

屏幕快照 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视图显示到模拟控制器：

1. 首先在info.plist中删除main storyboard文件
2. 在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文件。

1. xib文件与VCRoot的绑定：
   点击左侧图标 file owner, 右上角class信息显示的是NSObject，自己输入VCRoot，实现xib文件与VCRoot的绑定。

在右下角控件找到View控件，添加上去。

屏幕快照 2016-11-20 下午7.36.42.png

2. file owner和新添加的view的绑定：
   点击file owner --> 右上角第六个选项 --> 拖住view加号，和显示的视图相连：

   
   
   

   屏幕快照 2016-11-20 下午7.39.04.png
   
   

   右上角变为：

   
   
   

   屏幕快照 2016-11-20 下午7.40.29.png

3. 修改代理设置
   重复第一部分步骤：
   -----首先在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

要将左侧视图与右侧代码绑定：

1. 找到对应的头文件，进入，点击左侧某个控件，按住ctrl，拖拽到右侧位置：

屏幕快照 2016-11-20 下午8.15.02.png

2. 对于按钮来说，还需要同步事件
   同样，点击左侧某个控件，按住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