在iOS Swift中如何将子视图以居中对齐的方式添加到另一个子视图中。

Question

我正在使用Lottie库进行动画。我将Lottie文件作为subView加载到另一个subView中，但它没有居中对齐。我尝试使用以下center属性：

@IBOutlet weak var viewOn: UIView!

let animationView = LOTAnimationView(name: "restless_gift_ii") {
animationView.loopAnimation = true
animationView.contentMode = .scaleToFill
animationView.animationSpeed = 1
animationView.backgroundColor = UIColor.black
animationView.frame.size = viewOn.frame.size
animationView.center.x = viewOn.center.x
animationView.center.y = viewOn.center.y
viewOn.addSubview(animationView) }

- user3853770

Answer 1

你可以通过自动布局来使你的动画视图在其父视图中居中对齐。

在这里，我提供了两种将animationView居中对齐的方法，并添加了注释以便理解。

if let animationView = LOTAnimationView(name: "4_bar_loop") {

        animationView.loopAnimation = true
        animationView.contentMode = .scaleToFill
        animationView.animationSpeed = 1
        animationView.backgroundColor = UIColor.black

        self.viewOn.addSubview(animationView)

        animationView.translatesAutoresizingMaskIntoConstraints = false

        // Apply these constrains if you want animation size should be same as super view.
        self.viewOn.addConstraint(NSLayoutConstraint(item: animationView, attribute: .leading, relatedBy: .equal, toItem: self.viewOn, attribute: .leading, multiplier: 1.0, constant: 1))
        self.viewOn.addConstraint(NSLayoutConstraint(item: animationView, attribute: .trailing, relatedBy: .equal, toItem: self.viewOn, attribute: .trailing, multiplier: 1.0, constant: 1))
        self.viewOn.addConstraint(NSLayoutConstraint(item: animationView, attribute: .top, relatedBy: .equal, toItem: self.viewOn, attribute:.top, multiplier: 1.0, constant: 1))
        self.viewOn.addConstraint(NSLayoutConstraint(item: animationView, attribute: .bottom, relatedBy: .equal, toItem: self.viewOn, attribute: .bottom, multiplier: 1.0, constant: 1))


        // Apply these constraint if you want animationView with fixed height and width and center of super view.
//            self.viewOn.addConstraint(NSLayoutConstraint(item: animationView, attribute: .centerX, relatedBy: .equal, toItem: self.viewOn, attribute: .centerX, multiplier: 1.0, constant: 1))
//            self.viewOn.addConstraint(NSLayoutConstraint(item: animationView, attribute: .centerY, relatedBy: .equal, toItem: self.viewOn, attribute: .centerY, multiplier: 1.0, constant: 1))
//            animationView.addConstraint(NSLayoutConstraint(item: animationView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100))
//            animationView.addConstraint(NSLayoutConstraint(item: animationView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100))
        }

- Sagar Chauhan

Answer 2

您可以像下面的代码一样以编程方式完成，希望这能帮助到您。

import UIKit

class ViewController: UIViewController {

    let firstView:UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.blue
        return view
    }()

    let secondView:UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.orange
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        setupViews()
    }

    func setupViews(){

        view.addSubview(firstView)
        firstView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0).isActive = true
        firstView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
        firstView.widthAnchor.constraint(equalToConstant: 100).isActive = true
        firstView.heightAnchor.constraint(equalToConstant: 100).isActive = true

        // second view
        firstView.addSubview(secondView)
        secondView.centerYAnchor.constraint(equalTo: firstView.centerYAnchor, constant: 0).isActive = true
        secondView.centerXAnchor.constraint(equalTo: firstView.centerXAnchor, constant: 0).isActive = true
        secondView.widthAnchor.constraint(equalToConstant: 50).isActive = true
        secondView.heightAnchor.constraint(equalToConstant: 50).isActive = true

    }

}

- Dark Knight

Answer 3

@IBOutlet weak var viewOn: UIView!

let animationView = LOTAnimationView(name: "restless_gift_ii")
{
    animationView.loopAnimation = true
    animationView.contentMode = .scaleToFill
    animationView.animationSpeed = 1
    animationView.backgroundColor = UIColor.black
    animationView.frame = viewOn.frame
    viewOn.addSubview(animationView)
}

你可以尝试一下，希望能够正常工作。

- chaunv

Answer 4

我遇到了很多有关 Lottie 动画的对齐和缩放问题。它们在模拟器上居中显示，但在设备上不是这样。经过数小时的调试，我发现布局问题是因为我在 viewDidLoad() 上设置动画。当我将代码移动到 viewDidAppear(_ animated: Bool) 中时，一切都像魔法般地奏效了。我希望这可以帮助其他人。

- Roney Sampaio