iOS应用中使用Auto Layout实现自定义cell及拖动回弹
自定义 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 行代码，拖动回弹效果完成！
相关文章
下拉刷新是重新刷新表视图或列表，以便重新加载数据，这种模式广泛用于移动平台，相信大家对于此也是非常熟悉的，那么iOS是如何做到的下拉刷新呢？下面小编给大家分享iOS表视图之下拉刷新控件的实现方法，一起看看吧2017-01-01
这篇文章主要介绍了ios UITableView 自定义右滑删除的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要给大家介绍了关于配置mac启动项的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-02-02
这篇文章主要介绍了ios 使用xcode11 新建项目工程 （值得注意的问题）,本文分步骤通过图文的形式给大家展示，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要给大家介绍了关于如何利用FutureBuilder提高开发效率的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要为大家详细分析了iOS微信支付交互图，针对微信支付的流程图进行解析，感兴趣的小伙伴们可以参考一下2016-08-08
视频音频是我们在ios日常开发中经常会遇到的一个需求，所以下面这篇文章主要给大家介绍了关于iOS开发中音频视频播放的简单实现方法，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧。2017-10-10
这篇文章主要介绍了解析iOS应用开发中对设计模式中的抽象工厂模式的实现,示例代码为传统的Objective-C,需要的朋友可以参考下2016-03-03
iOS应用中使用Auto Layout实现自定义cell及拖动回弹
这篇文章主要介绍了iOS应用中使用Auto Layout实现自定义cell及拖动回弹的方法,自定义UITableViewCell并使用Auto Layout对其进行约束可以方便地针对多尺寸屏幕进行调整,代码为Swift语言,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了详解iOS通过ASIHTTPRequest提交JSON数据，对代码进行了详细的讲解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
最新评论