iOS 父视图有两个子视图填充

原创

mob64ca12dc54c5 2023-10-14 09:09:10 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12dc54c5的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS 父视图有两个子视图填充

在iOS开发中，我们经常需要在一个父视图上添加多个子视图，同时保证这些子视图能够填充满整个父视图。本文将介绍一种常见的方法，使用Auto Layout来实现父视图有两个子视图填充的效果。

1. 准备工作

在开始之前，我们需要创建一个新的iOS项目，并在故事板中添加一个UIView作为父视图，再添加两个UIView作为子视图。我们可以选择使用Interface Builder来完成这些操作，也可以通过代码来创建这些视图。

// 创建父视图
let parentView = UIView()
parentView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(parentView)

// 创建子视图1
let subview1 = UIView()
subview1.translatesAutoresizingMaskIntoConstraints = false
parentView.addSubview(subview1)

// 创建子视图2
let subview2 = UIView()
subview2.translatesAutoresizingMaskIntoConstraints = false
parentView.addSubview(subview2)

这里我们将父视图和子视图都设置为不使用Auto Layout，并且将子视图添加到父视图中。

2. 添加约束

接下来，我们需要添加约束来实现父视图中两个子视图填充的效果。我们可以使用NSLayoutConstraint类来创建和添加约束。

首先，我们需要添加父视图的约束，使其填充整个屏幕。

NSLayoutConstraint.activate([
    parentView.topAnchor.constraint(equalTo: view.topAnchor),
    parentView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    parentView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    parentView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

然后，我们需要添加子视图1的约束，使其填充父视图的一半。

NSLayoutConstraint.activate([
    subview1.topAnchor.constraint(equalTo: parentView.topAnchor),
    subview1.leadingAnchor.constraint(equalTo: parentView.leadingAnchor),
    subview1.trailingAnchor.constraint(equalTo: parentView.trailingAnchor),
    subview1.bottomAnchor.constraint(equalTo: parentView.centerYAnchor)
])

最后，我们需要添加子视图2的约束，使其填充父视图的另一半。

NSLayoutConstraint.activate([
    subview2.topAnchor.constraint(equalTo: parentView.centerYAnchor),
    subview2.leadingAnchor.constraint(equalTo: parentView.leadingAnchor),
    subview2.trailingAnchor.constraint(equalTo: parentView.trailingAnchor),
    subview2.bottomAnchor.constraint(equalTo: parentView.bottomAnchor)
])

3. 运行效果

添加完约束后，我们可以运行项目，查看父视图中两个子视图填充的效果。

func viewDidLoad() {
    super.viewDidLoad()
    
    // ... 添加约束代码
    
    // 设置子视图的背景颜色以便观察效果
    subview1.backgroundColor = UIColor.red
    subview2.backgroundColor = UIColor.blue
}

运行项目后，我们会看到父视图被两个子视图填充，上半部分为红色，下半部分为蓝色。