Создание компонентного вью SensorView

Когда я занимался разработкой своего последнего проекта, я столкнулся с задачей создания удобного и интуитивно понятного интерфейса для отображения и переключения данных с физических датчиков по анализу качества окружающей среды. В этой статье я использую в качестве примеров параметры «Качество воздуха» и «УФ-индекс». Я не буду вдаваться в подробности работы с MapKit и маркерами, но пишу об этом для введения в контекст.

Предполагается, что с помощью этого компонента можно будет переключать значения, чтобы отображать разные параметры на маркерах карты. Я назвал компонент SensorView. Ниже я предоставлю код элемента целиком, но также оставляю ссылку на репозиторий проекта.

Мне был нужен аналог контекстного меню, но ТЗ требовало, чтобы появление опций появлялось не в отдельном нативном вью. Это должно было работать так: при нажатии на кнопку она разворачивается вниз, предлагая выбрать параметр или нажать на инфокнопку «What is this».

В этой статье я расскажу о том, как я создал компонентный вью с помощью UIKit в коде без использования Сториборда. Вот какие компоненты я использовал:

Переменные:

• Константы для размеров: Здесь мы определяем размеры, которые будем использовать для размещения и стилизации наших элементов интерфейса.

• Основная и второстепенная UIStackView: Эти элементы используются для группировки и вертикального размещения кнопок. Стеки было удобно использовать, потому что при параметре .isHidden = true у кнопок (кнопки скрыты) StackView автоматически сворачивается.

• Кнопки: Здесь мы создаём основную кнопку, которая отображает текущий параметр, а также отвечает за активацию меню, кнопку для отображения качества воздуха, кнопку для отображения УФ-индекса, информационную кнопку и круглую кнопку для отображения пиктограммы текущего параметра. Сейчас она не отрабатывает событий.

Функции:

• setupViews(): Эта функция отвечает за добавление всех элементов интерфейса на главное представление и их базовую настройку.

• setupConstraints(): Здесь мы устанавливаем ограничения для всех элементов интерфейса, определяя их положение и размеры относительно друг друга и главного представления.

• createButton(...): Это универсальная функция для создания кнопок с различными свойствами, что позволяет избежать дублирования кода при создании каждой новой кнопки.

Отработка событий:

• Нажатие на основную кнопку: Функция mainButtonTapped() вызывается, когда пользователь нажимает на основную кнопку, что приводит к разворачиванию или сворачиванию меню.

• Нажатие на кнопку качества воздуха: Функция airQualityButtonTapped() вызывается, когда пользователь выбирает параметр «Качество воздуха».

• Нажатие на кнопку УФ-индекса: Функция uvIndexButtonTapped() активируется при выборе параметра «УФ-индекс».

Вот код этого элемента с моими комментариями:

