Вот как вы можете получить вышеуказанный интерфейс, используя код,
1. Создайте UIView's
с соответствующими backgroundColors
,
let v1 = UIView()
v1.backgroundColor = #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1)
v1.translatesAutoresizingMaskIntoConstraints = false
let v2 = UIView()
v2.backgroundColor = #colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)
v2.translatesAutoresizingMaskIntoConstraints = false
let v3 = UIView()
v3.backgroundColor = #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)
v3.translatesAutoresizingMaskIntoConstraints = false
let v4 = UIView()
v4.backgroundColor = #colorLiteral(red: 0.5058823824, green: 0.3372549117, blue: 0.06666667014, alpha: 1)
v4.translatesAutoresizingMaskIntoConstraints = false
let v5 = UIView()
v5.backgroundColor = #colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)
v5.translatesAutoresizingMaskIntoConstraints = false
let v6 = UIView()
v6.backgroundColor = #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1)
v6.translatesAutoresizingMaskIntoConstraints = false
let v7 = UIView()
v7.backgroundColor = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
v7.translatesAutoresizingMaskIntoConstraints = false
let v8 = UIView()
v8.backgroundColor = #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)
v8.translatesAutoresizingMaskIntoConstraints = false
let v9 = UIView()
v9.backgroundColor = #colorLiteral(red: 0.06274510175, green: 0, blue: 0.1921568662, alpha: 1)
v9.translatesAutoresizingMaskIntoConstraints = false
2. Создайте horizontalStackViews
с созданным выше UIViews
. Не забудьте установить distribution
как fillEqually
let hStack1 = UIStackView(arrangedSubviews: [v1, v2, v3])
hStack1.axis = .horizontal
hStack1.distribution = .fillEqually
hStack1.translatesAutoresizingMaskIntoConstraints = false
let hStack2 = UIStackView(arrangedSubviews: [v4, v5, v6])
hStack2.axis = .horizontal
hStack2.distribution = .fillEqually
hStack2.translatesAutoresizingMaskIntoConstraints = false
let hStack3 = UIStackView(arrangedSubviews: [v7, v8, v9])
hStack3.axis = .horizontal
hStack3.distribution = .fillEqually
hStack3.translatesAutoresizingMaskIntoConstraints = false
3. Создать verticalStackView
, используя выше созданного horizontalStackViews
и установите distribution
в качестве fillEqually
, а также
let vStack = UIStackView(arrangedSubviews: [hStack1, hStack2, hStack3])
vStack.axis = .vertical
vStack.distribution = .fillEqually
vStack.translatesAutoresizingMaskIntoConstraints = false
4. Добавьте vStack
controller's
view
,
self.view.addSubview(vStack)
5. Добавьте ниже constraints
к vStack
,
vStack.heightAnchor.constraint(equalToConstant: 200).isActive = true
vStack.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
vStack.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
vStack.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
Снимок экрана: