首页 > 系统 > iOS > 正文

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

2020-07-26 03:26:33
字体:
来源:转载
供稿:网友

自定义 cell 并使用 Auto Layout
创建文件
我们可以一次性创建 xib 文件和类的代码文件。

新建 Cocoa Touch Class:

20163692249976.jpg (730×430)

设置和下图相同即可:

20163692312710.jpg (730×430)

检查成果

20163692333493.jpg (1920×988)

分别选中上图中的 1、2 两处,检查 3 处是否已经自动绑定为 firstTableViewCell,如果没有绑定,请先检查选中的元素确实是 2,然后手动绑定即可。

完成绑定工作
切换一页,如下图进行 Identifier 设置:

20163692358965.jpg (258×288)

新建 Table View Controller 页面
新建一个 Table View Controller 页面,并把我们之前创建的 Swift on iOS 那个按钮的点击事件绑定过去,我们得到:

20163692415659.jpg (1387×749)

然后创建一个名为 firstTableViewController 的 UITableViewController 类,创建流程跟前面基本一致。不要创建 xib。然后选中 StoryBoard 中的 Table View Controller(选中之后有蓝色边框包裹),在右侧对它和 firstTableViewController 类进行绑定:

20163692431858.jpg (946×787)

调用自定义 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 成功了!

20163692456608.jpg (375×689)

给自定义 cell 添加元素并使用 Auto Layout 约束
首先向 Images.xcassets 中随意加入一张图片。

然后在左侧文件树中选中 firstTableViewCell.xib,从右侧组件库中拖进去一个 Image View,并且在右侧将其尺寸设置如下图右侧:

20163692516167.jpg (1245×472)

给 ImageView 添加约束:

20163692533342.jpg (1191×729)

选中该 ImageView(左箭头所示),点击自动 Auto Layout(右箭头所示),即可。

给 ImageView 设置图片:

20163692550545.jpg (1209×544)

再从右侧组件库中拖入一个 UILabel,吸附到最右侧,垂直居中,为其添加自动约束,这一步不再赘述。

在 firstTableViewCell 类中绑定 xib 中拖进去的元素
选中 firstTableViewCell.xib,切换到双视图,直接进行拖动绑定:

20163692609674.jpg (1403×903)

绑定完成!

约束 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 寸:

20163692631719.jpg (320×590)

4.7 寸:

20163692646755.jpg (375×689)

如果你得到以上结果,那么恭喜你自定义 cell 并使用 Auto Layout 成功!


22 行代码实现拖动回弹
搭建界面
删除首页中间的按钮,添加一个 View ,设置一种背景色便于辨认,然后对其进行绝对约束:

20163692714280.jpg (1363×857)

拖动一个 UIPanGestureRecognizer 到该 View 上:

20163692730213.jpg (1358×884)

界面搭建完成。

属性绑定
切换到双向视图,分别右键拖动 UIPanGestureRecognizer 和该 View 的 Top Space 的 Auto Layout 属性到 ViewController 中绑定:

20163692804484.jpg (1383×743)

然后将 UIPanGestureRecognizer 右键拖动绑定:

20163692824786.jpg (1343×533)

编写代码

复制代码 代码如下:

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
    }

}


查看效果

20163692843461.gif (435×726)

22 行代码,拖动回弹效果完成!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表