上一篇使用默認(rèn)的UITableViewController顯示了模擬的數(shù)組數(shù)據(jù)和圖片。這一篇來自定義Prototype Cell的樣式匾七。
為了每行有更多的空間份蝴，首先設(shè)置行的高度
- 選中Cell，在Attributes inspector中，將 Table View Cell中的Style改為 Custom
- 選中TableView 在Size inspector中設(shè)置 Row height 的值為80
- 選中Cell 在Size inspector中將Row height 的值設(shè)置為80 瞧省，并把后面的 Custom 勾選上
從右下角的Object Library中找到 Image View 拖拽到Cell中。這里注意看左側(cè)的結(jié)構(gòu)鳍贾，是放在 Cell下面的 Content View下面哦鞍匾。
然后在右側(cè)面板的Size inspector中將View的 X、Y骑科、Width橡淑、Height（位置坐標(biāo)和長(zhǎng)寬）設(shè)置好。
接下來添加三個(gè)UI Label組件到Cell中
這里注意咆爽，可以一次性拖拽好三個(gè)梁棠，也可以一個(gè)個(gè)拖拽進(jìn)去都行。然后再右側(cè)將字改為Name即可斗埂，這里會(huì)發(fā)現(xiàn)在 Main.storyboard 中字母沒顯示完整符糊，可以直接拖動(dòng)邊框拉到顯示完整。
我一般是選中Label 然后再菜單欄選擇Editor->Size To Fit Content即可快捷鍵是Command+=呛凶。有時(shí)候會(huì)顯示灰色男娄，重新選中一下Label再進(jìn)入editor里面就可以看到了。
然后將第一個(gè)label選中獎(jiǎng)Font設(shè)置為Headline漾稀，就是標(biāo)題的意思模闲。
將第二個(gè)label設(shè)置為：
- Font：System
- Style：Light
-
Size：14
-w480
下面，使用 “Embed In Stack”布局工具
- 按住 command 鍵县好。選中三個(gè) Label围橡，然后點(diǎn)擊上圖的3暖混，將三個(gè) Label 嵌入到一個(gè) Stack View 中
- 在左側(cè)的屬性面板中將 spacing 設(shè)置為1
- 同樣按住 command 鍵缕贡，再選中剛剛的 Stack View 和Image View
- 然后點(diǎn)擊 上圖中的 3 按鈕，嵌入到 Stack View
- 在左側(cè)的屬性面板中將 spacing 設(shè)置為10
選中最外層的 Stack View，檢查一下約束是否加好了
Stack View 因?yàn)樘砑恿思s束晾咪，那么它就會(huì)自動(dòng)調(diào)整適應(yīng)手機(jī)屏幕大小收擦，這里為了固定住Image View的寬高。按住 control谍倦，從 Image View 組件橫向拖動(dòng)塞赂，然后在它自己身上松掉，再?gòu)棾龅目蚶锩嬷缰醋hift鍵宴猾，選擇width和height，然后點(diǎn)擊添加兩條約束叼旋。
這里使用鼠標(biāo)右鍵從Image View上橫向拖動(dòng)也是可以的仇哆。效果與按住control鍵是一樣的。
現(xiàn)在的文件結(jié)構(gòu)應(yīng)該是這樣的
