You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

不使用Storyboard,如何通过代码实现视图内嵌套控件?

纯代码实现iOS控件嵌套(无需Storyboard)

当然可以!完全不用依赖Storyboard,纯代码不仅能实现控件嵌套,反而能给你更灵活的控制权——把两个UITextField放进一个UIView里是非常基础且容易实现的操作,下面给你一步步演示:

核心思路

所有UIKit控件都是UIView的子类,只要通过addSubview(_:)方法,就能把任意子控件添加到父视图中,再通过AutoLayout设置好它们的位置和大小,就能完美呈现。

完整代码示例

以在UIViewController中实现为例,你可以在viewDidLoad方法里添加以下代码:

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white
    
    // 1. 创建容器UIView
    let containerView = UIView()
    containerView.backgroundColor = .lightGray
    containerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(containerView)
    
    // 2. 创建第一个UITextField
    let firstNameField = UITextField()
    firstNameField.placeholder = "请输入名字"
    firstNameField.borderStyle = .roundedRect
    firstNameField.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(firstNameField)
    
    // 3. 创建第二个UITextField
    let lastNameField = UITextField()
    lastNameField.placeholder = "请输入姓氏"
    lastNameField.borderStyle = .roundedRect
    lastNameField.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(lastNameField)
    
    // 4. 设置AutoLayout约束(确保控件正确显示)
    NSLayoutConstraint.activate([
        // 容器View的约束:居中,宽度占父视图80%,高度自适应
        containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        containerView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8),
        
        // 第一个输入框的约束:顶部、左右边距,高度固定
        firstNameField.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 16),
        firstNameField.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
        firstNameField.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16),
        firstNameField.heightAnchor.constraint(equalToConstant: 44),
        
        // 第二个输入框的约束:在第一个输入框下方,左右边距,高度固定,底部留边距
        lastNameField.topAnchor.constraint(equalTo: firstNameField.bottomAnchor, constant: 12),
        lastNameField.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
        lastNameField.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16),
        lastNameField.heightAnchor.constraint(equalToConstant: 44),
        lastNameField.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -16)
    ])
}

关键要点解释

  • translatesAutoresizingMaskIntoConstraints = false:必须设置这个属性,关闭系统自动生成的约束,这样我们自定义的AutoLayout才会生效。
  • addSubview(_:):这是实现嵌套的核心方法,调用父视图的这个方法就能把子控件添加进去,子控件会成为父视图的层级一部分。
  • AutoLayout约束:纯代码开发必须手动设置约束,不然控件会默认在(0,0)位置且尺寸为0,导致看不到。上面的约束让容器View居中,两个输入框垂直排列在容器内,适配不同屏幕尺寸。

你完全可以根据自己的需求调整样式、约束和控件属性,纯代码开发的灵活性就是这么强~

内容的提问来源于stack exchange,提问作者ButtahNBred

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 07:24:50