通过代码添加多个图像视图

时间:2018-08-28 11:55:01

标签: ios swift xcode

am尝试在数组中循环时添加图像视图。.

let v = [1,2,3]
w = self.playgroundimg.frame.width/3 - 48.89/2
h = self.playgroundimg.frame.height/4 - 17

for x in v {
  let imageName3 = "lineupcardbg"
  let image3 = UIImage(named: imageName3)
  let imageView3 = UIImageView(image: image3!)
  imageView3.frame = CGRect(x: w, y: h, width: 48.89, height: 70.15)
  self.playgroundimg.addSubview(imageView3)
  w = w + self.playgroundimg.frame.width/3 - 48.89 - 15
}

这工作正常,但是图像视图的尺寸将因设备而异..

iphonex:

enter image description here

iphone 7 plus:

enter image description here

如您所见,中间的一个不居中于其下面的一个..如何实现这一点,所以中间在中间,而另外两个在其旁边并留有空间?并在所有尺寸上都显示相同?

playgroundimg约束:

enter image description here

2 个答案:

答案 0 :(得分:0)

有许多方法可以在自动布局中执行操作。解决此问题的一种方法是为Leading视图设置Trailingplaygroundimg自动布局约束。这将使playgroundimg.frame.width适应设备的屏幕宽度。并确保设置了parkerimg超级视图的约束。

在Xcode中,例如:

constraints

您正在使用playgroundimg.frame.width计算hw变量,我建议将它们的名称分别更改为xy,因为它们表示坐标而不是宽度或高度:

x = self.playgroundimg.frame.width/3 - 48.89/2
y = self.playgroundimg.frame.height/4 - 17

也更新此行:

x = x + self.playgroundimg.frame.width/3 - 48.89 - 15

答案 1 :(得分:0)

这是一个简单的示例-只是为了展示如何使用代码中的约束。

您可以将其粘贴到新的Playground页面中并运行它以查看结果。

更改行:

get { return CGSize(width: 400, height: 400) }

更改为不同的大小以查看视图是否居中。

import PlaygroundSupport
import UIKit

class RoundedImageView: UIImageView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        layer.cornerRadius = 8
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

class AlignViewController: UIViewController {

    override public var preferredContentSize: CGSize {
        get { return CGSize(width: 400, height: 400) }
        set { super.preferredContentSize = newValue }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .green

        var theImageViews = [UIImageView]()

        for _ in 0..<4 {

            let imgView = RoundedImageView(frame: CGRect.zero)
            imgView.translatesAutoresizingMaskIntoConstraints = false
            imgView.backgroundColor = .white

            view.addSubview(imgView)

            // make all views the same size and width
            NSLayoutConstraint.activate([
                imgView.widthAnchor.constraint(equalToConstant: 48.89),
                imgView.heightAnchor.constraint(equalToConstant: 70.15),
                ])

            theImageViews.append(imgView)

        }

        // for easy identification of which views we're referencing
        let leftView = theImageViews[0]
        let centerView = theImageViews[1]
        let rightView = theImageViews[2]
        let bottomView = theImageViews[3]

        NSLayoutConstraint.activate([

            // "center view" will be centered horizontally, and a little above centered vertically
            centerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            centerView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -25),

            // left view is aligned to top of center view, and 20-pts to the left
            leftView.topAnchor.constraint(equalTo: centerView.topAnchor),
            leftView.trailingAnchor.constraint(equalTo: centerView.leadingAnchor, constant: -20),

            // right view is aligned to top of center view, and 20-pts to the right
            rightView.topAnchor.constraint(equalTo: centerView.topAnchor),
            rightView.leadingAnchor.constraint(equalTo: centerView.trailingAnchor, constant: 20),

            // bottom view is centerX aligned to center view, and 20-pts below
            bottomView.topAnchor.constraint(equalTo: centerView.bottomAnchor, constant: 20),
            bottomView.centerXAnchor.constraint(equalTo: centerView.centerXAnchor),

            ])

    }

}

let viewController = AlignViewController()

PlaygroundPage.current.liveView = viewController