我在开发中一直在使用Storyboard，代码中绝大多数的UIViewController是用Storyboard创建的。在这里分享一些我使用Storyboard的经验。
创建Storyboard
在项目中command+N，弹出如下页面，选中Storyboard然后点击Next给Storyboard命名，创建完成。
图1
进入Storyboard文件，添加一个Scene。
图2
设置Scene对应的类。如下图，在Custom Class填入类名。Identity中Storyboard ID的作用后面会讲。
图3
加载Storyboard
如上图，代码中要获取RDHomeViewController在Storyboard中的这个实例，需要用到UIStoryboard中的API
#import <Foundation/Foundation.h>
#import <UIKit/UIKitDefines.h>
@class UIViewController;
NS_ASSUME_NONNULL_BEGIN
NS_CLASS_AVAILABLE_IOS(5_0) @interface UIStoryboard : NSObject {
}
+ (UIStoryboard *)storyboardWithName:(NSString *)name bundle:(nullable NSBundle *)storyboardBundleOrNil;
- (nullable __kindof UIViewController *)instantiateInitialViewController;
- (__kindof UIViewController *)instantiateViewControllerWithIdentifier:(NSString *)identifier;
@end
NS_ASSUME_NONNULL_END
代码如下
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Home" bundle:nil];
RDHomeViewController *homeViewController = (RDHomeViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RDHomeViewController"];
此处的“Home”为Storyboard创建时的命名，Identifier为图3中的Storyboard ID。
UIStoryboard中的另一个方法
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Home" bundle:nil];
RDHomeViewController *homeViewController = (RDHomeViewController *)[storyboard instantiateInitialViewController];
此方法获取到的是勾选了下图所示项的UIViewController，一个Storyboard中只能有一个Initial View Controller。
图4
Storyboard中添加子视图
在RDHomeViewController中声明一个tableView属性，声明前添加IBOutlet，表示该对象是在Interface Builder中创建的。
@interface RDHomeViewController ()
@property (nonatomic, weak) IBOutlet UITableView *tableView;
@end
然后在Storyboard中添加一个Table View，并和tableView关联。
图5
图5中黑色弹框为选中tableView点击右键弹出。这样就可以在代码中使用在Storyboard中创建的tableView。tableView的许多属性都可以在下图所示位置设置。
图6
Autolayout自动布局
Storyboard中创建的子视图应该使用Autolayout进行布局。自动布局的核心是添加约束。
self.tableView.frame = CGRectMake(100, 100, 100, 100);
这种设置frame的方法使用的是绝对坐标系统，以父视图左上角为原点，每个子视图的x、y都是与原点之前的距离。
Autolayout使用相对坐标系统，通过设置约束确定子视图的位置和尺寸。
图7
上图给tableView添加的约束为，充满屏幕除顶部状态栏和导航栏（如果存在）、底部tabBar（如果存在）之外的部分，无论是什么尺寸的屏幕，tableView都是显示在这部分区域。
图8
通过上图的方式设置约束的constant，此时tableView距离屏幕左边缘50个点，距离屏幕右边缘100个点。
在Storyboard中添加约束可以帮助我们解决大部分屏幕适配的问题，但有些适配需要在代码中完成。比如图8中，在4.7-inch屏幕上，tableView与屏幕左边缘的距离为50，但是在5.5-inch屏幕上，我们希望这个距离为100。此时我们需要在代码中通过判断屏幕尺寸来设置此约束的constant。
@interface RDHomeViewController ()
@property (nonatomic, weak) IBOutlet UITableView *tableView;
@property (nonatomic, weak) IBOutlet NSLayoutConstraint *tableViewLeftConstraint;
@end
每一个约束都是NSLayoutConstraint的实例，我们创建一个IBOutlet 修饰的tableViewLeftConstraint属性，然后与Storyboard中的约束关联。
图9
self.tableViewLeftConstraint.constant = 10;
这样就可以在代码中设置self.tableViewLeftConstraint.constant的值了。
Storyboard中的UITableView
UITableView是我日常开发中使用最多的控件，大部分页面都可以用
tableView实现。下面介绍一下在Storyboard中使用tableView。
在之前的内容中，我们已经在RDHomeViewController中添加一个tableView。接着给tableView添加一个cell，在Storyboard中可以直接把cell拖入tableView。
图10
设置cell对应的类。
RDHomeFirstTableCell是一个继承自UITableViewCell的类。
#import <UIKit/UIKit.h>
@interface RDHomeFirstTableCell : UITableViewCell
@end
图11
设置cell的Identifier。
图12
Identifier是cell的唯一标识，在UITableViewDataSource的- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法中通过Identifier获取到对应的cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"RDHomeFirstTableCell";
RDHomeFirstTableCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
return cell;
}
cell添加子视图
在cell上添加一个label，并添加约束。
图13
设置tableView代理
代理可以在代码中设置，也可以在Storyboard中设置。
图14
配置cell子视图
根据面向对象的封装性，cell的子视图应该由cell自己来管理。即外部给cell一个model，cell显示相应的内容。为了更好的体现封装性，除需要在外部使用的属性外，属性声明应该写在匿名类别（即类扩展）中。
@interface RDHomeFirstTableCell ()
@property (nonatomic, weak) IBOutlet UILabel *labelTitle;
@end
图15
将label与labelTitle关联，便可在代码中设置label。按照上述方法再添加一个labelDetail。可以在Storyboard中设置label的text，也可以在代码中设置。
- (void)awakeFromNib {
[super awakeFromNib];
self.labelTitle.text = @"我是标题";
self.labelDetail.text = @"我是详情";
}
在Storyboard中和awakeFromNib方法中设置的是固定的标题，如果需要动态设置，需要添加一个public方法
- (void)configureWithModel:(RDHomeFirstCellModel *)cellModel {
self.labelTitle.text = cellModel.titleText;
self.labelDetail.text = cellModel.detailText;
}
在此处调用
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"RDHomeFirstTableCell";
RDHomeFirstTableCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
[cell configureWithModel:self.dataSource[indexPath.row]];
return cell;
}
这样写就是cell自己管理子视图，外部只需要告诉它需要显示的内容，减少了ViewController中的代码量。
如果cell上有action，可以通过delegate回调ViewController。
#import <UIKit/UIKit.h>
@class RDHomeFirstCellModel;
@protocol RDHomeFirstTableCellDelegate;
@interface RDHomeFirstTableCell : UITableViewCell
@property (nonatomic, weak) id <RDHomeFirstTableCellDelegate> delegate;
- (void)configureWithModel:(RDHomeFirstCellModel *)cellModel;
@end
@protocol RDHomeFirstTableCellDelegate <NSObject>
- (void)firstTableCell:(RDHomeFirstTableCell *)firstTableCell didClickButtonWithModel:(RDHomeFirstCellModel *)cellModel;
@end
- (IBAction)buttonClick:(id)sender {
if ([self.delegate respondsToSelector:@selector(firstTableCell:didClickButtonWithModel:)]) {
[self.delegate firstTableCell:self didClickButtonWithModel:self.cellModel];
}
}
cell上添加一个button，关联点击事件。
图16
关于Storyboard合作开发的问题
将Storyboard按模块和功能进行拆分，每个Storyboard只由一个开发者负责，Storyboard之间使用UIStoryboard中的API建立连接，可以尽可能的避免合作开发的问题。
小结
以上就是在日常开发中Storyboard的基本用法，由于笔者的水平有限，如有不足之处，欢迎交流指正。
网友评论