可视化编程(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时代码段就会出现

可视化编程(XIB,Storyboard)

输入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视图

可视化编程(XIB,Storyboard)

右键点击label拖拽到RootviewController中, 会自动生成label的属性

可视化编程(XIB,Storyboard)

右键点击button, 选择Touch Up Inside将其拖拽到RootviewController @interface

可视化编程(XIB,Storyboard)

@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

可视化编程(XIB,Storyboard)

创建设置好的storyboard

可视化编程(XIB,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拖入视图