专栏首页hrscyiOS 9 Storyboard 教程(一下)

iOS 9 Storyboard 教程(一下)

接iOS 9 Storyboard 教程(一上)

上篇链接

原型cell

你可以直接从storyboard编辑器中,使用原型cell你可以很容易的为你的tableViewCell设计一套自定义的布局.

现在的Table View Controller有一个空的原型cell.点击原型cell,你可以在Attributes inspector中设置它的样式(Style)和副标题(Subtitle).

在storyboard中有很多可堆叠的内容,但有时却很难点击你想确切操作的内容.如果你遇到麻烦,下面有几个选项可以帮你.第一个就是在左侧的Document Outline里,你可以选择这个item.第二个是一个方便的热键:按住control+shift并点击你感兴趣区域.会出现一个弹出框让你直接使用光标选择任何元素.

如果你之前使用过table view,兵器手动创建过cell,你可能会认出这是UITableViewCellStyle.带副标题(Subtitle)的样式.和原型cell一样,你也可以选择一个内置的cell样式,就好像你刚才做的一样,或者创建一个自定义设计(你很快机会这样做).

设置Accessory属性为Disclosure Indicator然后把Identifier属性设置PlayerCell.所有的原型cell都应该有一个可重用的标识符(identifier),这样你才能在代码里引用它们.

运行app,但是好像却没有任何改变…并不是很奇怪:你还必须为tableView添加数据源,这样它才会知道应该显示多少行数据.这正是你接下来要做的.

在工程中添加一个新文件.然后在 iOS/Source选项中,选择Cocoa Touch Class模板.给这个类命名为PlayersViewController并且把它设置为UITableViewController的子类.不选Also create XIB file.

选择Swift语言,然后点击下一步(Next)创建.

回到storyboard然后选中Table View Controller(确保你选的是实际的视图控制器而不是它里面的某一个视图).在Identity inspector里,设置它的Class是PlayersViewController.对于把刚才创建的类连接到storyboard里的自定义view controller,这是至关重要的一步.不要忘记这一步,否则你刚创建的类将不能使用!

从现在开始,当你运行app的时候,storyboard 中的table view controller就变成了PlayersViewController类的一个实例. 这个table view应该会显示一列玩家名单,所以现在你需要为这个app创建一个数据模型—一个包含Player对象的数组.使用Swift File模板在iOS/Source里为这个工程添加一个新文件.命名为Player. 替换Player.swift中代码:

import UIKitstruct Player { 
  var name: String? 
  var game: String? 
  var rating: Int init(name: String?, game: String?, rating: Int) { 
  self.name = name 
  self.game = game 
  self.rating = rating 
  }
}

这里没有发生什么特别的事.Player类是一个简单的容器对象,包含有三个属性:玩家的姓名(name),他们正在玩的游戏(game)以及一个额定1至5星的评级(rating).

接下来,你需要把一个Player对象数组赋值给PlayersViewController.使用Swift File模板为开始,创建一个新文件,命名为SampleData.把它添加到SampleData.swift的末尾.

//Set up sample datalet 
playersData = [ 
  Player(name:"Bill Evans", game:"Tic-Tac-Toe", rating: 4),   
  Player(name: "Oscar Peterson", game: "Spin the Bottle", rating: 5), 
  Player(name: "Dave Brubeck", game: "Texas Hold 'em Poker", rating: 2) ]

现在你已经定义了一个叫做playersData的常量,并且分配了一个硬编码的Player对象数组给它.

现在在PlayersViewController.swift文件里的class PlayersTableViewController: UITableViewController下面添加一个Player 数组:

var players:[Player] = playersData

当定义players变量时,你可以很容易在PlayersViewController里设置样本数据.但由于这些数据在后面也许会从一个plist文件或者SQL文件中取,所以在视图控制器外部加载数据是很明智的.

现在你有一个包含很多Player对象的数组.你可以继续在PlayersViewController里链接数据源.用下面的方法替换table view的数据源:

override func numberOfSectionsInTableView(tableView: UITableView) -> Int { 
  return 1
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
  return players.count
}

真正的工作发生在cellForRowAtIndexPath.使用下面的代码替换原来的方法:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 
  let cell = tableView.dequeueReusableCellWithIdentifier("PlayerCell", forIndexPath: indexPath) 
  let player = players[indexPath.row] as Player 
  cell.textLabel?.text = player.name 
  cell.detailTextLabel?.text = player.game return cell
}

这个方法dequeueReusableCellWithIdentifier(_:forIndexPath:) 将会检查是否有可用于回收的cell.如果没有,它将自动分配一个原型cell并把它返回给你.你所需要做的就是提供可重用的标识符,你可以在storyboard编辑器里设置原型cell — 在这种情况下的PlayerCell.不要忘记设置标识符,否则这个小的方案将不会起作用! 运行app,看啊,table view上有玩家了!

