如何快速按下集合视图单元格来修复自定义视图中的约束

Question

我有一个测试应用程序，我正在尝试首次以编程方式创建100％。我有一个简单的collectionView，在每个单元格中都有一个图像和一个标签。

当我按下单元格时，会弹出一个自定义视图，其中有两个视图，红色和蓝色，将来会包含内容，但现在只有两个视图。

我想让该应用程序既可以纵向也可以横向使用，并且在一开始就很好用。我第一次按该单元格时，弹出视图在纵向和横向方向上都起作用。

这是我想在任何时候按下一个单元格都会发生的事情，但是当我从视图中单击以使其消失，然后按下任何一个单元格时，就会出现问题：

第一个方向，无论是横向还是纵向，都很好，但是对于第二个或更多单元格，当我现在更改方向时会出现问题。

我尝试使用首次亮相视图层次结构，这是错误屏幕的外观。

我要遵循的主要思想是该站点的教程：https://iosrevisited.blogspot.com/2017/10/adaptive-autolayout-programmatically-iphone-x.html

我能够完成本教程，并且工作正常。我的不同之处在于，我的视图应该在用户需要时出现和消失。

这是具有collectionView的视图控制器的代码：

import UIKit

extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 150)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    }
}


extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return items.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! TestingCollectionViewCell
        cell.backgroundColor = .white
        let img = UIImage(named: self.items[indexPath.row])
        cell.imageView.image = img
        cell.imageName.text = "\(self.items[indexPath.row])"
        return cell
    }


    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("\(items[indexPath.row])")
        self.presentInfoView(withInfo: items[indexPath.row])
    }
}

class ViewController: UIViewController, BlurDelegate {

    func removeBlurView() {
        for subview in view.subviews {
            if subview.isKind(of: UIVisualEffectView.self) {
                subview.removeFromSuperview()
                self.infoView.removeFromSuperview()
            }
        }
    }

    let infoView: InfoView = {
       let view = InfoView()
        view.layer.cornerRadius = 5
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    fileprivate var items: [String] = [
        "photo1",
        "photo2",
        "photo3",
        "photo4",
        "photo5",
        "photo6",
        "photo7",
        "photo8",
        "photo9",
        "photo10",
        "photo11",
        "photo12",
        "photo13",
        "photo14",
        "photo15",
        "photo16",
        "photo17",
        "photo18",
        "photo19",
        "photo20",
        "photo21",
        "photo22",
        "photo23",
        "photo24"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        let collection = UICollectionView(frame: view.frame, collectionViewLayout: UICollectionViewFlowLayout())
                //allows us to use auto layout constraints
        collection.translatesAutoresizingMaskIntoConstraints = false
        collection.backgroundColor = .black
        view.addSubview(collection)
        collection.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        collection.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        collection.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        collection.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true

        collection.dataSource = self
        collection.delegate = self

        collection.register(TestingCollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        self.navigationItem.title = "Testing"

    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        var touch: UITouch? = touches.first
        if touch?.view != infoView {
            dismissView()

        }
    }


    func dismissView() {

        //dismiss(animated: true, completion: nil)
        removeBlurView()

    }

    func setBlurView() {
        let blurView = UIVisualEffectView()
        blurView.frame = view.frame
        blurView.effect = UIBlurEffect(style: .regular)
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(blurView)
    }

    func presentInfoView(withInfo info: String) {
        setBlurView()
        view.addSubview(infoView)
        infoView.addView()
        let img = UIImage(named: info)
        infoView.imageView.image = img
        infoView.nameLbl.text = info


        infoView.backgroundColor = .white
        infoView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        infoView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8).isActive = true
        //infoView.widthAnchor.constraint(equalToConstant: view.frame.width - 64).isActive = true
        infoView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.8).isActive = true
        //infoView.heightAnchor.constraint(equalToConstant: view.frame.height - 64).isActive = true
        infoView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -44).isActive = true
        infoView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)

        infoView.alpha = 0

        UIView.animate(withDuration: 0.5) {
            self.infoView.alpha = 1
            self.infoView.transform = .identity
        }
    }

}

