自动布局中心的UIView高于其中心另一个的UIView [英] Auto Layout center UIView above another UIView at its center

问题描述

我有一个的UIView （弹出）和多的UIButton S（发件人）。如果我触摸发件人我想中央的弹出在发送者的坐标。

然而，由于的自动布局的的弹出总是在刷新移回到初始位置。我明白我必须使用约束和改变这些编程。

不幸的是，我不知道我怎么可以调整低于code。与约束。特别是作为弹出是作为发送较大。

的自动布局的启用

任何人可以给我如何在发送者与中心移动的UIView 售后服务中心一些建议吗？谢谢！

下面是低于code屏幕图像显示问题：

 进口的UIKit一流的ViewController：UIViewController的{    @IBOutlet弱VAR号：UIImageView的！
    @IBOutlet弱VAR弹出：UIView的！    @IBAction FUNC openPopup（发件人：UIButton的）{
        self.popup.center = sender.center
        //旧的位置是：（190.5，124.0） - 新的职位：（173.0，414.0）
    }    @IBAction FUNC updateImage（发件人：UIButton的）{
        self.number.image = UIImage的（命名为：IMG-1）
    }
}
 

下面是我到目前为止，但我不知道这是否是正确的，我有什么类型的 NSLayoutConstraint 的使用来实现这一点：

 进口的UIKit一流的ViewController：UIViewController的{    变种ID = 1
    @IBOutlet弱VAR号：UIImageView的！
    @IBOutlet弱VAR弹出：UIView的！    @IBOutlet弱VAR popupy：NSLayoutConstraint！
    @IBOutlet弱VAR popupx：NSLayoutConstraint！    @IBAction FUNC openPopup（发件人：UIButton的）{    popupx.constant =复位（弹出，位置：sender.center）.Y
    popupy.constant =复位（弹出，位置：sender.center）.X    }    @IBAction FUNC updateImage（发件人：UIButton的）{
        如果ID == 1 {
            ID = 2
        }其他{
            ID = 1
        }        self.number.image =的UIImage（命名为：\\（ID））    }
    FUNC复位（元素：UIView的，位置：CGPoint） -  GT; CGPoint
    {
        VAR P = CGPoint（）        p.x = position.x  - （element.frame.size.height / 2）
        p.y = position.y  - （element.frame.size.width / 2）        回报p
    }
}
 

解决方案

由于您希望您的视图相对于一段时间不同的看法中心，要做到这一点的方法之一是增加并根据需要进行删除限制。

以下code创建 NSLayoutConstraint s到相对于另一种观点认为中心：

 类的ViewController：UIViewController的{    @IBOutlet弱VAR BoxView中：UIView的！
    VAR boxCenterX：NSLayoutConstraint？
    VAR boxCenterY：NSLayoutConstraint？    FUNC centerBoxOnView（V：的UIView）{
        //在中心删除previous限制，如果有的话
        boxCenterX？。主动= FALSE
        boxCenterY？。主动= FALSE        boxCenterX = NSLayoutConstraint（项目：BoxView中，属性：.CenterX，
            relatedBy：.Equal，toItem：V，属性：.CenterX，
            乘数：1，常数：0）
        boxCenterX？。主动=真        boxCenterY = NSLayoutConstraint（项目：BoxView中，属性：.CenterY，
            relatedBy：.Equal，toItem：V，属性：.CenterY，
            乘数：1，常数：0）
        boxCenterY？。主动=真        self.view.layoutIfNeeded（）
    }    覆盖FUNC viewDidLoad中（）{
        super.viewDidLoad（）        //在屏幕中心开始框
        centerBoxOnView（self.view）
    }    @IBAction FUNC按钮pressed（按钮：UIButton的）{
        centerBoxOnView（按钮）
    }
}
 

---

当您设置约束条件 BoxView中，确保（你四处移动视图）的centerX 和 centerY 您在故事板创建被标记为约束条件的占位符的，使他们在构建时被删除，而不是在创建约束干扰code。

---

如果您希望以动画到位，替换：

  self.view.layoutIfNeeded（）
 

与

  UIView.animateWithDuration（1）{
    self.view.layoutIfNeeded（）
}
 

I have a UIView (popup) and multiple UIButtons (sender). If I touch the sender I would like to center the popup at the coordinates of the sender.

However, as of Auto Layout the popup always moves back to the initial position at refresh. I understand that I have to use constraints and change those programmatically.

Unfortunately I don't know how I can adjust below code with constraints. Especially as the popup is larger as the sender.

Could anybody give me some advice on how to move UIViews center at sender's center with Auto Layout enabled ? Thanks!!

Here is a screen image of below code that shows the issue:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var number: UIImageView!
    @IBOutlet weak var popup: UIView!

    @IBAction func openPopup(sender: UIButton) {
        self.popup.center = sender.center
        //old position: (190.5, 124.0) - new Position: (173.0, 414.0)
    }

    @IBAction func updateImage(sender: UIButton) {
        self.number.image = UIImage(named: "img-1")
    }
}

Here is what I have so far, but I don't know if this is correct and what type of NSLayoutConstraint I have to use to achieve this:

import UIKit

class ViewController: UIViewController {

    var id = 1
    @IBOutlet weak var number: UIImageView!
    @IBOutlet weak var popup: UIView!

    @IBOutlet weak var popupy: NSLayoutConstraint!
    @IBOutlet weak var popupx: NSLayoutConstraint!

    @IBAction func openPopup(sender: UIButton) {

    popupx.constant = reposition(popup, position: sender.center).y
    popupy.constant = reposition(popup, position: sender.center).x

    }

    @IBAction func updateImage(sender: UIButton) {
        if id == 1 {
            id = 2
        }else {
            id = 1
        }

        self.number.image = UIImage(named: "\(id)")

    }


    func reposition (element: UIView, position: CGPoint)->CGPoint
    {
        var p = CGPoint()

        p.x = position.x - (element.frame.size.height / 2 )
        p.y = position.y - (element.frame.size.width / 2)

        return p
    }
}

解决方案

Since you want to center your view relative to different views over time, one way to do that is to add and remove constraints as needed.

The following code creates NSLayoutConstraints to center the view relative to another view:

class ViewController: UIViewController {

    @IBOutlet weak var boxView: UIView!
    var boxCenterX: NSLayoutConstraint?
    var boxCenterY: NSLayoutConstraint?

    func centerBoxOnView(v: UIView) {
        // Remove previous constraints on center, if any
        boxCenterX?.active = false
        boxCenterY?.active = false

        boxCenterX = NSLayoutConstraint(item: boxView, attribute: .CenterX,
            relatedBy: .Equal, toItem: v, attribute: .CenterX,
            multiplier: 1, constant: 0)
        boxCenterX?.active = true

        boxCenterY = NSLayoutConstraint(item: boxView, attribute: .CenterY,
            relatedBy: .Equal, toItem: v, attribute: .CenterY,
            multiplier: 1, constant: 0)
        boxCenterY?.active = true

        self.view.layoutIfNeeded()
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Start box at center of screen
        centerBoxOnView(self.view)
    }

    @IBAction func buttonPressed(button: UIButton) {
        centerBoxOnView(button)
    }
}

---

When you set up the constraints for the boxView (the view you are moving around), make sure the centerX and centerY constraints you create in the Storyboard are marked as Placeholder so that they will be removed at build time and not interfere with the constraints created in code.

---

If you want the view to be animated into place, replace:

self.view.layoutIfNeeded()

with:

UIView.animateWithDuration(1) {
    self.view.layoutIfNeeded()
}

这篇关于自动布局中心的UIView高于其中心另一个的UIView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！