Login Screen - одна из самых необходимых вещей для приложений, которые предполагают работу с пользователями. В этой статье мы создадим простую заготовку, которую вы легко сможете внедрить в свое приложение и использовать в дальнейшем.
Статья основана на видео зарубежного ютубера, ссылка на оригинальное видео: https://www.youtube.com/watch?v=H2potb8pGDQ
Для начала создадим проект. В качестве шаблона выберем Empty Views Activity:
Укажем имя нашего приложения, в качестве языка программирования я выбрал Kotlin:
Ждем, пока проект прогрузится, и можем приступать к работе.
Архитектура приложения строится на двух типах файлов: .kt (или .java, если вы программируете на Java) и .xml. Первые файлы отвечают за логику работы приложения в runtime, динамическое создание элементов и т.д., в то время как вторые отвечают за хранение различных данных (например, id кнопки, которую вы создали, цвет этой кнопки, строковые литералы) и описание UI вашего приложения. В Android Studio описание UI происходит через файлы .xml, в которых при помощи специальных тегов описываются компоненты графического интерфейса: кнопки, текстовые поля, лейблы и прочее. Это очень напоминает html, так что тем, кто знаком с версткой сайтов, будет легче адаптироваться.
В папке kotlin/java находятся файлы исходного кода на выбранном языке программирования. В папке res находятся ресурсы вашего приложения (а не результаты, как я подумал сначала).
В ней можно найти несколько подпапок:
- layout - в этой папке находятся лэйауты вашего приложения. Лэйаут - это, проще говоря, экран вашего приложения. Можно создавать разные лэйауты и переключать их между собой:
- minimap - в этой папке находится логотип вашего приложения. Здесь можно найти множество одинаковых картинок, но в разном разрешении - для разных ситуаций
- values - папка с данными, которые использует ваше приложение. Здесь можно увидеть файл с цветами и строками, к которым можно обращаться из программного кода вашего приложения или из лэйаутов, создавая интерфейс
- drawable - папка, в которой можно хранить различные компоненты для отображения, такие как передний/задний фон, иконки и т.д.
Первым делом создадим наш пользовательский интерфейс. Будем делать это при помощи редактирования файла activity_main.xml. Различные режимы просмотра лэйаута можно менять при помощи кнопок в правом верхнем углу экрана:
Для начала нужно создать задний фон нашего приложения. Для этого в папке drawable ресурсов проекта создадим файл и назовем его application_background.xml, в качестве основного элемента установим shape вместо стандартного selector. Создадим в нем градиент, который и создаст нам красивый вид приложения. Укажем начальный и конечный цвета, градус наклона и тип градиента при помощи специальных аттрибутов:
Теперь зададим этот градиент в качестве заднего фона для нашего основного лэйаута:
Теперь приступим к размещению компонентов нашего интерфейса. Каждый компонент представляет из себя View со своими собственными параметрами. Для начала удалим TextView, который отвечает за надпись «Hello world!» на экране, она нам не нужна. Вместо этого разместим LineralLayout, который будет содержать все остальные компоненты.
Опишем основные аттрибуты тега:
- layuot_width=”match_parent” - это означает, что по ширине наш лэйаут будет соответствовать родительскому элементу
- layout-height=”wrap_content” - по высоте лэйаут будет занимать ровно столько места, чтобы этого места хватило для адекватного отображения всего компонента (включая вложенные в него компоненты)
- orientation=”vertical” - каждый элемент в лэйауте будет добавляться на новую строку
- gravity=”center” - аттрибут отвечает за расположение элемента на экране. Параметр center означает, что он будет расположен по центру экрана
Теперь расположем иконку, которая обычно отображается в приложениях при входе в аккаунт. Мы можем найти эту иконку в стандартных ассетах Android Studio. Кроме нее, там содержится множество других полезных иконок, которые можно использовать в своих приложениях. Для этого создадим в папке drawable новый файл типа Vector Asset. Там можно выбрать, какое изображение из стандартных ассетов мы хотим сохранить.
Теперь создадим ImageView, который отобразит эту иконку на нашем экране. Укажем для этого view внешний constrain по отношению родителя. Это можно сделать как в графическом эдиторе, так и с помощью тегов. Чтобы сделать это при помощи эдитора, достаточно перетащить нужный виджет в компоненту main, нажать ПКМ и выбрать необходимый constrain.
При помощи тегов это можно сделать следующим образом: для начала создаем соответствующий тег. Предварительно у родительского лэйаута указываем атрибут padding, который отвечает за отступы вложенных элементов от границы родительского элемента. Далее у самого ImageView указываем ширину, высоту и атрибуты, которые отвечают за constrain (они добавятся автоматически, если вы воспользуетесь первым способом): layout_marginTop, layout_constraintTop_toTopOf, layout_editor_absoluteX.
Здесь стоит сделать отступление. На самом деле проектировать расположение виджетов на экране наших устройств очень хорошо, используя различные лэйауты. Они бывают линейные (все элементы внутри него расположены вертикально/горизонтально друг за другом), табличные (каждый элемент - ячейка некоторой таблицы), constraintLayout (явно задаем отступы от родительского элемента) и т.д. В данном случае в оригинальном видео родительский лэйаут был заменен на relativeLayout, а внутрь был помещен еще один LineralLayout, внутри которого уже и расположены наши иконки, поля для ввода и кнопки. Я не стал заменять constraintLayout на Relative, но стоит создать внутренний lineralLayout и поместить в него все то, что мы создали до этого. Зададим ему constrain, а для дочерних к нему элементов этого делать уже не нужно.
Кроме того, для relativeLayout в оригинальном видео указан аттрибут gravity=”cetnter”, который помещает все дочерние объекты по центру экрана. У нас такого нет, так как мы задаем положение дочернего lineralLayout через costrainTop, поэтому вы можете настроить такую высоту, которая вам нравится.
Теперь создадим два текстовых поля, куда мы можем ввести имя пользователя и пароль. Для этих целей используем тег EditView, который позволяет вводить текст.
Из новых аттрибутов здесь:
- hint - подсказка, которая показывается, когда поле пустое
- textColor, textColorHint - цвет текста/подссказки
- textSize - размер шрифта (единица измерения sp - это пункты, как в ворде)
- inputType - тип вводимого текста. В данном случае мы использовали text и textPassword
Еще был создан бэкграунд для того, чтобы наши текстовые поля выглядели красиво. Для этого в папке drawable создаем новый ресурс, в качестве базового элемента меняем selector на shape. Указываем в открывающем теге shape аттрибут shape=”rectangle”, а внутри тега - еще два дочерних: corners (углы, задаем радиус скругления) и stroke (линия внешней обводки, цвет и ширина). Потом указываем в качестве аттрибута EditView background=”@drawable/rounded_editview”.
Кроме того, я задал в некоторых местах значения аттрибутов padding и margin. Если коротко (в общем, это объяснение исчерпывающее), то padding - это внутренний отступ, а margin - внешний. То есть padding задает отступ МОЕГО дочернего элемента от границы родительского, а margin - МОЙ отступ от границы родительского элемента.
Теперь разместим кнопку входа. Все аттрибуты уже знакомы, можете настроить ее на свой вкус. Единственный аттрибут, который встречается впервые - это BackgrountTint, который отвечает за цвет нашей кнопки.
В видео также разобрано, как создать кликабельные иконки для входа через социальные сети, но у меня таких иконок нету, поэтому оставим это в качестве домашнего задания. Полученных знаний достаточно, чтобы создать такие кнопки самому.
Теперь пришло время программировать. В общем случае, при проектировании графических приложений, архитектура разделяется на 3 компоненты: Model - логика нашего приложения, View - внешний вид нашего приложения, и Controller - некоторый менеджер, который связывает Model и View. В данном случае внешний вид у нас уже есть. В силу того, что приложение маленькое, опустим Controller и свяжемся напрямую с нашим Model.
Чтобы связать наши виджеты с программным кодом, нужно задать по необходимости каждому из них аттрибут id, который означает уникальный идентификатор, которому можно будет получить объект этого виджета в коде.
Теперь отправляемся в наш код - файл MainActivity.kt. Действия описаны с рассчетом на то, что читатель знаком с программированием и ООП.
Сначала создадим поля, отвечающие за наши поля ввода и кнопку. Пометим их ключевым словом lateinit, что означает, что значения этим переменным будут присвоены в ходе создания объекта в конструкторе. Укажем также типы этих переменных. Это необходимо, так как Kotlin - строго типизированный язык. Наши поля будут иметь типы EditView и Button соответственно.
Далее отправляемся в конструктор и инициализируем наши поля. Сделать это можно при помощи функции findViewById, а получить нужный id можно при помощи R.id.наш_id.
Укажем для нашей кнопки clickListener. При программировании графических интерфейсов распространено использование событийно ориентированной парадигмы, то есть система отвечает на какие-то события, производимые пользователем. В этом слушателе извлечем значения полей username и password и отобразим их во временном всплывающем сообщении при помощи встроенного объекта Toast.
Все готово, теперь запускаем наше приложение и тестируем. Чтобы протестировать ваше приложение прямо на телефоне, необходимо подсоединить его через usb-провод к вашему компьютеру, предварительно включив в меню разработчика на вашем телефоне возможность отладки по usb.
При отладке мы заметили, что поля ввода и кнопка прикасаются к краям экрана. Это произошло потому, что мы используем ConstrainLayout, и мы не задали start и end constrain для lineralLayout по отношению к constrainLayout. Сделаем это в графическом меню при помощи ПКМ - Constrain. В ходе написания этой статьи автор сделал для себя вывод, что использование constrainLayout, в общем случае, не оправдано и неудобно. Тестируем еще раз и остаемся довольны результатом.
Пишите в комментариях свое мнение по поводу этой статьи, предлагайте, на какие темы еще можно написать статью.
P.S.: Если в ходе дебага вы случайно закрыли окно с экраном вашего телефона в Android Studio, то снова открыть его можно с помощью кнопки в меню сверху: Tools - Layout Inspector.
P.S.S.: В статье приводятся скриншоты, а не фрагменты кода. Тем не менее, у вас есть возможность скачать проект Android Studio и сравнить с тем, что у вас вышло:
https://github.com/dimadev2/LoginScreenApp
