XIB方法-ios可视化编程

作者: yz_wang | 来源:发表于2016-11-20 20:43 被阅读0次

屏幕快照 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和虚拟机运行结果一致：