Сделать UITextField снова простым

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

И я уверен, ни один дизайнер не позволит вам использовать дефолтные UITextField. Они будут разрабатывать что-то другое, как показано ниже:

Обычно приходится настраивать UITextField с

Угловой радиус
Граница
Значок слева
Кнопка справа (показать пароль, очень популярная)
Подчеркнуть

Я расскажу вам, как это сделать очень быстро, и вы сможете повторно использовать его где угодно в своих проектах.

Начнем с первого, Corner radius.

extension UIView {
  func setCorner(radius: CGFloat) {
        layer.cornerRadius = radius
        clipsToBounds = true
    }
}

textField.setCorner(radius: 5)

Легко, верно? Иногда вам нужно сделать круглый угол, а не только круглый угол. Вы можете написать так.

extension UIView {
  func circleCorner() {
        superview?.layoutIfNeeded()
        setCorner(radius: frame.height / 2)
    }
}

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

extension UIView {
    func setBorder(width: CGFloat, color: UIColor) {
        layer.borderColor = color.cgColor
        layer.borderWidth = width
    }
}

textField.setBorder(width: 1, color: UIColor.green)

Подобно угловому радиусу, он очень популярен и используется много раз.
Обычно я предлагаю, чтобы ширина границы была 0,5–1 пиксель. Это выглядит очень красиво на любых экранах iPhone.

Мы используем leftView а также rightView свойства UITextField для добавления значка или кнопки.

3.1. Общая функция

extension UITextField {
    enum ViewType {
        case left, right
    }
    
    // (1)
    func setView(_ type: ViewType, with view: UIView) {
        if type == ViewType.left {
            leftView = view
            leftViewMode = .always
        } else if type == .right {
            rightView = view
            rightViewMode = .always
        }
    }
}

(1) — это общая функция для установки представления leftView или же rightView. Это хорошо, но недостаточно удобно для использования.

3.2. Добавить текст как вид

Добавьте эту функцию в UITextField расширение

// (2)
@discardableResult
func setView(_ view: ViewType, title: String, space: CGFloat = 0) -> UIButton {
    let button = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: frame.height))
    button.setTitle(title, for: UIControl.State())
    button.contentEdgeInsets = UIEdgeInsets(top: 4, left: space, bottom: 4, right: space)
    button.sizeToFit()
    setView(view, with: button)
    return button
}

(2) создает кнопку и устанавливает значение leftView/rightView, и вернуть его вам. Затем вы можете отформатировать кнопку, как хотите, изменить цвет, шрифт, установить угол или любой другой.

Параметр space является необязательным. См. пример ниже.

let blueButton = topTextField.setView(.right, title: "Show", space: 8)
blueButton.backgroundColor = .blue

let redButton = bottomTextField.setView(.right, title: "Show")
redButton.backgroundColor = .red

3.3. Добавить изображение как вид

@discardableResult
func setView(_ view: ViewType, image: UIImage?, width: CGFloat = 50) -> UIButton {
    let button = UIButton(frame: CGRect(x: 0, y: 0, width: width, height: frame.height))
    button.setImage(image, for: .normal)
    button.imageView!.contentMode = .scaleAspectFit
    setView(view, with: button)
    return button
}

Это также возвращает UIButton. Почему я возвращаю кнопку, а не изображение? Потому что вы можете легко добавить цель, и я предпочитаю UIButton чем тогда UIImageView

То же, что и предыдущий, есть width параметр, который поможет вам определить ширину кнопки.
Посмотрите, как это работает…

let blueButton = topTextField.setView(.right, image: UIImage(named: "show_pass_active"))
blueButton.backgroundColor = .blue

let redButton = bottomTextField.setView(.left, image: UIImage(named: "password"),
                                         width: 80)
redButton.backgroundColor = .red

3.4. Добавить пустое пространство в качестве вида

По умолчанию слева места нет (topTextField) и выглядит очень плохо, если textField имеет рамку или другой цвет фона (см. демонстрацию).

Вот как это сделать.

@discardableResult
func setView(_ view: ViewType, space: CGFloat) -> UIView {
    let spaceView = UIView(frame: CGRect(x: 0, y: 0, width: space, height: 1))
    setView(view, with: spaceView)
    return spaceView
}

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

Не забудьте поделиться со мной своим расширением UITextField.

Делитесь, чтобы расти.

PS: добавьте подчеркивание UITextField интересно и довольно долго писать в этом посте. Если вам интересно, как добавить и использовать подчеркивание в UITextField в качестве индикатора пишу на эту тему.