稍微清楚一点，我们想要做的是使模糊视图出现并随着视图的出现而消失。

这是在单元格出现时将出现的视图的代码：

import UIKit
protocol BlurDelegate: class {
    func removeBlurView()
}
class InfoView: UIView {


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

    let btmView: UIView = {
       let view = UIView()
        view.backgroundColor = .red
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()


    var portraitConstraints: [NSLayoutConstraint] = []
    var landscapeConstraints: [NSLayoutConstraint] = []

    override init(frame: CGRect) {
        super.init(frame: frame)
        NotificationCenter.default.addObserver(self, selector: #selector(toggleConstraints), name: UIDevice.orientationDidChangeNotification, object: nil)
        //addView()
    }

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

    func addView() {
        let guide = self.safeAreaLayoutGuide

        //image layout
        self.addSubview(topView)
        let defaultImgTop = topView.topAnchor.constraint(equalTo: guide.topAnchor)
        let defaultImgLeading = topView.leadingAnchor.constraint(equalTo: guide.leadingAnchor)

        //portrait
        let portraitImgTrailing = topView.trailingAnchor.constraint(equalTo: guide.trailingAnchor)
        let portraitImgHeight = topView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.5)


        //lbl layouts
        self.addSubview(btmView)
        let defaultlblTrailing = btmView.trailingAnchor.constraint(equalTo: guide.trailingAnchor)
        let defaultLblBottom = btmView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)

        //portrait
        let portraitLblBottom = btmView.topAnchor.constraint(equalTo: topView.bottomAnchor)
        let portraitLblLeading = btmView.leadingAnchor.constraint(equalTo: guide.leadingAnchor)

        //imageView landscape constraints
        let landscapeImgBottom = topView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)
        let landscapeImgWidth = topView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 0.5)


        //label landscape constraints
        let landscapeLblTop = btmView.topAnchor.constraint(equalTo: guide.topAnchor)
        let landscapeLblLeading = btmView.leadingAnchor.constraint(equalTo: topView.trailingAnchor)

        let defaultConstriants = [defaultImgTop, defaultImgLeading, defaultLblBottom, defaultlblTrailing]
        portraitConstraints = [portraitImgHeight, portraitImgTrailing, portraitLblBottom, portraitLblLeading]
        landscapeConstraints = [landscapeImgBottom, landscapeLblTop, landscapeLblLeading, landscapeImgWidth]
        self.addConstraints(defaultConstriants)
        toggleConstraints()
    }



    @objc func toggleConstraints() {
        if UIDevice.current.orientation.isLandscape {
            self.removeConstraints(portraitConstraints)
            self.addConstraints(landscapeConstraints)
        } else {
            self.removeConstraints(landscapeConstraints)
            self.addConstraints(portraitConstraints)
        }
    }

}

我从上面添加的网站的视图中得到了这个想法。因为它是视图，所以我不得不更改一些东西，但是它应该起作用。我认为这是错误所在，但我尝试更改肖像和风景的约束条件，但没有用。我试着写下来，看看哪些约束已被删除然后又进行了更新，但是我似乎无法找到困扰我的那个约束。我知道问题应该出在红色视图的顶部锚点或蓝色视图的底部锚点，但我无法弄清楚哪个是错误的还是错误的。

我希望这是足够的信息，但是请问我还有什么可以帮助的。

也，如果不是很麻烦，如果您注意到视图出现时，导航栏似乎不会模糊。这使自定义视图看起来像在顶部被切除。如果您知道一种方法来模糊导航栏，或者尝试向下推视图的顶部锚点，以使它看起来并不那么糟糕，那么将不胜感激。

我尝试使用

self.navigationItem.bottomAnchor

并且我试图在视图中添加具有常量的顶部锚点，但是我上面的配置是我可以找到的使视图每次正确完美显示的最佳方法。非常感谢]]

我有一个测试应用程序，我正在尝试首次以编程方式创建100％。我有一个简单的collectionView，在每个单元格中都有一个图像和一个标签。当我按单元格时，一个自定义视图...

Answer 1

presentInfoView函数删除infoView.addView（）