iOS纯代码开发登录页如何实现全屏背景且不遮挡输入控件

你当前布局逻辑的核心问题是：将输入框放在了全屏背景视图的下方，导致背景铺满屏幕时输入框被挤出可视区域。正确的实现逻辑是将背景视图放在视图层级最底部，输入框等交互元素直接叠加在背景视图上层，而非上下排列。

方案1：基于现有Frame布局修改 #

第一步：修正背景视图初始化 #

首先补全背景图片的适配配置，保证图片全屏展示不变形：

private let headerView: UIView = {
    let header = UIView()
    header.clipsToBounds = true
    let backgroundImageView = UIImageView(image: UIImage(named: "camping_background"))
    // 保证图片按比例铺满视图
    backgroundImageView.contentMode = .scaleAspectFill
    backgroundImageView.frame = header.bounds
    // 支持横竖屏自动适配尺寸
    backgroundImageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    header.addSubview(backgroundImageView)
    return header
}()

第二步：调整布局逻辑 #

不再将输入框放在背景视图下方，直接设置输入框在屏幕中的垂直位置：

// 背景保持全屏配置
headerView.frame = CGRect(
    x: 0,
    y: 0.0,
    width: view.width,
    height: view.height
)
view.addSubview(headerView)

// 自定义输入框区域距离屏幕顶部的偏移，可根据设计调整比例或固定值
let inputTopOffset = view.height * 0.6
usernameEmailField.frame = CGRect(
    x: 25,
    y: inputTopOffset,
    width: view.width - 50,
    height: 52.0
)
view.addSubview(usernameEmailField)

passwordField.frame = CGRect(
    x: 25,
    y: usernameEmailField.bottom + 10,
    width: view.width - 50,
    height: 52.0
)
view.addSubview(passwordField)

方案2：AutoLayout实现（推荐适配多尺寸屏幕） #

使用AutoLayout无需手动计算frame，适配不同机型更稳定：

// 添加全屏背景
view.addSubview(headerView)
headerView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    headerView.topAnchor.constraint(equalTo: view.topAnchor),
    headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    headerView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

// 添加用户名输入框
view.addSubview(usernameEmailField)
usernameEmailField.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    usernameEmailField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: view.height * 0.5),
    usernameEmailField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 25),
    usernameEmailField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -25),
    usernameEmailField.heightAnchor.constraint(equalToConstant: 52)
])

// 添加密码输入框
view.addSubview(passwordField)
passwordField.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    passwordField.topAnchor.constraint(equalTo: usernameEmailField.bottomAnchor, constant: 10),
    passwordField.leadingAnchor.constraint(equalTo: usernameEmailField.leadingAnchor),
    passwordField.trailingAnchor.constraint(equalTo: usernameEmailField.trailingAnchor),
    passwordField.heightAnchor.constraint(equalToConstant: 52)
])

额外注意事项 #

• 你代码中的botoom为拼写错误，正确属性为bottom，该错误也会导致布局计算异常
• 若要实现参考图的半透明输入框效果，可给输入框添加透明度：field.backgroundColor = .secondarySystemBackground.withAlphaComponent(0.9)

内容的提问来源于stack exchange，提问作者user16489264