自定義 cell 并使用 auto layout
創建文件
我們可以一次性創建 xib 文件和類的代碼文件。
新建 cocoa touch class：
設置和下圖相同即可：
檢查成果
分別選中上圖中的 1、2 兩處，檢查 3 處是否已經自動綁定為 firsttableviewcell，如果沒有綁定，請先檢查選中的元素確實是 2，然后手動綁定即可。
完成綁定工作
切換一頁，如下圖進行 identifier 設置：
新建 table view controller 頁面
新建一個 table view controller 頁面，并把我們之前創建的 swift on ios 那個按鈕的點擊事件綁定過去，我們得到：
然后創建一個名為 firsttableviewcontroller 的 uitableviewcontroller 類，創建流程跟前面基本一致。不要創建 xib。然后選中 storyboard 中的 table view controller（選中之后有藍色邊框包裹），在右側對它和 firsttableviewcontroller 類進行綁定：
調用自定義 cell
修改 firsttableviewcontroller 類中的有效代碼如下：
import uikit
class firsttableviewcontroller: uitableviewcontroller {
override func viewdidload() {
super.viewdidload()
var nib = uinib(nibname: "firsttableviewcell", bundle: nil)
self.tableview.registernib(nib, forcellreuseidentifier: "firsttableviewcell")
}
override func didreceivememorywarning() {
super.didreceivememorywarning()
}
// mark: - table view data source
override func numberofsectionsintableview(tableview: uitableview) -> int {
return 1
}
override func tableview(tableview: uitableview, numberofrowsinsection section: int) -> int {
return 10
}
override func tableview(tableview: uitableview, cellforrowatindexpath indexpath: nsindexpath) -> uitableviewcell {
let cell = tableview.dequeuereusablecellwithidentifier("firsttableviewcell", forindexpath: indexpath) as firsttableviewcell
cell.textlabel?.text = indexpath.row.description
return cell
}
}
viewdidload() 中添加的兩行代碼是載入 xib 的操作。最下面的三個 func 分別是定義：
self.tableview 中有多少個 section
每個 section 中分別有多少個條目
實例化每個條目，提供內容
如果你得到以下頁面，說明你調用自定義 cell 成功了！
給自定義 cell 添加元素并使用 auto layout 約束
首先向 images.xcassets 中隨意加入一張圖片。
然后在左側文件樹中選中 firsttableviewcell.xib，從右側組件庫中拖進去一個 image view，并且在右側將其尺寸設置如下圖右側：
給 imageview 添加約束：
選中該 imageview（左箭頭所示），點擊自動 auto layout（右箭頭所示），即可。
給 imageview 設置圖片：
再從右側組件庫中拖入一個 uilabel，吸附到最右側，垂直居中，為其添加自動約束，這一步不再贅述。
在 firsttableviewcell 類中綁定 xib 中拖進去的元素
選中 firsttableviewcell.xib，切換到雙視圖，直接進行拖動綁定：
綁定完成！
約束 cell 的高度
在 firsttableviewcontroller 中添加以下方法：
override func tableview(tableview: uitableview, heightforrowatindexpath indexpath: nsindexpath) -> cgfloat {
return 50
}
給自定義的 uilabel 添加內容
修改 firsttableviewcontroller 中以下函數為：
override func tableview(tableview: uitableview, cellforrowatindexpath indexpath: nsindexpath) -> uitableviewcell {
let cell = tableview.dequeuereusablecellwithidentifier("firsttableviewcell", forindexpath: indexpath) as firsttableviewcell
cell.firstlabel.text = indexpath.row.description
return cell
}
查看結果
4.0 寸：
4.7 寸：
如果你得到以上結果，那么恭喜你自定義 cell 并使用 auto layout 成功！
22 行代碼實現拖動回彈
搭建界面
刪除首頁中間的按鈕，添加一個 view ，設置一種背景色便于辨認，然后對其進行絕對約束：
拖動一個 uipangesturerecognizer 到該 view 上：
界面搭建完成。
屬性綁定
切換到雙向視圖，分別右鍵拖動 uipangesturerecognizer 和該 view 的 top space 的 auto layout 屬性到 viewcontroller 中綁定：
然后將 uipangesturerecognizer 右鍵拖動綁定：
編寫代碼
class viewcontroller: uiviewcontroller {
var middleviewtopspacelayoutconstant: cgfloat!
var middlevieworiginy: cgfloat!
@iboutlet weak var middleview: uiview!
@iboutlet weak var middleviewtopspacelayout: nslayoutconstraint!
@iboutlet var pangesture: uipangesturerecognizer!
override func viewdidload() {
super.viewdidload()
pangesture.addtarget(self, action: selector("pan"))
middleviewtopspacelayoutconstant = middleviewtopspacelayout.constant
middlevieworiginy = middleview.frame.origin.y
}
override func didreceivememorywarning() {
super.didreceivememorywarning()
// dispose of any resources that can be recreated.
}
func pan() {
if pangesture.state == uigesturerecognizerstate.ended {
uiview.animatewithduration(0.4, delay: 0, options: uiviewanimationoptions.curveeaseinout, animations: { () -> void in
self.middleview.frame.origin.y = self.middlevieworiginy
}, completion: { (success) -> void in
if success {
self.middleviewtopspacelayout.constant = self.middleviewtopspacelayoutconstant
}
})
return
}
let y = pangesture.translationinview(self.view).y
middleviewtopspacelayout.constant = middleviewtopspacelayoutconstant + y
}
}
查看效果
22 行代碼，拖動回彈效果完成！
