Storyboards在iOS5就已经添加进来了,被开发者们指点了不少年了,现在他也添加了很多的新的功能。Apple如今是鼓励开发者们使用Storyboards来进行页面的开发的,虽然一直尚未彻底那些代码写界面的所接受,可是我觉的这将会是以趋势。ios
原文连接git
再开始以前我觉的你能够先去看下这个视频,这是WWDC2015上关于这部分的介绍。这个视屏字幕是翻译成中文的。视频连接swift
项目初始地址ide
若是你已经看过了上边的那个视频,那么你就会知道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
做为这个新的故事版的名称。而后点击存储。ui
你的新的故事版的样子应该是下边这个样子: spa
而你的原来的故事版将会是这个样子:.net
接下来咱们在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) } }