Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹

此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考我的 Auto Layout 设置哦,下载到本地打开就可以了。

简介

本文中,我们将一起使用 UIPanGestureRecognizer 和 Auto Layout,通过 22 行代码实现拖动回弹效果。

搭建界面

删除首页中间的按钮,添加一个 View ,设置一种背景色便于辨认,然后对其进行绝对约束:

《Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹》

拖动一个 UIPanGestureRecognizer 到该 View 上:

《Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹》

界面搭建完成。

属性绑定

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

《Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹》

然后将 UIPanGestureRecognizer 右键拖动绑定:

《Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹》

编写代码

swiftclass 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
    }

}

查看效果

《Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹》

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

下一步:Auto Layout 使用心得(五)—— 根据文字、图片自动计算 UITableViewCell 高度

原文发表在我的个人网站:Auto Layout 使用心得(四)—— 22 行代码实现拖动回弹

    原文作者:JohnLui
    原文地址: https://segmentfault.com/a/1190000002661328
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