如何为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
相关产品推荐
相关产品推荐

