iOS應(yīng)用中使用Auto Layout實(shí)現(xiàn)自定義cell及拖動回彈
自定義 cell 并使用 Auto Layout
創(chuàng)建文件
我們可以一次性創(chuàng)建 xib 文件和類的代碼文件。
新建 Cocoa Touch Class：
設(shè)置和下圖相同即可：
檢查成果
分別選中上圖中的 1、2 兩處，檢查 3 處是否已經(jīng)自動綁定為 firstTableViewCell，如果沒有綁定，請先檢查選中的元素確實(shí)是 2，然后手動綁定即可。
完成綁定工作
切換一頁，如下圖進(jìn)行 Identifier 設(shè)置：
新建 Table View Controller 頁面
新建一個 Table View Controller 頁面，并把我們之前創(chuàng)建的 Swift on iOS 那個按鈕的點(diǎn)擊事件綁定過去，我們得到：
然后創(chuàng)建一個名為 firstTableViewController 的 UITableViewController 類，創(chuàng)建流程跟前面基本一致。不要創(chuàng)建 xib。然后選中 StoryBoard 中的 Table View Controller（選中之后有藍(lán)色邊框包裹），在右側(cè)對它和 firstTableViewController 類進(jìn)行綁定：
調(diào)用自定義 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 中分別有多少個條目
實(shí)例化每個條目，提供內(nèi)容
如果你得到以下頁面，說明你調(diào)用自定義 cell 成功了！
給自定義 cell 添加元素并使用 Auto Layout 約束
首先向 Images.xcassets 中隨意加入一張圖片。
然后在左側(cè)文件樹中選中 firstTableViewCell.xib，從右側(cè)組件庫中拖進(jìn)去一個 Image View，并且在右側(cè)將其尺寸設(shè)置如下圖右側(cè)：
給 ImageView 添加約束：
選中該 ImageView（左箭頭所示），點(diǎn)擊自動 Auto Layout（右箭頭所示），即可。
給 ImageView 設(shè)置圖片：
再從右側(cè)組件庫中拖入一個 UILabel，吸附到最右側(cè)，垂直居中，為其添加自動約束，這一步不再贅述。
在 firstTableViewCell 類中綁定 xib 中拖進(jìn)去的元素
選中 firstTableViewCell.xib，切換到雙視圖，直接進(jìn)行拖動綁定：
綁定完成！
約束 cell 的高度
在 firstTableViewController 中添加以下方法：
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 50
}
給自定義的 UILabel 添加內(nèi)容
修改 firstTableViewController 中以下函數(shù)為：
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 寸：
4.7 寸：
如果你得到以上結(jié)果，那么恭喜你自定義 cell 并使用 Auto Layout 成功！
22 行代碼實(shí)現(xiàn)拖動回彈
搭建界面
刪除首頁中間的按鈕，添加一個 View ，設(shè)置一種背景色便于辨認(rèn)，然后對其進(jìn)行絕對約束：
拖動一個 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 行代碼，拖動回彈效果完成！
- 使用iOS控件UICollectionView生成可拖動的桌面的實(shí)例
- IOS 七種手勢操作（拖動、捏合、旋轉(zhuǎn)、點(diǎn)按、長按、輕掃、自定義）詳解及實(shí)例代碼
- iOS手勢識別的詳細(xì)使用方法(拖動,縮放,旋轉(zhuǎn),點(diǎn)擊,手勢依賴,自定義手勢)
- iOS UITableView 拖動排序?qū)崿F(xiàn)代碼
- iOS實(shí)現(xiàn)左右拖動抽屜效果
- 舉例講解iOS開發(fā)中拖動視圖的實(shí)現(xiàn)
- IOS手勢操作（拖動、捏合、旋轉(zhuǎn)、點(diǎn)按、長按、輕掃、自定義）
- iOS粒子路徑移動效果 iOS實(shí)現(xiàn)QQ拖動效果
相關(guān)文章
iOS表視圖之下拉刷新控件功能的實(shí)現(xiàn)方法
下拉刷新是重新刷新表視圖或列表，以便重新加載數(shù)據(jù)，這種模式廣泛用于移動平臺，相信大家對于此也是非常熟悉的，那么iOS是如何做到的下拉刷新呢？下面小編給大家分享iOS表視圖之下拉刷新控件的實(shí)現(xiàn)方法，一起看看吧2017-01-01
ios UITableView 自定義右滑刪除的實(shí)現(xiàn)代碼
這篇文章主要介紹了ios UITableView 自定義右滑刪除的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹了關(guān)于配置mac啟動項(xiàng)的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02
ios 使用xcode11 新建項(xiàng)目工程的步驟詳解
這篇文章主要介紹了ios 使用xcode11 新建項(xiàng)目工程 （值得注意的問題）,本文分步驟通過圖文的形式給大家展示，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)于如何利用FutureBuilder提高開發(fā)效率的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)分析了iOS微信支付交互圖，針對微信支付的流程圖進(jìn)行解析，感興趣的小伙伴們可以參考一下2016-08-08
iOS開發(fā)中音頻視頻播放的簡單實(shí)現(xiàn)方法
視頻音頻是我們在ios日常開發(fā)中經(jīng)常會遇到的一個需求，所以下面這篇文章主要給大家介紹了關(guān)于iOS開發(fā)中音頻視頻播放的簡單實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
解析iOS應(yīng)用開發(fā)中對設(shè)計模式中的抽象工廠模式的實(shí)現(xiàn)
這篇文章主要介紹了解析iOS應(yīng)用開發(fā)中對設(shè)計模式中的抽象工廠模式的實(shí)現(xiàn),示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03
iOS應(yīng)用中使用Auto Layout實(shí)現(xiàn)自定義cell及拖動回彈
這篇文章主要介紹了iOS應(yīng)用中使用Auto Layout實(shí)現(xiàn)自定義cell及拖動回彈的方法,自定義UITableViewCell并使用Auto Layout對其進(jìn)行約束可以方便地針對多尺寸屏幕進(jìn)行調(diào)整,代碼為Swift語言,需要的朋友可以參考下2016-03-03
詳解iOS通過ASIHTTPRequest提交JSON數(shù)據(jù)
這篇文章主要介紹了詳解iOS通過ASIHTTPRequest提交JSON數(shù)據(jù)，對代碼進(jìn)行了詳細(xì)的講解，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12