Реализация пользовательского интерфейса — всплывающее окно подтверждения

В предыдущий пост, я поделился с вами тем, как показать анимированное всплывающее окно, и объяснил, как настроить всплывающее окно. В этом посте я рассказываю, как использую всплывающее окно в своих проектах с подтверждением и информационным оповещением.
Информационное всплывающее окно используется для предупреждения пользователя о некоторой важной информации, такой как эта

Оповещение о подтверждении очень полезно, чтобы предупредить пользователя о следующем действии, например, подтвердить удаление фотографии, подтвердить запрос на снятие средств… В этом посте я расширим knPopup к knConfirmation для отображения всплывающего окна подтверждения.

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

class knConfirmation: knPopup {
    private let iconImgView = UIMaker.makeImageView()
    let titleLabel = UIMaker.makeLabel(font: UIFont.boldSystemFont(ofSize: 18),
                                    color: UIColor.darkGray, numberOfLines: 2,
                                    alignment: .center)
    let contentLabel = UIMaker.makeLabel(font: UIFont.systemFont(ofSize: 15),
                                    color: UIColor.lightGray, numberOfLines: 0,
                                    alignment: .center)
    private let stack = UIMaker.makeStackView()
    private let cancelButton = UIMaker.makeButton(titleColor: .darkGray,
                                        font: UIFont.systemFont(ofSize: 15),
                                        cornerRadius: 27,
                                        borderWidth: 1,
                                        borderColor: .darkGray)
    private let buttonStack = UIMaker.makeStackView(axis: .horizontal, distributon: UIStackView.Distribution.fill, alignment: UIStackView.Alignment.fill, space: 16)

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
}

Всплывающее окно подтверждения требует:

• 1 значок (необязательно)
• 2 метки: заголовок (необязательно), содержание
• 2 кнопки: 1 для действия «принять», 1 для действия «отклонить» (необязательно). У нас есть okButton в knPopupпросто нужен еще один для действия отклонения
• 2 вида стека: 1 для 2 кнопок, 1 для всех элементов управления

Мы настроим автоматическую раскладку для всех элементов управления по коду в setupView функция

override func setupView() {
    // (1)
    buttonStack.addViews(cancelButton, okButton)
    cancelButton.size(toView: okButton)
    okButton.vertical(toView: buttonStack)
    cancelButton.centerY(toView: okButton)

    // (2)
    let spaceView = UIMaker.makeView()
    spaceView.height(12)

    stack.addViews(iconImgView, titleLabel, contentLabel, spaceView, buttonStack)
    iconImgView.square(edge: 56)
    iconImgView.centerX(toView: stack)
    titleLabel.horizontal(toView: stack, space: 16)
    contentLabel.horizontal(toView: stack, space: 16)
    buttonStack.horizontal(toView: stack, space: 16)

    // (3)
    container.addSubview(stack)
    stack.fill(toView: container, space: UIEdgeInsets(top: 16, bottom: 16))

    okButton.addTarget(self, action: #selector(didSelectOK), for: .touchUpInside)
    cancelButton.addTarget(self, action: #selector(dismiss), for: .touchUpInside)
}

(1)

• buttonStack это UIStackViewпоэтому мы не можем addSubviews как обычно, но придется addArrangedSubview. Я расширяю новую функцию addViews чтобы сократить имя.
• buttonStack содержит кнопку, поэтому, когда вам не нужна кнопка отмены, вы можете удалить ее из buttonStackа также okButton автоматически заполнить superView. Вот почему я выбираю UIStackView для этого пользовательского интерфейса.

(2)

• В stackView вы не можете изменить конкретное расстояние между двумя представлениями, поэтому я сделал этот трюк. Вставьте космический вид с высотой, которую я хочу.

(3)

• Нам нужно добавить stack к container. container настроен на анимацию при появлении/исчезновении. Так что нам больше не нужно заботиться об анимации.

Динамическое отображение того, что вы хотите

В некоторых всплывающих окнах вам нужно показать значок, чтобы они были красочными. Другим не нужен заголовок и кнопка отмены. Мы будем динамически инициализировать все, что хотим.

init(icon: UIImage? = nil, title: String? = nil, content: String, okTitle: String? = nil, cancelTitle: String? = nil) {
    super.init(frame: .zero)
    set(icon: icon, title: title, content: content, okTitle: okTitle, cancelTitle: cancelTitle)
}

private func set(icon: UIImage? = nil, title: String? = nil, content: String, okTitle: String? = nil, cancelTitle: String? = nil) {
    if icon == nil {
        iconImgView.removeFromSuperview()
    } else {
        iconImgView.image = icon
    }

    if title == nil {
        titleLabel.removeFromSuperview()
    } else {
        titleLabel.text = title
    }

    contentLabel.text = content
    if okTitle != nil {
        okButton.setTitle(okTitle, for: .normal)
    }

    if cancelTitle == nil {
        cancelButton.removeFromSuperview()
    } else {
        cancelButton.setTitle(cancelTitle, for: .normal)
    }
}

Просто пройти nil или удалите этот параметр из init функция. Какой параметр равен нулю, соответствующий элемент управления будет удален из пользовательского интерфейса.

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