可视化编程(XIB,Storyboard)
可视化编程
可视化编程: 一种所见即所得的编程方式, 可以快速创建控件, 方便布局页面
iOS中可视化编程分两种方式:
1.Xib: Xcode interface builder, 一对一(一个文件对应一个页面)
2.Storyboard: 故事版, sb, 一对多(一个文件对应多个页面)
Xcode右下侧的4个选项
1.文件模板, 可以创建文件
2.代码片段'<# #' + '>'
封装UIButton的创建
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; button.frame = CGRectMake(<#CGFloat x#>, <#CGFloat y#>, <#CGFloat width#>, <#CGFloat height#>); [button setTitle:<#(NSString *)#> forState:UIControlStateNormal]; [<#superview#> addSubview:button];
将代码拖入代码段里, 修改代码段的title和shortCut, 输入mybutton时代码段就会出现
输入mybutton:
3.UI控件(对可视化编程有效)
4.资源(图片, 视频, 音乐)
可视化编程需要使用的工具InterfaceBuilder
可视化编程的文件多了4个选项卡
1.选中的控件属于哪个类
2.选中控件的属性
3.选中控件的坐标和大小
4.选中控件的关联
Xib: Xcode interface builder, 一对一(一个文件对应一个页面)
创建viewController时要勾选Also create XIB file
注: 要在AppDelegate中将RootViewController设置为根视图控制器
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // Override point for customization after application launch. self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible]; RootViewController *rootVC = [[RootViewController alloc] init]; self.window.rootViewController = rootVC; [rootVC release]; return YES; }
选中视图View, 修改属性, 将size设置为iPhone6的屏大小
修改View的背景颜色 创建label, 将label控件拖入视图中, 双击label即可编辑label内容
点击右上角两个圈的图标, 显示xib和View视图
右键点击label拖拽到RootviewController中, 会自动生成label的属性
右键点击button, 选择Touch Up Inside将其拖拽到RootviewController @interface
@interface RootViewController () IBOutlet: 可视化编程中的控件关联 属性(ctrl) @property (retain, nonatomic) IBOutlet UITextField *textField; @property (retain, nonatomic) IBOutlet UILabel *label; IBAction: 与可视化编程中的控件关联 方法(右键) - (IBAction)press:(UIButton *)sender; @end
关联属性的时候
1.考虑属性是谁的
2.选中它
3.找到IBOutlet
关联方法的时候
1.考虑为谁关联方法
2.选中它
3.选择合适的事件(比如, touchUpInside)
4.再考虑方法在哪里定义
5.再把方法控件关联起来
- (IBAction)press:(UIButton *)sender { NSLog(@"%s", __FUNCTION__); NSLog(@"%@", _textField.text); self.label.text = _textField.text; }
点击button
Storyboard: 故事版, sb, 一对多(一个文件对应多个页面)
创建storyboad, Main.storyboard
注: storyboard自带window创建, AppDelegate就不需要创建window, 将Main interface写上storyboard的文件名, 将其设置为initial View
创建设置好的storyboard
准备切换页面(storyboard)
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { }
UIStoryboard, 继承于NSObject, 用于管理storyboard文件
创建方法
参数1: 文件名
参数2: 包
UIStoryboard *sb = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]];
通过storyboard获取视图控制器
1.获取第一个视图控制器(箭头指向)
UINavigationController *navigation = [sb instantiateInitialViewController];
2.获取某一个试图控制器(通过标识符)
NextViewController *nextVC = [sb instantiateViewControllerWithIdentifier:@"Next"];
UIStoryboardSegue, 继承于NSObject, 用于连接两个视图控制器, 控制之间的跳转
UIStoryboardSegue *segue1 = [UIStoryboardSegue segueWithIdentifier:@"segue" source:self destination:nextVC performHandler:^{ NSLog(@"😄"); }];
属性
起点视图控制器
segue1.sourceViewController
终点视图控制器
segue1.destinationViewController
标识符
segue1.identifier
添加tabBarController 和 NavigationController 以及UIViewController
添加tabBarController, 将tabBarController拖入视图
选中UIViewController, 点击Editor, 添加NavigationController
可以直接将资源里的图片拉入视图中, 会自动生成一个UIImageView将图片显示出来
将点击手势直接拉入图片中, 图片就添加了点击手势
点击tap右键, 拖到要跳转的页面, 选择show, 就给点击手势添加了方法, 点击图片就跳到下一个页面