7.3_在容器视图内切换子视图

在容器视图内切换子视图，是构建动态用户界面的一个关键技巧。你可以通过动画平滑地替换容器视图中的子视图，从而提升用户体验。让我们一起探索如何实现这一功能！🚀

创建容器视图

首先，你需要创建一个容器视图。这个视图将作为其他子视图的父视图。你可以使用 UIView 类来创建容器视图，并设置其 frame 和其他属性。例如：

swift

let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
containerView.backgroundColor = .lightGray
view.addSubview(containerView)

添加初始子视图

接下来，向容器视图添加一个初始子视图。这个子视图将是用户首先看到的视图。你可以创建任何类型的视图，例如 UILabel 或 UIImageView，并将其添加到容器视图中。

swift

let firstView = UIView(frame: containerView.bounds)
firstView.backgroundColor = .blue
containerView.addSubview(firstView)

创建切换子视图的函数

现在，创建一个函数来切换容器视图中的子视图。这个函数将接受一个新的子视图作为参数，并使用 UIView.transition(with:duration:options:animations:completion:) 方法来执行过渡动画。

swift

func switchView(to newView: UIView) {
    UIView.transition(with: containerView,
                      duration: 0.5,
                      options: .transitionCrossDissolve,
                      animations: {
                        containerView.subviews.forEach { $0.removeFromSuperview() }
                        containerView.addSubview(newView)
                      }, completion: nil)
}

这个函数做了以下几件事：

使用 containerView.subviews.forEach { $0.removeFromSuperview() } 移除容器视图的所有现有子视图。
将新的子视图添加到容器视图中。
使用 .transitionCrossDissolve 选项创建一个淡入淡出的过渡效果。✨

调用切换函数

最后，调用 switchView(to:) 函数来切换子视图。你可以通过按钮点击或其他用户交互来触发这个函数。例如：

swift

let secondView = UIView(frame: containerView.bounds)
secondView.backgroundColor = .red

let button = UIButton(frame: CGRect(x: 0, y: 250, width: 200, height: 50))
button.setTitle("Switch View", for: .normal)
button.addTarget(self, action: #selector(switchButtonTapped), for: .touchUpInside)
view.addSubview(button)

@objc func switchButtonTapped() {
    switchView(to: secondView)
}

通过以上步骤，你就可以在容器视图内平滑地切换子视图了！🎉

7.3_在容器视图内切换子视图 ​

创建容器视图 ​

添加初始子视图 ​

创建切换子视图的函数 ​

调用切换函数 ​

更多过渡选项 ​

7.3_在容器视图内切换子视图

创建容器视图

添加初始子视图

创建切换子视图的函数

调用切换函数

更多过渡选项