iOS学习之UI可视化编程-StoryBoard

时间:2021-07-04 08:51:49

一、StoryBoard与xib

  • 对比:
  • 相同点:都属于IB编程的方式,可以快速构建GUI。
  • 不同点:xib侧重于单文件(单独的控制器或者视图)编辑,storyboard侧重于多页面关联。storyboard可以直观的梳理出页面间的逻辑,并且所有页面跳转逻辑均可在-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender;方法完成,方便界面间数据统一管理。
  • 注意事项:在AppDelegate的-application:didFinishLaunchingWithOptions:方法中不要再用代码初始化一个window。将创建好的storyboard在应用程序配置General中设置为MainInterface。
  • 利用storyboard绘制自定义单元格要注意以下几点:
  • 创建自定义cell时选中左侧TableViewCell。
  • 绘制自定义UI界面。
  • 设置重用标识符。
  • 将storyboard文件关联至对应的UITableViewController和UITableViewCell类(自己创建的类)。
  • 在UITabelViewController中完成代码书写。

  注意:cell不在需要注册

  • iOS学习之UI可视化编程-StoryBoard

二、页面跳转

  1、storyboard页面跳转分为两种

    1)代码方式:使用代码通过控制器识别来跳转,比如在当前页面的某一个事件中跳转到一个标识为"customVC"的控制器页面中;[self performSegueWithIdentifier:@"customVC" sender:nil];

    2)连线方式 : 直接使用拖拽可以给按钮连线关联两个页面: 选中按钮, 按住 control ,从按钮向下一级页面连线. 按钮不需要添加响应方法.

iOS学习之UI可视化编程-StoryBoard

  2、方式

  push : push出下一个界面.

  modal : 模态出下一个界面

  custom : 自定义,需要我们自己实现页面跳转, 需要自定义segue.

  注意: 以上是 sizeclasses 未勾选的状态下的三种方式. 在默认状态下有很多种, 其中包括show, showDetail等等.

三、segue

  1、概述

  • segue: 可视化编程中连接两个页面的线条,称之为 segue.
  • iPhoneGUI 开发中 segue 主要有三种类型, 包括 push, model, custom
  • 其中 custom 需要我们自定义 segue 来完成页面间跳转.
  • segue 有三个重要属性: 标识符, 源控制器, 目标控制器.
  • iOS学习之UI可视化编程-StoryBoard

  2、自定义segue

  • 首先,新建一个类继承自UIStoryboardSegue
#import <UIKit/UIKit.h>
@interface CustomSegue : UIStoryboardSegue
@end
  • 然后,选中一个控制器,按住 control 鼠标辅助完成连线, 选择 custom

  • 选中自定义 segue, 设置 segue 的 identifier 以及关联类

  • 最后,在 segue 类里面重写 perform 方法(界面跳转默认的执行方法), 自定义跳转效果

#import "CustomSegue.h"
#import "LoginViewController.h"
#import "CustomViewController.h" 

@implementation CustomSegue 

 // 重写系统方法,页面跳转会走这个方法
- (void)perform {

    // 1. 获取源控制器
    LoginViewController *loginVC = self.sourceViewController;
    // 2.获取目标控制器
    CustomViewController *customVC = self.destinationViewController;
    // 3.自定义页面切换效果
    [UIView transitionFromView:loginVC.view toView:customVC.view duration: options:UIViewAnimationOptionTransitionCurlUp completion:^(BOOL finished)     {
         // 动画完成后的操作
        [loginVC.navigationController pushViewController:customVC animated:NO];
    }];
}
@end

  3、界面传值

  • storyboard界面间跳转会执行
  • - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender 方法, 方便界面间数据统一管理.
  • 依据不同的标识符来完成数据处理.
// storyboard页面跳转会走这个方法
- (  if ([segue.identifier isEqualToString:@"welcome"]) {
    // 属性传值(从前往后传)
    // 获取到要跳转的控制器对象
    WelcomeViewController *welcomeVC = segue.destinationViewController;
    // 2.设置属性
    welcomeVC.textString = self.userTextField.text;
    }
}

四、sizeClasses屏幕适配

  在实际开发当中程序员不可能只考虑一种尺寸, 有时需要做必要的屏幕适配工作, 甚至还会遇到横竖屏时不同的布局方式, 在可视化编程中, sizeClasses 就是因此而诞生的.

  sizeClasses 可以根据不同的选择,筛选出不同的布局情况来绘制 UI

iOS学习之UI可视化编程-StoryBoard

  设备对应关系如下:

  • iPhone4S, iPhone5/5S, iPhone6, iPhone6s

   竖屏: (w:Compact h:Regular)

   横屏: (w:Compact h:Compact)

  • iPhone6 Plus/iPhone6s Plus

   竖屏: (w:Compact h:Regular)

   横屏: (w:Regular h:Compact)

  • iPad

   竖屏: (w:Regular h:Regular)

   横屏: (w:Regular h:Regular)