Swift-显示带有动画的标题

Question

我是Swift编码的新手，我想通过寻找一些布局来训练自己，并尝试使用AutoLayout来实现它们。

这是我尝试实现的屏幕截图

https://i.imgur.com/9yzvnzp.png

这里需要的行为是，滚动时图片应消失，标题应设置为

https://i.imgur.com/bLhyTGs.png

有人可以帮助我该怎么做吗？ 我应该使用ScrollView吗？ UITableView？ UICollectionView？

Answer 1

我实际上是在做类似事情的应用程序。

因此，您要做的第一件事是为背景创建一个UIView，即显示Squirtle的蓝色部分。该视图可以占用整个视图控制器。通过UIViewController将其连接到您的IBOutlet，并命名为backgroundView。

接下来，我们要在UIScrollView上放置backgroundView。此滚动视图应限制在超级视图的顶部，底部，前边缘和后边缘，以使其覆盖整个视图控制器的框架。通过UIScrollView将此UIViewController连接到您的IBOutlet，并将其命名为scrollView。另外，请确保将scrollView的{​​{1}}设置为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的{​​{1}}，contentView和leading约束，以等于其父视图的约束，即trailing。这些不需要通过bottom连接。

还要给scrollView一个IBOutlet和contentView约束，并将它们分别作为height和width通过{{1 }}。这将有助于我们稍后设置contentViewHeight中的contentViewWidth。

您的代码现在应如下所示：

SquirtleViewController

现在，当IBOutlet布置其子视图时，我们将要设置contentSize和scrollView的{​​{1}}属性。这将为我们的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 { } 设置SquirtleViewController。我们希望constant只是contentViewHeight的{​​{1}}宽度的大小。我们的contentViewWidth的{​​{1}}会有所不同，因为它取决于我们contentSize的子视图的高度。在此示例中，我们假设scrollView的{​​{1}}应该是1200。代码现在应如下所示：

contentViewWidth

在这里，您可以根据需要在SquirtleViewController和view上添加子视图，以显示神奇宝贝（contentViewHeight）和神奇宝贝的统计信息（{{1} }。但是，您仍然需要知道如何根据我们滚动constant的程度来更改contentView的内容。这就是contentViewHeight帮助我们的地方。

constant中有一个方法，每次我们的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 { } 的{​​{1}}更改时都会调用。这基本上意味着，每次我们更改backgroundView的滚动量时，都会调用此方法。

在此方法内，我们可以交叉引用滚动量和背景视图的高度。当我们的contentView的{​​{1}}接近我们backgroundView内容的高度时，我们可以淡化Squirtle的图像，然后淡出contentView ”（例如您的示例）。

因此，在您的情况下，我建议添加一个backgroundView的Squirtle作为scrollView的子视图，并以UIScrollViewDelegate的形式通过UIScrollViewDelegate进行连接。 scrollView的框架应部分位于contentOffset.y之外（例如您的示例）。如果这样做，请确保将scrollView的{​​{1}}属性设置为scrollView。

我还将添加一个contentOffset.y作为backgroundView的子视图，并以UILabel的形式通过UIImage将其连接到contentView。当IBOutlet的视图加载时，我们应该将pokemonImageView设置为零，以便最初被隐藏。

您的代码现在应如下所示：

pokemonImageView

现在，我们只需要在类扩展内添加contentView方法即可。该方法将告诉我们contentView的{​​{1}}属性，以便我们知道滚动了多少。随着此数字的增加，我们的clipsToBounds的alpha值应减小到零，而我们的false的alpha值应增加到1。

在此方法中，我将UILabel除以backgroundView的高度减去SquirtleViewController的高度。然后，我们可以使用该小数点来设置IBOutlet和pokemonNameLabel的各自的alpha。

您的代码现在应如下所示：

SquirtleViewController

现在，当我们向上滚动并且看到pokemonNameLabel.alpha缩小时，我们的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 { } 将逐渐消失，我们的scrollViewDidScroll将逐渐消失。两者之间的alpha值为0.5。您可以按照自己认为合适的方式使用此scrollView方法，以使其最适合您。