快捷導(dǎo)航

iOS應(yīng)用中使用Auto Layout實(shí)現(xiàn)自定義cell及拖動(dòng)回彈

更新時(shí)間：2016年03月06日 09:31:26 作者：JohnLui

這篇文章主要介紹了iOS應(yīng)用中使用Auto Layout實(shí)現(xiàn)自定義cell及拖動(dòng)回彈的方法,自定義UITableViewCell并使用Auto Layout對(duì)其進(jìn)行約束可以方便地針對(duì)多尺寸屏幕進(jìn)行調(diào)整,代碼為Swift語(yǔ)言,需要的朋友可以參考下

自定義 cell 并使用 Auto Layout
創(chuàng)建文件
我們可以一次性創(chuàng)建 xib 文件和類的代碼文件。

新建 Cocoa Touch Class：

20163692249976.jpg (730×430)

設(shè)置和下圖相同即可：

20163692312710.jpg (730×430)

檢查成果

20163692333493.jpg (1920×988)

分別選中上圖中的 1、2 兩處，檢查 3 處是否已經(jīng)自動(dòng)綁定為 firstTableViewCell，如果沒(méi)有綁定，請(qǐng)先檢查選中的元素確實(shí)是 2，然后手動(dòng)綁定即可。

完成綁定工作
切換一頁(yè)，如下圖進(jìn)行 Identifier 設(shè)置：

20163692358965.jpg (258×288)

新建 Table View Controller 頁(yè)面
新建一個(gè) Table View Controller 頁(yè)面，并把我們之前創(chuàng)建的 Swift on iOS 那個(gè)按鈕的點(diǎn)擊事件綁定過(guò)去，我們得到：

20163692415659.jpg (1387×749)

然后創(chuàng)建一個(gè)名為 firstTableViewController 的 UITableViewController 類，創(chuàng)建流程跟前面基本一致。不要?jiǎng)?chuàng)建 xib。然后選中 StoryBoard 中的 Table View Controller（選中之后有藍(lán)色邊框包裹），在右側(cè)對(duì)它和 firstTableViewController 類進(jìn)行綁定：

20163692431858.jpg (946×787)

調(diào)用自定義 cell
修改 firstTableViewController 類中的有效代碼如下：

復(fù)制代碼代碼如下:

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 的操作。最下面的三個(gè) func 分別是定義：

self.tableView 中有多少個(gè) section
每個(gè) section 中分別有多少個(gè)條目
實(shí)例化每個(gè)條目，提供內(nèi)容
如果你得到以下頁(yè)面，說(shuō)明你調(diào)用自定義 cell 成功了！

20163692456608.jpg (375×689)

給自定義 cell 添加元素并使用 Auto Layout 約束
首先向 Images.xcassets 中隨意加入一張圖片。

然后在左側(cè)文件樹(shù)中選中 firstTableViewCell.xib，從右側(cè)組件庫(kù)中拖進(jìn)去一個(gè) Image View，并且在右側(cè)將其尺寸設(shè)置如下圖右側(cè)：

20163692516167.jpg (1245×472)

給 ImageView 添加約束：

20163692533342.jpg (1191×729)

選中該 ImageView（左箭頭所示），點(diǎn)擊自動(dòng) Auto Layout（右箭頭所示），即可。

給 ImageView 設(shè)置圖片：

20163692550545.jpg (1209×544)

再?gòu)挠覀?cè)組件庫(kù)中拖入一個(gè) UILabel，吸附到最右側(cè)，垂直居中，為其添加自動(dòng)約束，這一步不再贅述。

在 firstTableViewCell 類中綁定 xib 中拖進(jìn)去的元素
選中 firstTableViewCell.xib，切換到雙視圖，直接進(jìn)行拖動(dòng)綁定：

20163692609674.jpg (1403×903)

綁定完成！

約束 cell 的高度
在 firstTableViewController 中添加以下方法：

復(fù)制代碼代碼如下:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

    return 50

}

給自定義的 UILabel 添加內(nèi)容
修改 firstTableViewController 中以下函數(shù)為：

復(fù)制代碼代碼如下:

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
}

查看結(jié)果
4.0 寸：

20163692631719.jpg (320×590)

4.7 寸：

20163692646755.jpg (375×689)

如果你得到以上結(jié)果，那么恭喜你自定義 cell 并使用 Auto Layout 成功！

22 行代碼實(shí)現(xiàn)拖動(dòng)回彈
搭建界面
刪除首頁(yè)中間的按鈕，添加一個(gè) View ，設(shè)置一種背景色便于辨認(rèn)，然后對(duì)其進(jìn)行絕對(duì)約束：

20163692714280.jpg (1363×857)

拖動(dòng)一個(gè) UIPanGestureRecognizer 到該 View 上：

20163692730213.jpg (1358×884)

界面搭建完成。

屬性綁定
切換到雙向視圖，分別右鍵拖動(dòng) UIPanGestureRecognizer 和該 View 的 Top Space 的 Auto Layout 屬性到 ViewController 中綁定：

20163692804484.jpg (1383×743)

然后將 UIPanGestureRecognizer 右鍵拖動(dòng)綁定：

20163692824786.jpg (1343×533)

編寫代碼

復(fù)制代碼代碼如下:

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
    }