Storyboards在iOS5就已经添加进来了,被开发者们指点了很多年了,如今他也添加了不少的新的功能。Apple现在是鼓励开发者们使用Storyboards来进行页面的开发的,虽然一直还没有完全那些代码写界面的所接受,但是我觉的这将会是以趋势。
再开始之前我觉的你可以先去看下这个视频,这是WWDC2015上关于这部分的介绍。这个视屏字幕是翻译成中文的。 视频链接
项目初始地址
如果你已经看过了上边的那个视频,那么你就会知道 Storyboard references 这个功能有多么棒。
如果你曾经使用 interface builder 创建过一个复杂、界面非常多的应用,你就会明白最后那些 Storyboards 文件变的有多大。他会迅速变的无法管理,阻碍你的进度。自从引入 Storyboard 以来,其实是可以把你的应用的不同模块切开到不同的 Storyboard 中的。在过去,这要手动创建多个 Storyboard 文件,并且要写大量的代码。
为了解决这个问题,在 iOS 9 中苹果介绍了 Storyboard References 这个概念。 Storyboard References 允许你从 segue 中引用其他 storyboard 中的 viewController 。这意味中你可以保持不同功能模块化,同时 Storyboard 的体积变小并易与管理。不仅容易理解了,和团队一起工作时,合并(工作成果)也变的简单了。
打开我们的项目来创建你的第一个 storyboard reference ,打开 Main.storyboard ,选择除了 tar bar controller 之外的所有视图控制器,然后选择 Editor/Refactor to storyboard And 输入 Checklists.storyboard 作为这个新的故事版的名称。然后点击存储。
你的新的故事版的样子应该是下边这个样子:
而你的原来的故事版将会是这个样子:
接下来我们在 Main.storyboard 中选择名字是 ChecklistsNavigationController 的 references 在属性面板中删除 Referenced ID 里的值。
修改之后就回变成下边的样子
打开你的 Checklists.storyboard 选择 Checklists Navigation Controller 在属性面板中选中 Is Initial View Controller 。
我们也可以从 Object Library 中拖进来一个 Storyboard reference 控件。
在我们项目中的 ChecklistDetail.storyboard 中选择 Checklist Detail View Controller ,从 Object Library 拖出一个 View 放在 secne dock
你会不会吓一跳。可是你会想,额。我们怎么去使用它呢。我们先来一个简单的使用吧。
选中这个 View 在属性栏中将背景颜色设置为 #FFFAE8
从 ChecklistItemCell 拖出 Ctrl-drag 到你的这个view中,选择 selectBackgroundView
然后你运行你的项目,点击任何cell
我们经常会想创建一个只需要在特定条件下才显示的 view 。我们可以使用 scene dock 来方便的实现这一点。
我们仍然在 ChecklistDetail.storyboard 中拖进来一个 View 在 scene dock 中,将刚才的那个设置过背景颜色的 View 的宽高设置为 321 ; 128 。
在这个新的 View 中拖进来一个 label 和 text View 。设置 label 的文字是 notes ,颜色设置为 #BB991E :
将 textView 的属性中 editable 和 selectable 不要勾选。就像下边的这个样子:
接下来我们在代码中将新添加进来的 view 和这个 textView 做一个关联。
在 ChecklistDetailViewController.swift 中添加两个方法,一个是用来显示新添加进来的 View 另外一个自然是移除了。
func addNotesViewToCell(cell:ChecklistItemTableViewCell){ notesVIew.heightAnchor.constraintEqualToConstant(notesViewHeight).active = true notesVIew.clipsToBounds = true cell.stackView.addArrangedSubview(notesVIew) } func removeNotesView(){ if let stackview = notesVIew.superview as? UIStackView{ stackview.removeArrangedSubview(notesVIew) notesVIew.removeFromSuperview() } } 上边的方法可以确保自动布局定义笔记的高度,然后将其添加到对应的单元格中,他还设置了 clipsToBounds 为true,以防止文本视图从 cell 中外溢。
接下来就是使用这两个方法了。在 ChecklistDetailViewController.swift 中完成下边的方法。
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { //1 guard let cell = tableView.cellForRowAtIndexPath(indexPath) as? ChecklistItemTableViewCell else {return} //2调用这个方法来以动画更改单元格的高度 tableView.beginUpdates() //3 如果cell的stackView已经包含了它则删除,如果没有则添加 if cell.stackView.arrangedSubviews.contains(notesVIew){ removeNotesView() }else{ addNotesViewToCell(cell) notesTextView.text = checklist.items[indexPath.row].notes } //5 最后来条用这个方法来提交更改。 tableView.endUpdates() } 接下里运行你的程序就会看到下边的效果。
在故事版中给 Checklist Detail View Controller 拖进来两个 bar button item 放在 navigation bar 的右边,给其中一个的图片设置为 AddButtonicon
从 add button拖拽出一天线到 add item navigation controller 从弹出来的菜单中选择 present modally 。这样的话我们点击 add button 则会弹出一个新的界面。
接下来我们需要给我们弹出的界面添加消失的功能。
在 checklistDetail.storyboard 中选择 add item view controller ,从 Cancel 按钮中拖出一条线到 Exit ,从弹出的菜单中选择 cancelToChecklistDetailViewController
同样的方法给 save 按钮添加 saveToChecklistDetailViewController
运行一下程序来看下效果吧。
我们在最后的最后来添加删除 cell 的功能。
在 ChecklistDetailViewController.swift 中完成下边的方法。
viewDidLoad中添加
navigationItem.rightBarButtonItems![1] = editButtonItem()
重写下边的方法
override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) { if editingStyle == .Delete{ removeNotesView() checklist.items.removeAtIndex(indexPath.row) tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade) } }