按比例空间定位对象
Posted
技术标签:
【中文标题】按比例空间定位对象【英文标题】:space position objects by proportion 【发布时间】:2020-03-06 04:45:32 【问题描述】:我下面的快速代码是定位对象。我希望两个对象都覆盖 x 轴的 10%。所以第一个对象是fight[0].image,第二个对象是fight1.image。正如您在左侧的图像中看到的那样,下面的当前代码正在生成。右边的图像是我希望代码生成的。由于我不能约束下面的代码,我不知道如何实现这个结果。所以fight[0].image 应该覆盖x 轴的10%,然后fight1.image 应该覆盖x 轴的下一个10%。这 2 个对象加起来应该覆盖 x 轴的 20%。
import UIKit
class ViewController: UIViewController
let fight = (0..<10).map _ in UIImageView()
var textEnter = UITextField()
var g2 = UIPanGestureRecognizer()
var g3 = UIPanGestureRecognizer()
override func viewDidLoad()
super.viewDidLoad()
fight[0].image = UIImage(named: "a.png")
fight[1].image = UIImage(named: "m.png")
fight.forEach
$0.isUserInteractionEnabled = true
[textEnter].forEach
$0.translatesAutoresizingMaskIntoConstraints = false
view.addSubview($0)
$0.backgroundColor = .blue
g2 = UIPanGestureRecognizer(target: self, action: #selector(ViewController.g1Method))
g3 = UIPanGestureRecognizer(target: self, action: #selector(ViewController.g1Method))
fight[0].addGestureRecognizer(g2)
fight[1].addGestureRecognizer(g3)
fight.forEach
$0.backgroundColor = .clear
view.addSubview($0)
// need a non-rendering "spacer" to vertically separate textEnter from Pic
let spacer = UILayoutGuide()
view.addLayoutGuide(spacer)
// NOTE: do NOT constrain any elements relative to fight views
NSLayoutConstraint.activate ([
// constrain textEnter top / leading / trailing to view
textEnter.topAnchor.constraint(equalTo: view.topAnchor, constant : 0),
textEnter.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant : 0),
textEnter.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant :0),
// constrain textEnter height to 0.1 * view height
textEnter.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.1, constant: 0),
// constrain spacer top to bottom of textEnter
spacer.topAnchor.constraint(equalTo: textEnter.bottomAnchor, constant: 0.0),
// constrain spacer leading to view leading
spacer.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0.0),
// constrain spacer height to 0.1 * view height
spacer.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.10),
// spacer width doesn't matter
spacer.widthAnchor.constraint(equalToConstant: 1.0),
])
textEnter.textAlignment = .center
override func viewDidAppear(_ animated: Bool)
super.viewDidAppear(animated)
// set fight[0] frame *after* textEnter has been laid-out
fight[0].frame.size = CGSize(width: view.frame.width * 0.10, height: view.frame.height * 0.10)
let x = view.frame.origin.x
let y = textEnter.frame.origin.y + textEnter.frame.size.height
fight[0].frame.origin = CGPoint(x: x, y: y)
fight[1].frame.size = CGSize(width: view.frame.width * 0.10, height: view.frame.height * 0.10)
let x1 = view.frame.origin.x * 0.10
let y1 = textEnter.frame.origin.y + textEnter.frame.size.height
fight[1].frame.origin = CGPoint(x: x1, y: y1)
【问题讨论】:
【参考方案1】:您可能希望您的fight
图像视图是方形的(因此图像将是圆形的),因此计算一次宽度为:
let w = view.frame.width * 0.10
并将高度设置为与宽度相同的值
let h = w
您将从y
开始作为textEnter
的底部,x
作为0
,然后循环遍历fight
数组中的图像视图,设置框架并将x
递增w
:
override func viewDidAppear(_ animated: Bool)
super.viewDidAppear(animated)
// set fight frames *after* textEnter has been laid-out
// width should be 10% of view width
let w = view.frame.width * 0.10
// height should be the same as width
let h = w
// start x-position at 0
var x: CGFloat = 0
// y-position is bottom of textEnter frame
let y = textEnter.frame.origin.y + textEnter.frame.size.height
// set frames for all imageViews in fight array
fight.forEach v in
// set the frame
v.frame = CGRect(x: x, y: y, width: w, height: h)
// increment x by the width
x += w
您现在将有 10 个 fight
图像视图在视图中对齐(我使用随机颜色作为背景):
【讨论】:
以上是关于按比例空间定位对象的主要内容,如果未能解决你的问题,请参考以下文章
Android之使用weight属性实现控件的按比例分配空间