Создавайте пользовательские интерфейсы в стиле 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