在屏幕右下角放置一个按钮

Question

我的按钮定位有问题。我试图将我的按钮放在屏幕的右下角。我是自动布局的新手。该按钮当前显示在屏幕的左上角。

这是我的代码：

添加标记
添加地图视图
添加按钮

这里是我添加标记的地方：

func secondfunction() {

        for x in names{
            let url1 = URL(string: url: ", url1)
            let data1 = try? Data(contentsOf: url1!) //make sure your image in this url does exist
            //self.imagesOne = UIImage(data: data1!)
            self.images.append(UIImage(data: data1!)!)
        }

        self.loadFunction()
    }

这里是我加载地图和添加按钮的地方：

  func loadFunction()
        {

            mapView = MGLMapView(frame: view.bounds)
            mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

            mapView.centerCoordinate = CLLocationCoordinate2D(latitude:xCoord, longitude: yCoord)

            mapView.zoomLevel = 15
            mapView.delegate = self
            view.addSubview(mapView)

            var pointAnnotations = [MGLPointAnnotation]()
            for coordinate in locationsList {
                let location: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: coordinate.latitude, longitude: coordinate.longitude)
                let point = MGLPointAnnotation()
                point.title = "Tap here"
                point.coordinate = location
                pointAnnotations.append(point)
            }

            self.tabBarController?.tabBar.isHidden = false

            mapView.addAnnotations(pointAnnotations)

            button.setBackgroundImage(UIImage(named:"compass.png"), for: .normal)
            button.addTarget(self, action: #selector(btnPressed), for: UIControl.Event.touchUpInside)

            self.view.addSubview(button)


            button.translatesAutoresizingMaskIntoConstraints = false
            let widthContraints =  NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)

            let heightContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.height, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)

            let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.bottomMargin, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.bottomMargin, multiplier: 1, constant: -80)

            let yContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.trailing, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: -80)

            NSLayoutConstraint.activate([heightContraints,widthContraints,xContraints,yContraints])

        }

Answer 1

将你的按钮限制在底部像这样 .. 这是经过测试的代码

override func viewDidLoad() {
    super.viewDidLoad()

           button.backgroundColor = .red
           self.view.addSubview(button)
}
override func viewDidLayoutSubviews() {
    
    
    button.translatesAutoresizingMaskIntoConstraints = false
    let widthContraints =  NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)
    
    let heightContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.height, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)
    
    let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.bottomMargin, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.bottomMargin, multiplier: 1, constant: -20)
    
    let yContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.trailing, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: -20)
    
    NSLayoutConstraint.activate([heightContraints,widthContraints,xContraints,yContraints])
}

如果你想把它放在右边，从右边距给它约束

根据您的设计偏好更改常量

Answer 2

删除此顶部约束

let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.topMargin, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.topMargin, multiplier: 1, constant: 20)

并添加底部约束

NSLayoutConstraint.activate([
    button.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
    button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20),
    button.widthAnchor.constraint(equalToConstant: 40),
    button.heightAnchor.constraint(equalToConstant: 40)
])

Answer 3

看起来你在代码中做约束。如果可以的话，我可以提供更新的替代方案吗？使用锚点，它更容易，并且是 UIView.

的任何子类的一部分

一个视图有几个锚点 - 顶部、底部、左侧或前导、右侧或尾部、中心 x 和 Y，height/width 是最常用的.

现在，对于任何视图，您需要做两件事：

定位它。在您的情况下，您只需将按钮放在 (a) 下方或底部 (b) 右侧或尾部。
如果它没有固有尺寸（搜索比我能给出的更好的定义）给你的视图一个高度和宽度。

因此，在您的情况下，假设您希望将 UIButton 放置在距屏幕右下角 10 点的位置。（请记住，Apple 已经推出 "safe area insets" 但这是另一个问题的主题。再次搜索它，您会发现很多示例。）

button.translatesAutoresizingMaskIntoConstraints = false

永远记得这样做！

现在让我们给你的按钮一个尺寸：

button.widthAnchor.constraint(equalToConstant: 100).isActive = true
button.heightAnchor.constraint(equalToConstant: 50).isActive = true

最后，定位：

button.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true

就是这样！代码不那么冗长，因此更容易阅读。

除了基础知识（和安全区域）之外，您还可以通过编程方式做另外两件事：

只要您命名约束，就可以更改常量（对于某些视图，乘数）。
选择性地 activate/deactivate 一组约束，同样，只要您将它们设置在一个数组中。

我发现使用锚点更容易，并且可以使用数组根据纵向或横向进行不同的布局。

在屏幕右下角放置一个按钮

Positioning a button on bottom right of screen

xcode

ios

autolayout

swift

ios-autolayout