上一篇使用默认的UITableViewController显示了模拟的数组数据和图片。这一篇来自定义Prototype Cell的样式。
为了每行有更多的空间,首先设置行的高度
- 选中Cell,在Attributes inspector中,将 Table View Cell中的Style改为 Custom
- 选中TableView 在Size inspector中设置 Row height 的值为80
- 选中Cell 在Size inspector中将Row height 的值设置为80 ,并把后面的 Custom 勾选上
从右下角的Object Library中找到 Image View 拖拽到Cell中。这里注意看左侧的结构,是放在 Cell下面的 Content View下面哦。
然后在右侧面板的Size inspector中将View的 X、Y、Width、Height(位置坐标和长宽)设置好。
接下来添加三个UI Label组件到Cell中
这里注意,可以一次性拖拽好三个,也可以一个个拖拽进去都行。然后再右侧将字改为Name即可,这里会发现在 Main.storyboard 中字母没显示完整,可以直接拖动边框拉到显示完整。
我一般是选中Label 然后再菜单栏选择Editor->Size To Fit Content即可快捷键是Command+=
。有时候会显示灰色,重新选中一下Label再进入editor里面就可以看到了。
然后将第一个label选中奖Font设置为Headline,就是标题的意思。
将第二个label设置为:
- Font:System
- Style:Light
-
Size:14
下面,使用 “Embed In Stack”布局工具
- 按住 command 键。选中三个 Label,然后点击上图的3,将三个 Label 嵌入到一个 Stack View 中
- 在左侧的属性面板中将 spacing 设置为1
- 同样按住 command 键,再选中刚刚的 Stack View 和Image View
- 然后点击 上图中的 3 按钮,嵌入到 Stack View
- 在左侧的属性面板中将 spacing 设置为10
选中最外层的 Stack View,检查一下约束是否加好了
Stack View 因为添加了约束,那么它就会自动调整适应手机屏幕大小,这里为了固定住Image View的宽高。按住 control,从 Image View 组件横向拖动,然后在它自己身上松掉,再弹出的框里面,按住shift键,选择width和height,然后点击添加两条约束。
这里使用鼠标右键从Image View上横向拖动也是可以的。效果与按住control键是一样的。
现在的文件结构应该是这样的