只需要几行代码就可以这些原型cell.我觉得那太棒了!


Note:

在这个app,你只用到了一个原型cell,但如果你的table需要显示不同的cell,那么你可以很简单的在storyboard中添加额外的原型cell.你也可以复制已经存在的cell,使它成为一个新的cell,或者增加Table View原型cell的值属性.确保给予了每一个cell属于它自己的标识符.


设计你自己的原型cell

对于很多app来说,使用一个标准的cell样式也是可以的,但是对于这个app来说,如果你想要在cell的右手边添加一张玩家评级(1–5星)的图片.那就需要有一个(图片视图)image view,就目前来看,标准的cell样式是不支持的,所以你必须要自定义设计一个.

切换回Main.storyboard,在 table view,里选择原型cell,并且在Attributes inspector中,设置Style属性为自定义(Custom).现在默认标签已经消失了.

先使cell在高一点.也可以在Size inspector(之后选择自定义)改变Row Height 的值.或者拖动cell的底部,设置高度60.

从Objects Library 拖拽两个Label对象到cell里,把它们粗略的放到标准标签的位置.只要在Attributes Inspector选择你喜欢字体和颜色.设置顶部标签为Name,底部标间为Game.

在Document Outline里同时选中Name和Game标签,然后按住Command+点击,选择Editor\Embed In\Stack View.


Note:

堆栈视图(Stack view)是iOS9新加入的,它可以很容易的布局视图的集合样式.


拖拽一个ImageView到cell并把它放到右侧,在Size Inspector里设置它宽为81高为35.设置它的Mode在中心(Center)(在Attributes inspector下一个),这样无论你把这张图片放置到view的任何地方,它都是不伸展的.

在Document Outline里Command + 点击Stack View和Image View.选择Editor\Embed in\Stack View.Xcode将会创建一个新的水平 stack view 包含这两个控件.

选中新的水平stack view,在Attributes Inspector里改变Alignment为Centre 并且Distribution改为Equal Spacing. 现在对于这个控制器来说,包含了一些简单地自动布局.在storyboard的右侧底部点击Pin图标:

改变约束为Top: 0, Right: 20, Bottom: 0 and Left: 20.确保这四个红色指针在图片中高亮显示.点击弹出窗口底部的 Add 4 Constraints.

如果你的stack view有橙色的约束,表明它错位了.为了解决这个问题,选择水平的stack view然后选择Editor\Resolve Auto Layout Issues\Update Frames(在选中的菜单视图部分).这个stack view应该放到正确的位置上,之后橙色的约束错误就会消失了. 为了把image view within 放到 stack view里,在Document Outline里选中image view,然后选择Editor\Resolve Auto Layout Issues\Add Missing Constraints(在选中的菜单视图部分). 最终的为原型cell设计的样子看上去向下面的一样:

因为这是一个自定义设计的cell,你不能在把UITableViewCell的 textLabel 和 detailTextLabel属性放到标签里了.这些属性所指的标签不再是这个cell里的了;它们只在标准的cell类型里才合法.取而代之的是,你需要使用tag来找到这些标签. tag被用在这里更加简单.在后面的课程里,你会创建一个自定义的类,继承自UITableViewCell,并且包含对应于你的cell视图的属性. 在Attributes inspector中,设置Name标签的tag值为100,Game标签的tag值为101,以及Image View的tag值为102. 然后打开PlayersViewController.swift,在这个类的底部,添加一个新方法叫做imageForRating.如下代码:

func imageForRating(rating:Int) -> UIImage? { 
  let imageName = "\(rating)Stars" 
  return UIImage(named: imageName)
}

相当简单—根据评级显示不同的星的图标.仍然在PlayersViewController里改变tableView(_:cellForRowAtIndexPath:),如下:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCellWithIdentifier("PlayerCell", forIndexPath: indexPath) //1 
  let player = players[indexPath.row] as Player //2 
  if let nameLabel = cell.viewWithTag(100) as? UILabel { //3
  nameLabel.text = player.name 
  } 
  if let gameLabel = cell.viewWithTag(101) as? UILabel {
   gameLabel.text = player.game 
  } 
  if let ratingImageView = cell.viewWithTag(102) as? UIImageView { 
  ratingImageView.image = self.imageForRating(player.rating) 
  } 
  return cell
}

你所做的会出现崩溃:

1.dequeueReusableCellWithIdentifier将会使用重用标识符PlayerCell,重用已经存在的cell如果不存在就创建一个新的.

2.你查找每一行对应的Player对象,并将其分配给player.

3.可以看到标签和图片的数据都来自player对象.

应该这样做.现在再一次运行app,他看上去好像下面这样:

