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