swift - Swift-显示带有动画的标题

Question

我对Swift编码有点陌生，我想通过找到一些布局来训练自己，并尝试使用AutoLayout实现它们。
这是我试图实现的屏幕截图
https://i.imgur.com/9yzvnzp.png
这里需要的行为是在滚动时图片会逐渐消失，标题应该设置成这样
https://i.imgur.com/bLhyTGs.png
有人能帮我怎么做吗？
我应该使用滚动视图吗？UITableView？u集合视图？

Answer 1

我正在开发一个类似的应用程序。

所以，你要做的第一件事是为背景创建一个UIView，也就是说，蓝色的部分显示了喷射器。此视图可以占据整个视图控制器。通过UIViewController将其连接到您的IBOutlet并将其命名为backgroundView。
接下来，我们要在UIScrollView上放置一个backgroundView。此滚动视图应限制在超级视图的顶部、底部、前边和后边，以便覆盖整个视图控制器的框架。通过UIScrollView将此UIViewController连接到您的IBOutlet并将其命名为scrollView。另外，确保scrollView的backgroundColor设置为clear。这样，我们就可以在backgroundView下面看到scrollView。
在UIViewController中，您需要将scrollView的委托设置为self内部的viewDidLoad。您的UIViewController代码现在应该如下所示：

class SquirtleViewController: UIViewController {
    @IBOutlet var backgroundView: UIView!
    @IBOutlet var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
    }
}

extension SquirtleViewController: UIScrollViewDelegate {

}

稍后我们将为scrollView设置委托方法。这些将帮助我们知道滚动视图何时开始滚动到SquirtleViewController的顶部。
现在，我们的scrollView有一个清晰的背景，实际上并没有向用户显示任何内容。这就是我们现在想要的。我们希望scrollView的顶部是清晰的，以便我们可以看到它后面的backgroundView，而scrollView的底部是另一个视图，即显示STATS、EVOLUTIONS、MOVES、HP等的“内容视图”。
因此，让我们添加另一个UIView作为scrollView的子视图。通过SquirtleViewController将其连接到IBOutlet并将其命名为contentView。
现在，我们需要在contentView的上边缘和scrollView的上边缘之间创建一个约束。此约束的常数必须等于backgroundView内容的高度。这样，我们的contentView就不会掩盖我们想从backgroundView看到的东西。我们还应该将这个高度保存为backgroundViewContentHeight，以便以后可以引用它。
我们还需要contentView的leading、trailing和bottom约束与它的superview的约束相等，即scrollView。这些不需要通过IBOutlets连接。
此外，给出contentViewaheight和width约束，并通过contentViewHeight将它们分别连接为contentViewWidth和SquirtleViewController。这将帮助我们以后设置IBOutlet的contentSize。
您的代码现在应该如下所示：

class SquirtleViewController: UIViewController {
    @IBOutlet var backgroundView: UIView!
    @IBOutlet var scrollView: UIScrollView!
    @IBOutlet var contentView: UIView!

    //New lines of code
    //Our constraints
    @IBOutlet var contentViewTop: NSLayoutConstraint!
    @IBOutlet var contentViewHeight: NSLayoutConstraint!
    @IBOutlet var contentViewWidth: NSLayoutConstraint!

    var backgroundViewContentHeight = 400

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
    }
}

extension SquirtleViewController: UIScrollViewDelegate {

}

现在，当scrollView布局其子视图时，我们要设置SquirtleViewController和constant的contentViewHeight属性。这将为我们的contentViewWidth设置contentSize。我们希望我们的scrollView只是我们的contentViewWidth宽度的大小。不过，我们的SquirtleViewController的view会有点不同，因为这取决于我们的contentViewHeight子视图的高度。对于这个例子，我们会说constant的contentView应该是1200。代码现在应该如下所示：

class SquirtleViewController: UIViewController {
    @IBOutlet var backgroundView: UIView!
    @IBOutlet var scrollView: UIScrollView!
    @IBOutlet var contentView: UIView!

    //Our constraints
    @IBOutlet var contentViewTop: NSLayoutConstraint!
    @IBOutlet var contentViewHeight: NSLayoutConstraint!
    @IBOutlet var contentViewWidth: NSLayoutConstraint!

    var backgroundViewContentHeight = 400

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
    }

    //New lines of code
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        contentViewWidth.constant = view.frame.width
        contentViewHeight.constant = 1200
    }
}