恩…,那看起来不太对—cell显示的好像被压扁了一些.你确实改变了原型cell的高度,但 table view 却不这么认为.有两个方法解决这个问题:你可以改变 table view的高度属性,或者实现tableView(tableView:heightForRowAtIndexPath:) 方法.前者是更适用这种情况,因为我们只拥有一种类型的cell,并且我们事先知道cell的高度.


Note:

如果你事先不知道你的cell的高度,或者不同的cell有着不同的高度,你将会使用 tableView(tableView:heightForRowAtIndexPath:).


返回Main.storyboard,在Table View的Size inspector里,设置高度为60.

如果你现在运行app,它看起来好多了!

顺便说一句,如果你通过拖拽改变了cell的高度,而没有改变它的值,那么table view的行高属性也会自动改变.所以在第一次可能是正确的.

使用cell的子类

Table view已经非常好了,但是我不是使用tag来访问标签和其他cell子视图的粉丝.如果你能通过连线(outlet)连接这些标签(label),然后使用对应的属性那么它将更干净.事实证明,你可以. 在工程中添加一个新的文件,使用Cocoa Touch Class模板.命名它为PlayerCell,并且把它作为UITableViewCell的子类.不要勾选创建XIB的选项,正如你在storyboard中已经有的cell一样. 添加PlayerCell类的属性,就好像下面的类定义一样:

@IBOutlet weak var gameLabel: UILabel!
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var ratingImageView: UIImageView!

所有的变量都是IBOutlet类型的,它可以连接到当前storyboard中的控制器. 使用IBOutlet就好像下面这样添加属性:

var player: Player! { 
  didSet { 
    gameLabel.text = player.game 
    nameLabel.text = player.name 
    ratingImageView.image = imageForRating(player.rating) 
  }
}

无论当什么时候设置了player的属性,它都会正确地更新IBOutlet里的信息.

把imageForRating(_:)方法从PlayersViewController移动到PlayerCell类里,这样可以在一个类里保持cell的详细信息. 返回Main.storyboard,选中PlayerCell然后在Identity inspector里改变它的类为PlayerCell.

现在无论什么时候你只要改变table view数据源的dequeueReusableCellWithIdentifier(_:forIndexPath:)方法,它都会返回一个PlayerCell实例而不是返回UITableViewCell. 现在你已经给了这个类和重用标识符相同的名字 — 它们都被叫做PlayerCell — 但那只是因为我想要让它们保持一致.类名和重用标识符彼此无关,所以你也可以给它们命名成不同的名字,如果你想那么做的话.

现在将标签和图片视图都连到这些outlet上.在storyboard中导航到Connections Inspector,然后从Document Outline或者工作空间里选择PlayerCell.在Connections inspector中拖拽nameLabel.

给Document Outline中的Name标签对象,或者是拖拽到工作空间中.重复gameLabel和ratingImageView.


Important:

你应该把控件连接到table view cell上,而不是连接到view controller!你看,只要你的数据源请求table view通过dequeueReusableCellWithIdentifier创建了一个新的cell,那么这个table view将不会调用真正的原型cell,而是一个拷贝(或者如果可能的话,之前有一个cell是可回收的).

这就意味着,在任何给定的时间都有超过一个实例.如果你是将一个标签从cell连接到控制器,那么几个标签的副本将会尝试使用相同的连线.这只是要求麻烦.(在另一方面,将原型cell的活动连接到视图控制器上的动作是非常好的.如果在你的cell上有自定义的按钮或者其他控件,你将会这么做的)


现在你已经连接了这些属性,你可以简化数据源代码.在PlayersViewController,改变tableView(_:cellForRowAtIndexPath:)如下:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 
  let cell = tableView.dequeueReusableCellWithIdentifier("PlayerCell", forIndexPath: indexPath) as! PlayerCell 
  let player = players[indexPath.row] as Player cell.player = player return cell
}

更像是这样.你可以从dequeueReusableCellWithIdentifier这个方法里得到一个PlayerCell的对象,然后你就可以简单地把正确的玩家信息传递到cell上.在PlayerCell里设置玩家变量将会自动地把值传递到标签和图片视图上,并且cell会使用你在storyboard里的连线.难道使用原型cell使table view变得很整洁不好么?

运行app并且尝试做一下.它依旧会和之前一样,但是在屏幕下面,它使用的是你自己的table view cell的子类!你可以在这里下载所有的源代码.

结语

如果你有任何问题都可以在下面讨论,翻译过程中有个别地方翻译不是十分准确,希望大家批评指正后面会继续更新第二部分,敬请期待!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【系统设置】CentOS 修改机器名

    ken.io
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 天干地支五行八卦的对应关系

    一石匠人
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人

扫码关注云+社区

领取腾讯云代金券