UIStackViewPlayground | Кодементор

UIStackView появился в iOS 9. И с самого начала он мне понравился. UIStackViews позволяют использовать Auto Layout без добавления ограничений Auto Layout. И в большинстве случаев вам удается изменить несколько свойств, чтобы добиться того, чего вы хотите. Однако вам нужно некоторое время, чтобы привыкнуть к этому. Итак, когда была доступна бета-версия iOS 9, я создал Игровая площадка Xcode поэкспериментировать с новыми блестящими UIStackViews.

Сначала я сделал несколько простых макетов, таких как калькулятор и простую ленту Twitter. Но позже я попытался воссоздать внешний вид трамплина с помощью UIStackViews. Вот результат:

Каждое приложение (значок вместе с заголовком) представляет собой одно представление стека.

let appStackView = { (imageName: String, title: String) -> UIStackView in 

  let imageView = UIImageView(image: UIImage(named: imageName))      
  imageView.widthAnchor.constraint(equalToConstant: 60).isActive = true 
  imageView.heightAnchor.constraint(equalToConstant: 60).isActive = true
  
  let subviews = [imageView, labelWithText(title)] 
  let stackView = UIStackView(arrangedSubviews: subviews) 
  stackView.axis = .vertical 
  stackView.distribution = .equalSpacing 
  stackView.spacing = 3 
  return stackView
} 

let calendarStackView = appStackView("calendar", "Calendar")
let photosStackView = appStackView("photos", "Photos")
let mapsStackView = appStackView("maps", "Maps")
let remindersStackView = appStackView("notes", "Reminders")
let healthStackView = appStackView("health", "Health")
let settingsStackView = appStackView("settings", "Settings")
let safariStackView = appStackView("safari", "Safari")

Календарь и приложение «Здоровье» вместе представляют собой стек, а также фотографии и настройки.

let columnStackView = { (views: [UIView]) -> UIStackView in 
  let stackView = UIStackView(arrangedSubviews: views) 
  stackView.axis = .vertical 
  stackView.spacing = 10 
  stackView.distribution = .fillEqually 
  return stackView
} 

let firstColumnStackView = columnStackView([calendarStackView, healthStackView])
let secondColumnStackView = columnStackView([photosStackView, settingsStackView])

Первые два столбца с приложениями и два других приложения помещаются в другое представление стека:

let appsStackView = UIStackView(arrangedSubviews: [firstColumnStackView, secondColumnStackView, mapsStackView, remindersStackView])
appsStackView.distribution = .fillEqually
appsStackView.alignment = .top
appsStackView.spacing = 15

Safari находится в виде стека, и вместе с элементом управления страницей он помещается в другое представление стека. Представление стека с приложениями помещается в другое представление стека вместе с меткой времени:

let topStackView = UIStackView(arrangedSubviews: [timeLabel, appsStackView])
topStackView.axis = .vertical
topStackView.spacing = 5

А затем верхнее представление стека помещается в другое представление стека вместе с информационной меткой и представлением стека внизу с Safari и элементом управления страницей. И это последнее представление стека добавляется к представлению в качестве подпредставления и упорядочивается с использованием обычных ограничений автоматического макета.

let mainStackView = UIStackView(arrangedSubviews: [topStackView, infoLabel, safariColumnStackView])
mainStackView.translatesAutoresizingMaskIntoConstraints = false
mainStackView.axis = .vertical
mainStackView.distribution = .equalSpacing
mainStackView.alignment = .center 

hostView.addSubview(dockBackgroundView)
hostView.addSubview(mainStackView) 
NSLayoutConstraint.activate( 
  [
    mainStackView.leadingAnchor.constraint(equalTo: hostView.leadingAnchor), 
    mainStackView.trailingAnchor.constraint(equalTo: hostView.trailingAnchor), 
    mainStackView.topAnchor.constraint(equalTo: hostView.topAnchor, constant: 3), 
    mainStackView.bottomAnchor.constraint(equalTo: hostView.bottomAnchor, constant: -3), 
    dockBackgroundView.leadingAnchor.constraint(equalTo: hostView.leadingAnchor), 
    dockBackgroundView.trailingAnchor.constraint(equalTo: hostView.trailingAnchor), 
    dockBackgroundView.bottomAnchor.constraint(equalTo: hostView.bottomAnchor), 
    dockBackgroundView.heightAnchor.constraint(equalToConstant: 95),
  ]
)

Как вы можете видеть в этом посте, представления стека становятся очень мощными, когда вы их вкладываете. Итак, складывайте все вещи!

Следуй за мной на Твиттер и просмотрите другие мои материалы с открытым исходным кодом на Гитхаб.