extension SquirtleViewController: UIScrollViewDelegate {

}

从这里，您可以根据需要将子视图添加到contentViewHeight和constant中，以便显示pokemon（backgroundView）和pokemon的统计信息（contentView）。但是，您仍然需要知道如何根据我们滚动了多少backgroundView来更改contentView的内容。这就是backgroundView帮助我们解决问题的地方。
scrollView中有一个方法，每当我们的UIScrollViewDelegate的UIScrollViewDelegate发生变化时都会调用它。这基本上意味着每次我们更改scrollView滚动的量时，都会调用此方法。
在这个方法内部，我们可以交叉引用我们滚动的数量和背景视图的高度。当我们的contentOffset.y'sscrollView接近我们的scrollView内容的高度时，我们可以淡出喷射器的图像并淡入到一个简单地称为“喷射器”的contentOffset.y中（如您的示例）。
因此，在您的情况下，我建议添加一个backgroundView的喷射器作为UILabel的子视图，并通过UIImage作为contentView连接它。IBOutlet的框架应该部分位于pokemonImageView之外（如您的示例中所示）。如果这样做，请确保pokemonImageView的contentView属性设置为contentView。
我还将添加一个clipsToBounds作为false的子视图，并通过UILabelasbackgroundView将其连接到SquirtleViewController。当我们的IBOutlet视图加载时，我们应该将pokemonNameLabel设置为零，以便最初隐藏它。
您的代码现在应该如下所示：

class SquirtleViewController: UIViewController {
    @IBOutlet var backgroundView: UIView!

    //New line of code
    @IBOutlet var pokemonNameLabel: UILabel!
    @IBOutlet var scrollView: UIScrollView!
    @IBOutlet var contentView: UIView!

    //New line of code
    @IBOutlet var pokemonImageView: UIImageView!

    //Our constraints
    @IBOutlet var contentViewTop: NSLayoutConstraint!
    @IBOutlet var contentViewHeight: NSLayoutConstraint!
    @IBOutlet var contentViewWidth: NSLayoutConstraint!

    var backgroundViewContentHeight = 400

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self

        //New line of code
        pokemonNameLabel.alpha = 0
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        contentViewWidth.constant = view.frame.width
        contentViewHeight.constant = 1200
    }
}

extension SquirtleViewController: UIScrollViewDelegate {

}

现在我们只需要在类扩展中添加SquirtleViewController方法。这个方法将告诉我们pokemonNameLabel.alpha的scrollViewDidScroll属性，以便我们知道滚动了多少。随着这个数字的增加，我们的α应该减少到零，我们的α应该增加到一。
在这个方法中，我将把我们的scrollView除以contentOffset.y的高度减去pokemonImageView的高度。然后我们可以使用这个十进制设置我们各自的字母pokemonNameLabel和scrollView.contentOffset.y。
您的代码现在应该如下所示：

class SquirtleViewController: UIViewController {
    @IBOutlet var backgroundView: UIView!

    //New line of code
    @IBOutlet var pokemonNameLabel: UILabel!
    @IBOutlet var scrollView: UIScrollView!
    @IBOutlet var contentView: UIView!

    //New line of code
    @IBOutlet var pokemonImageView: UIImageView!

    //Our constraints
    @IBOutlet var contentViewTop: NSLayoutConstraint!
    @IBOutlet var contentViewHeight: NSLayoutConstraint!
    @IBOutlet var contentViewWidth: NSLayoutConstraint!

    var backgroundViewContentHeight = 400

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self

        //New line of code
        pokemonNameLabel.alpha = 0
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        contentViewWidth.constant = view.frame.width
        contentViewHeight.constant = 1200
    }
}

extension SquirtleViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        //Subtracting contentView.frame.height from scrollView.frame.height
        let alphaDecimal = scrollView.contentOffset.y / (backgroundViewContentHeight - pokemonNameLabel.frame.height)
        pokemonNameLabel.alpha = alphaDecimal
        pokemonImageView.alpha = 1 - alphaDecimal
    }
}

现在，当我们向上滚动，可以看到的backgroundView收缩时，我们的pokemonNameLabel将淡出，而我们的pokemonImageView将淡入。两者之间会有一个点α值为0.5。您可以随意使用这个pokemonNameLabel方法，使其最适合您。