Создавайте пользовательские интерфейсы в стиле dribbble в своих приложениях!

Кому еще надоели квадратные текстовые поля со скругленными углами? Я знаю, что я. Я писал код для своего первого приложения Rivyou, когда понял, что стандартный дизайн Apple для текстовых полей просто не для меня.

Но… какая была альтернатива? Прямоугольник с неровными краями? Фу, это противоположность дизайна. Текстовое поле без границ? Интересно, но слишком пусто. Так как насчет линии под текстовым полем без границ? Сейчас мы говорим!

С помощью всего нескольких строк кода вы можете сделать свое текстовое поле таким же красивым и сделать дизайн вашего приложения привлекательным для ваших пользователей! Читайте дальше, чтобы внедрить это в свой проект!

Шаг 1: Создайте линии

Что нам нужно сделать, так это добавить UITextField и UIView чуть ниже с высотой, равной 1, чтобы она выглядела как линия.

Хотя вы можете сделать это разными способами, мой любимый метод — добавление вертикального UIStackView внутри представления. Я уже добавил один для моего usernameTextField:

Чуть ниже добавлю еще один. Как и в приведенном выше, его интервал будет установлен на 10, а его распределение установлено на «заполнение». Затем я добавлю два элемента:

  • UITextField

Добавьте UITextField в вертикальное представление стека и убедитесь, что его стиль границы установлен на «нет».

Подключите текстовое поле к вашему классу и назовите его.

  • UIView

Затем добавьте UIView чуть ниже UITextField и обязательно установите его высоту на 1 (или предпочтительную высоту строки).

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

Шаг 2: подключите его к своему классу

Используйте lazy var, чтобы создать массив текстовых полей, включающий все только что созданные вами текстовые поля:

lazy var textFields = [usernameTextField, passwordTextField]

Добавьте в свой класс расширение для реализации UITextFieldDelegate. Это позволит вам использовать функцию textFieldDidBeginEditing, а с помощью метода switch мы сможем определить, какая строка будет выполнять анимацию:

В viewDidLoad() обязательно установите для каждого делегата текстового поля значение self. В случае нескольких текстовых полей проще всего добиться этого с помощью метода for...in с массивом textFields, который мы создали ранее:

Шаг 3. Добавьте анимацию

Теперь все, что нам нужно сделать, это добавить код анимации:

И вуаля! Соберите свое приложение и, если вы все сделали правильно, у вас должно получиться что-то похожее на это:

Полный код ищите на GitHub!

Вам понравилось это руководство? Хорошо ли это сработало с вашим проектом? Дайте мне знать ваши отзывы в комментариях ниже!

Следите за мной в…
❤️ YouTube
💖 Dribbble
💜 Instagram
💙 Ko-Fi
🖤 GitHub