import UIKit import SnapKit  // Перечисление для определения текущего параметра enum Parameter { case airQuality case uvIndex }  // Основной класс представления датчика class SensorView: UIView { // Структура для определения размеров и констант макета struct Layout {     static let screenWidth = UIScreen.main.bounds.width }  // Текущий выбранный параметр var currentParameter: Parameter = .airQuality  // Основной вертикальный stack view let primaryStackView: UIStackView = {     let stack = UIStackView()     stack.backgroundColor = .white     stack.axis = .vertical     stack.layer.cornerRadius = 26     let insets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 15)     stack.layoutMargins = insets     stack.isLayoutMarginsRelativeArrangement = true          return stack }()  // Второстепенный вертикальный stack view let secondaryStackView: UIStackView = {     let stack = UIStackView()     stack.backgroundColor = .white     stack.axis = .vertical     let insets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)     stack.layoutMargins = insets     stack.isLayoutMarginsRelativeArrangement = true     return stack }()  // Главная кнопка, показывающая текущий параметр private lazy var mainButton: UIButton = {     let button: UIButton = createButton(title: "Air Quality".uppercased(), action: #selector(mainButtonTapped), height: 58, target: self)     button.setImage(UIImage.init(systemName: "chevron.down"), for: .normal)     button.contentHorizontalAlignment = .left     button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: -10)     button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 0)     return button }()  // Кнопка для выбора качества воздуха private lazy var airQualityButton: UIButton = {     let button = createButton(title: "Air Quality", action: #selector(airQualityButtonTapped), height: 45, target: self)     button.isHidden = true     button.contentHorizontalAlignment = .leading     button.setImage(UIImage.init(systemName: "wind"), for: .normal)     button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 50, bottom: 0, right: 0)     button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0)     return button }()  // Кнопка для выбора индекса ультрафиолетового излучения private lazy var uvIndexButton: UIButton = {     let button = createButton(title: "UV index", action: #selector(uvIndexButtonTapped), height: 45, target: self)     button.isHidden = true     button.contentHorizontalAlignment = .leading     button.setImage(UIImage.init(systemName: "sun.max.fill"), for: .normal)     button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 50, bottom: 0, right: 0)     button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0)     return button }()  // Кнопка для вывода дополнительной информации private lazy var infoButton: UIButton = {     let button = createButton(title: "What is this?", action: #selector(mainButtonTapped), height: 58, target: self)     button.isHidden = true          if let currentTitle = button.title(for: .normal) {         let attributes: [NSAttributedString.Key: Any] = [             .underlineStyle: NSUnderlineStyle.single.rawValue         ]                  let attributedTitle = NSAttributedString(string: currentTitle, attributes: attributes)         button.setAttributedTitle(attributedTitle, for: .normal)     }          return button }()  // Круглая кнопка для визуализации текущего параметра private lazy var roundButton: UIButton = {     let button = UIButton()     let roundButtonDiameter: CGFloat = 75     button.backgroundColor = .cyan     button.layer.cornerRadius = roundButtonDiameter / 2     button.widthAnchor.constraint(equalToConstant: roundButtonDiameter).isActive = true     button.heightAnchor.constraint(equalToConstant: roundButtonDiameter).isActive = true     button.setImage(UIImage.init(systemName: "wind"), for: .normal)     return button }()  // Инициализатор init() {     super.init(frame: .zero)          setupViews()     setupConstraints() }  required init?(coder: NSCoder) {     fatalError("init(coder:) has not been implemented") }  // Метод для настройки представлений func setupViews() {     self.addSubview(primaryStackView)     primaryStackView.addArrangedSubview(mainButton)     primaryStackView.addArrangedSubview(secondaryStackView)     secondaryStackView.addArrangedSubview(airQualityButton)     secondaryStackView.addArrangedSubview(uvIndexButton)     primaryStackView.addArrangedSubview(infoButton)     self.addSubview(roundButton)      }  // Метод для настройки ограничений func setupConstraints() {     primaryStackView.snp.makeConstraints { make in         make.top.bottom.right.left.equalToSuperview().inset(30)     }          roundButton.snp.makeConstraints { make in         make.centerY.equalTo(mainButton)         make.right.equalTo(primaryStackView).offset(20)     } }  // Метод для создания кнопок, чтобы не копировать код private func createButton(title: String, action: Selector, height: CGFloat, target: Any) -> UIButton {     let button = UIButton()     button.setTitle(title, for: .normal)     button.setTitleColor(.black, for: .normal)     button.backgroundColor = .clear     button.layer.shadowColor = UIColor.black.cgColor     button.layer.shadowOffset = CGSize(width: 0, height: 2)     button.layer.shadowOpacity = 0.2     button.layer.shadowRadius = 4     button.addTarget(target, action: action, for: .touchUpInside)     button.widthAnchor.constraint(equalToConstant: Layout.screenWidth * 0.6).isActive = true     button.heightAnchor.constraint(equalToConstant: height).isActive = true     return button }  // Действие при нажатии на главную кнопку @objc private func mainButtonTapped() {     let areButtonsHidden = airQualityButton.isHidden          airQualityButton.isHidden.toggle()     uvIndexButton.isHidden.toggle()     infoButton.isHidden.toggle()          let image = areButtonsHidden ? UIImage(systemName: "chevron.up") : UIImage(systemName: "chevron.down")     mainButton.setImage(image, for: .normal) }  // Действие при нажатии на кнопку качества воздуха @objc private func airQualityButtonTapped() {     mainButton.setTitle("Air Quality".uppercased(), for: .normal)     airQualityButton.isHidden = true     uvIndexButton.isHidden = true     infoButton.isHidden = true     roundButton.setImage(UIImage.init(systemName: "wind"), for: .normal)     mainButton.setImage(UIImage.init(systemName: "chevron.down"), for: .normal) }  // Действие при нажатии на кнопку индекса ультрафиолетового излучения @objc private func uvIndexButtonTapped() {     mainButton.setTitle("UV index".uppercased(), for: .normal)     airQualityButton.isHidden = true     uvIndexButton.isHidden = true     infoButton.isHidden = true     roundButton.setImage(UIImage.init(systemName: "sun.max.fill"), for: .normal)     mainButton.setImage(UIImage.init(systemName: "chevron.down"), for: .normal) } }