在屏幕右下角放置一个按钮
Posted
技术标签:
【中文标题】在屏幕右下角放置一个按钮【英文标题】:Positioning a button on bottom right of screen 【发布时间】:2020-02-10 16:57:16 【问题描述】:我的按钮定位有问题。我正在尝试将我的按钮放在屏幕的右下角。我是自动布局的新手。该按钮当前显示在屏幕的左上角。
这是我的代码:
-
添加标记
添加地图视图
添加按钮
这里是我添加标记的地方:
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])
【问题讨论】:
你不需要设置框架 谢谢!改变了@jawadAli 你在哪里调用 loadFunction 方法? 在那里更新@jawadAli 嗯......我担心的是......每次视图出现时这些功能? 【参考方案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])
如果你想把它放在右边,给它右边距的约束
根据您的设计偏好更改常量
【讨论】:
感谢您的回答,但它仍然位于屏幕的左上角,而不是右下角 我接受了另一个答案,因为它首先出现。我还有另一个问题。为什么当我离开页面然后导航回来时,这个按钮会移动位置? 在 viewdidload 中添加子视图 不,还在发生。和 viewDidAppear 的结果相同 你能分享你的代码吗?你在哪里添加按钮?【参考方案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)
])
【讨论】:
为什么当我离开页面然后导航回来时,这个按钮会移动位置?【参考方案3】:看起来您正在代码中进行约束。如果可以,我可以提供一个更新的替代方案吗?使用更容易的锚点,并且是 UIView
的任何子类的一部分。
视图有几个锚点 - 顶部、底部、左侧或前导、右侧或尾随、中心 x 和 Y 以及高度/宽度是最常用的。
现在,对于任何视图,您需要做两件事:
定位它。在您的情况下,您只需将按钮放置在 (a) 下部或底部 (b) 右侧或尾部。
如果它没有 固有 大小(搜索比我能给出的更好的定义),请给您的视图一个高度和宽度。
因此,在您的情况下,假设您希望将UIButton
定位在距离屏幕右下角 10 点的位置。 (请记住,Apple 已经引入了“安全区域插图”,但这是另一个问题的主题。再次搜索它,您会找到很多示例。)
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
就是这样!代码不那么冗长,因此更易于阅读。
除了基础(和安全区域)之外,您还可以通过编程方式做另外两件事:
只要您命名约束,就可以更改常量(对于某些视图,乘数)。 同样,只要您在数组中设置约束,就可以选择性地激活/停用一组约束。我发现使用锚点要容易得多,并且使用数组可以根据纵向或横向进行不同的布局。
【讨论】:
以上是关于在屏幕右下角放置一个按钮的主要内容,如果未能解决你的问题,请参考以下文章
Angular Material 2:如何在右下角的 md-table 顶部放置一个 fab 按钮?
ImageView 到屏幕右下角,上方有大 ScrollView