ios - 卡片翻转图像不受 View 限制

Question

我有以下 View Controller

import UIKit

class CardViewController: UIViewController {

@IBOutlet weak var containerView: UIView!

private let backImageView: UIImageView! = UIImageView(image: UIImage(named: "card_front_01"))
private let frontImageView: UIImageView! = UIImageView(image: UIImage(named: "card_back_01"))

private var showingBack = false

override func viewDidLoad() {
    super.viewDidLoad()

    frontImageView.contentMode = .scaleToFill
    backImageView.contentMode = .scaleToFill

    containerView.addSubview(frontImageView)
    frontImageView.translatesAutoresizingMaskIntoConstraints = false


    let singleTap = UITapGestureRecognizer(target: self, action: #selector(flip))
    singleTap.numberOfTapsRequired = 1
    containerView.addGestureRecognizer(singleTap)
}

func flip() {
    let toView = showingBack ? frontImageView : backImageView
    let fromView = showingBack ? backImageView : frontImageView
    UIView.transition(from: fromView!, to: toView!, duration: 1, options: .transitionFlipFromRight, completion: nil)
    toView?.translatesAutoresizingMaskIntoConstraints = false
    showingBack = !showingBack
}

}

它基本上由一个 View 组成，该 View 在其中加载图像，以及当点击的卡片与另一张图像翻转时。

我的问题是图像没有限制在 View 中，而是显示在 viewController 的左上角。

如何让卡片停留在inner view的范围内？

谢谢

Answer 1

你很接近，但你需要给你的 ImageView 一个框架或约束。

由于您正在使用 .scaleToFill，最简单的方法是不禁用 AutoresizingMask，并简单地设置 Frame 以匹配容器 View :

class CardViewController: UIViewController {

    @IBOutlet weak var containerView: UIView!

    private let backImageView: UIImageView! = UIImageView(image: UIImage(named: "card_front_01"))
    private let frontImageView: UIImageView! = UIImageView(image: UIImage(named: "card_back_01"))

    private var showingBack = false

    override func viewDidLoad() {
        super.viewDidLoad()

        frontImageView.contentMode = .scaleToFill
        backImageView.contentMode = .scaleToFill

        containerView.addSubview(frontImageView)

        // don't disable Autoresizing
        // frontImageView.translatesAutoresizingMaskIntoConstraints = false

        let singleTap = UITapGestureRecognizer(target: self, action: #selector(flip))
        singleTap.numberOfTapsRequired = 1
        containerView.addGestureRecognizer(singleTap)

    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // set the frames of the image views to match the containerView
        frontImageView.frame = containerView.bounds
        backImageView.frame = containerView.bounds

    }

    func flip() {
        let toView = showingBack ? frontImageView : backImageView
        let fromView = showingBack ? backImageView : frontImageView
        UIView.transition(from: fromView!, to: toView!, duration: 1, options: .transitionFlipFromRight, completion: nil)
        // don't disable Autoresizing
        // toView?.translatesAutoresizingMaskIntoConstraints = false
        showingBack = !showingBack
    }

}