如何以编程方式设置内容拥抱和压缩 [英] How to set content hugging and compression programmatically

问题描述

当我的一个视图被隐藏时，我想给隐藏秀设置动画.因此，我使用了具有优先权的内容来对其进行动画处理，但是失败了，它在视图之间存在间隙.在这里，我向您展示ui和我的代码

I want to animate hide show when one of my view is hidden. so I'm using content hugging priority to animate that, but it failed it has a gap between view. here I show you the ui and my code

这是3个uiview代码，如上图所示

This is 3 uiview code like the picture above

    scrollView.addSubview(chooseScheduleDropDown)
        chooseScheduleDropDown.translatesAutoresizingMaskIntoConstraints = false
        chooseScheduleDropDown.setContentCompressionResistancePriority(.required, for: .vertical)
        NSLayoutConstraint.activate([
            chooseScheduleDropDown.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
            chooseScheduleDropDown.topAnchor.constraint(equalTo: scrollView.topAnchor),
            chooseScheduleDropDown.widthAnchor.constraint(equalToConstant: 285),
            chooseScheduleDropDown.heightAnchor.constraint(equalToConstant: 60)
        ])

        scrollView.addSubview(entryView)
        entryView.isHidden = true
        entryView.setContentHuggingPriority(.defaultLow, for: .vertical)
        entryView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            entryView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
            entryView.topAnchor.constraint(equalTo: chooseScheduleDropDown.bottomAnchor, constant: topPadding),
            entryView.widthAnchor.constraint(equalToConstant: 285),
            entryView.heightAnchor.constraint(equalToConstant: 60)
        ])

        scrollView.addSubview(chooseDateView)
        chooseDateView.setContentHuggingPriority(.defaultLow, for: .vertical)
        chooseDateView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            chooseDateView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
            chooseDateView.topAnchor.constraint(equalTo: entryView.bottomAnchor, constant: topPadding),
            chooseDateView.widthAnchor.constraint(equalToConstant: 285),
            chooseDateView.heightAnchor.constraint(equalToConstant: 60)
        ])

推荐答案

交换评论后，您需要执行许多不同的任务.

After exchanging comments, you have a number of different tasks to work on.

但是，举例来说， 一个 用于显示/隐藏中间"视图并使底视图向上/向下移动的方法是，尝试.看起来像这样:

But, to give you an example of one approach to showing / hiding the "middle" view and having the bottom view move up / down, here is something to try. It will look like this:

点击顶部(红色)视图将隐藏中间(绿色)视图，并将底部(蓝色)视图向上滑动.再次点击顶部(红色)视图将向下滑动底部(蓝色)视图并显示中间(绿色)视图.

Tapping the top (red) view will hide the middle (green) view and slide the bottom (blue) view up. Tapping the top (red) view again will slide the bottom (blue) view down and show the middle (green) view.

这是通过为底部"视图创建 两个 顶部约束来完成的.一个相对于顶"视图的底部，另一个相对于中间"视图的底部，具有不同的.priority值.

This is done by creating two top constraints for the Bottom view. One relative to the bottom of the Top view, and the other relative to the bottom of the Middle view, with different .priority values.

示例代码相当简单，注释应该使事情变得清楚.全部通过代码完成-没有@IBOutlet或@IBAction连接-因此，只需创建一个新的视图控制器并将其自定义类分配给AnimTestViewController:

The example code is fairly straight-forward, and the comments should make things clear. All done via code - no @IBOutlet or @IBAction connections - so just create a new view controller and assign its custom class to AnimTestViewController:

class DropDownView: UIView {

}

class AnimTestViewController: UIViewController {

    let scrollView: UIScrollView = {
        let v = UIScrollView()
        return v
    }()

    let chooseScheduleDropDown: DropDownView = {
        let v = DropDownView()
        return v
    }()

    let entryView: DropDownView = {
        let v = DropDownView()
        return v
    }()

    let chooseDateView: DropDownView = {
        let v = DropDownView()
        return v
    }()

    var visibleConstraint: NSLayoutConstraint = NSLayoutConstraint()
    var hiddenConstraint: NSLayoutConstraint = NSLayoutConstraint()

    override func viewDidLoad() {
        super.viewDidLoad()

        [chooseScheduleDropDown, entryView, chooseDateView].forEach {
            v in
            v.translatesAutoresizingMaskIntoConstraints = false
            scrollView.addSubview(v)
        }

        scrollView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(scrollView)

        let g = view.safeAreaLayoutGuide

        let topPadding: CGFloat = 20.0

        // chooseDateView top anchor when entryView is visible
        visibleConstraint = chooseDateView.topAnchor.constraint(equalTo: entryView.bottomAnchor, constant: topPadding)

        // chooseDateView top anchor when entryView is hidden
        hiddenConstraint = chooseDateView.topAnchor.constraint(equalTo: chooseScheduleDropDown.bottomAnchor, constant: topPadding)

        // we will start with entryView visible
        visibleConstraint.priority = .defaultHigh
        hiddenConstraint.priority = .defaultLow

        NSLayoutConstraint.activate([

            scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
            scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -40.0),
            scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),

            chooseScheduleDropDown.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
            chooseScheduleDropDown.topAnchor.constraint(equalTo: scrollView.topAnchor),
            chooseScheduleDropDown.widthAnchor.constraint(equalToConstant: 285),
            chooseScheduleDropDown.heightAnchor.constraint(equalToConstant: 60),

            entryView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
            entryView.topAnchor.constraint(equalTo: chooseScheduleDropDown.bottomAnchor, constant: topPadding),
            entryView.widthAnchor.constraint(equalToConstant: 285),
            entryView.heightAnchor.constraint(equalToConstant: 60),

            chooseDateView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),

            //chooseDateView.topAnchor.constraint(equalTo: entryView.bottomAnchor, constant: topPadding),
            visibleConstraint,
            hiddenConstraint,

            chooseDateView.widthAnchor.constraint(equalToConstant: 285),
            chooseDateView.heightAnchor.constraint(equalToConstant: 60),

        ])

        //entryView.isHidden = true

        chooseScheduleDropDown.backgroundColor = .red
        entryView.backgroundColor = .green
        chooseDateView.backgroundColor = .blue

        let tap = UITapGestureRecognizer(target: self, action: #selector(toggleEntryView(_:)))
        chooseScheduleDropDown.addGestureRecognizer(tap)

    }

    @objc func toggleEntryView(_ sender: UITapGestureRecognizer) -> Void {
        print("tapped")

        // if entryView IS hidden we want to
        //  un-hide entryView
        //  animate alpha to 1.0
        //  animate chooseDateView down

        // if entryView is NOT hidden we want to
        //  animate alpha to 0.0
        //  animate chooseDateView up
        //  hide entryView when animation is finished

        let animSpeed = 0.5

        if entryView.isHidden {

            entryView.isHidden = false
            hiddenConstraint.priority = .defaultLow
            visibleConstraint.priority = .defaultHigh

            UIView.animate(withDuration: animSpeed, animations: {
                self.entryView.alpha = 1.0
                self.view.layoutIfNeeded()
            }, completion: { _ in
            })

        } else {

            visibleConstraint.priority = .defaultLow
            hiddenConstraint.priority = .defaultHigh

            UIView.animate(withDuration: animSpeed, animations: {
                self.entryView.alpha = 0.0
                self.view.layoutIfNeeded()
            }, completion: { _ in
                self.entryView.isHidden = true
            })

        }

    }

}

这篇关于如何以编程方式设置内容拥抱和压缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！