пространственное расположение объектов пропорционально

Question

Мой быстрый код ниже позиционирует объекты. Я хочу, чтобы оба объекта покрывали 10 процентов оси x каждый. Таким образом, первый объект, который является бой [0] .image, а второй объект это бой 1 .image. Как вы можете видеть на изображении слева, это то, что производит текущий код ниже. Изображение справа - это то, что я хотел бы, чтобы код создавал. Поскольку я не могу ограничить код ниже, я не знаю, как достичь этого результата. Так что бой [0] .image должен охватывать 10 процентов оси x, а затем бой 1 .image должен охватывать следующие 10 процентов оси x. Вместе эти 2 объекта должны покрывать 20 процентов оси X.

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


}

Answer 1

Возможно, вы хотите, чтобы ваши fight изображения были квадратными (чтобы изображение было круглым), поэтому рассчитайте ширину один раз как:

let w = view.frame.width * 0.10

и установите высоту равную значению ширина

let h = w

Вы начнете с y, являющегося основанием textEnter, и x как 0, затем l oop через представления изображений в вашем массиве 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 изображений, выровненных по всему виду (я использовал случайные цвета для фона):