卡片翻转图像不受视图

时间:2017-11-03 11:23:28

标签: ios swift xcode

我有以下ViewController

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
}

}

其中基本上包含一个视图,该视图可以在其中加载图像,并且当使用其他图像翻转敲击卡时。

我的问题是图像没有约束到视图,但似乎位于viewController的左上角。

如何让卡片保持在内部视图的范围内?

由于

2 个答案:

答案 0 :(得分:1)

您已关闭,但您需要为图像视图提供框架或约束。

由于您使用的是.scaleToFill,因此最简单的方法是禁用AutoresizingMask,只需设置Frame以匹配容器视图:

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
    }

}

答案 1 :(得分:1)

您需要生成约束(NSLayoutConstraint)或手动设置子视图的框架。这是一个通用的例子:

首先设置图像并添加为子视图:

imageView.image = image
containerView.addSubview(imageView)

然后:

选项1:设置' imageView'的帧。在它的superview coord'系统

imageView.translatesAutoresizingMaskIntoConstraints = true // Must be true to use the frame        
imageView.frame = CGRect(x: 50, y: 50, width: image.size.width, height: image.size.height)

选项2:设置' imageView'的约束。在它的超级视图中

translatesAutoresizingMaskIntoConstraints视图的prop必须为true才能使用约束

imageView.translatesAutoresizingMaskIntoConstraints = true