先來一張UI圖
根據(jù)這張UI圖咖祭，可以將整個頁面分為以下3個部分，如圖：
整體肯定是要用UITableView來實現(xiàn)的蔫骂，最上面的一部分可以作為UITableView的頭部或者cell么翰，根據(jù)個人習慣咯,中間的cell 1為一部分，作為cell沒什么疑問辽旋，最后就是cell 2了浩嫌，這部分主要承載了數(shù)據(jù)的展示，至于后面的按鈕补胚，布局的時候?qū)懮先ヂ肽停鹊劫x值的時候根據(jù)數(shù)據(jù)來判斷是否顯示，或者顯示為什么樣式溶其；再者就是前面的小圓圈和豎線骚腥，同樣也是要根據(jù)數(shù)據(jù)來判斷是改變小圓圈及其上面的豎線的顏色還是小圓圈和上下的豎線都需要改變顏色，具體就看賦值的時候的判斷了瓶逃，That‘s all !!!
不過值得一說的是cell 2中的那個數(shù)據(jù)承載框
仔細看桦沉，大體矩形，四個角分別都是圓角金闽，左邊還有一個小尖尖，什么都不要說了剿骨，UI幫忙切個圖代芜。
是的是的，沒有毛病浓利，這種圖肯定是要UI切圖的挤庇，但是還要考慮一個問題，UI切的圖是固定大小的贷掖，但是根據(jù)UI設(shè)計來看嫡秕，這個承載框的高度要根據(jù)里面文字的多少來改變的，也就是說文字多了需要換行苹威，這時承載框的高度也要發(fā)生改變昆咽，然后就會出現(xiàn)這么一種情況，承載框變形了牙甫。
好了掷酗，不皮了，還是說一下解決方案吧
因為整體的設(shè)計都是使用xib實現(xiàn)的窟哺，所以泻轰。。且轨。
其實是否跟xib實現(xiàn)的沒有關(guān)系啦浮声，在Xcode中的Assets.xcassets除了可以設(shè)置應用圖標和啟動圖片外虚婿，還可以設(shè)置圖片的顯示喲!
點開后出現(xiàn)了下圖所示的內(nèi)容：
三個箭頭是什么意思呢，其實還是用圖片告訴你更明了：
在右側(cè)的Slicing模塊中泳挥，有可以選擇的值然痊，分別是None、Horizontal羡洁、Vertical玷过、Horizontal and Vertical這四個選項，除了None之外的三個分別對應了上面的三個箭頭筑煮，表示切片方向為橫向辛蚊、縱向、橫縱向真仲。
之前一直使用右邊選擇的方式來實現(xiàn)的袋马，即如下圖所示的方式：
對于Left、Right秸应、Top虑凛、Bottom這幾個就是取一個切片重復的區(qū)域，但是對于Width和Height就不是特別理解了软啼，今天閑來無事桑谍，就根據(jù)可視化操作的方式來仔細研究了一下這個東西，下面就以幾組設(shè)置以及效果圖來說明問題了祸挪。
第一組
第二組
第三組
第四組
第五組
根據(jù)以上五組圖可以得到以下結(jié)論(以圖設(shè)置1中三條線從上到下編號分別為①锣披、②、③)：
- ①與③之間的部分是需要填充拉伸被替換的區(qū)域贿条；
- ①與②之間的部分是需要無限復制的并將其填充到①與③之間雹仿；
- 第三組圖片中，①與②之間
Height是1整以，這里的1應該是指1像素(px), 所以在效果圖中會出現(xiàn)尖的部分為垂直線的情況胧辽。
以上僅僅是以縱向來說明，橫向同理公黑，這里就不再過多贅述邑商。
