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

如何为ViewController上下部分设置两种纯色背景(非渐变)

实现ViewController上下分块纯色背景的方案

是否必须使用渐变系统?

不需要,你有两种更直接的实现方式:要么添加两个纯色子视图,要么调整渐变层参数实现无过渡的硬分界效果。

具体实现方法

方法1:添加两个纯色子视图(逻辑最简单)

直接在主视图上添加两个分别占据上下区域的子视图,各自设置背景色即可,适合需要明确分界的场景:

func setTwoColorBackground() {
    // 顶部纯色视图
    let topView = UIView()
    topView.backgroundColor = .black
    topView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(topView)
    
    // 底部纯色视图
    let bottomView = UIView()
    bottomView.backgroundColor = backgroundGray // 你的自定义灰色
    bottomView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bottomView)
    
    // 配置自动布局约束,让两个视图平分屏幕高度
    NSLayoutConstraint.activate([
        // 顶部视图约束:顶、左、右对齐父视图,底部对齐父视图中点
        topView.topAnchor.constraint(equalTo: view.topAnchor),
        topView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        topView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        topView.bottomAnchor.constraint(equalTo: view.centerYAnchor),
        
        // 底部视图约束:顶对齐父视图中点,左、右、底对齐父视图
        bottomView.topAnchor.constraint(equalTo: view.centerYAnchor),
        bottomView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        bottomView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        bottomView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])
}

如果需要自定义分界位置(比如顶部占1/3高度),把topView.bottomAnchor的约束换成高度约束即可,例如:topView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 1/3)。

方法2:调整渐变层实现硬分界(无需新增子视图)

如果想继续用CAGradientLayer,只需通过locations参数让颜色直接切换,消除过渡效果:

func setTwoColorGradientBackground() {
    let colorTop = UIColor.black.cgColor
    let colorBottom = backgroundGray.cgColor
                
    let gradientLayer = CAGradientLayer()
    // 重复颜色,让同一颜色占据指定区间
    gradientLayer.colors = [colorTop, colorTop, colorBottom, colorBottom]
    // 设置位置:前两个颜色在0.5位置结束,后两个从0.5开始,实现无过渡分界
    gradientLayer.locations = [0.0, 0.5, 0.5, 1.0]
    // 设为垂直方向渐变(从顶部到底部)
    gradientLayer.startPoint = CGPoint(x: 0, y: 0)
    gradientLayer.endPoint = CGPoint(x: 0, y: 1)
    gradientLayer.frame = view.bounds
    
    view.layer.insertSublayer(gradientLayer, at: 0)
}

注意:如果视图尺寸变化(比如屏幕旋转),需要重新设置渐变层的frame,或者监听视图的layoutSubviews方法更新图层尺寸,保证背景铺满整个视图。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.19 15:39:56