Урок 8. Практика. Создание элемента списка пользователей и тулбара поиска пользователей

Код начала урока:

gitzip

Структура урока:

Видео версия урока

Как вы могли заметить в промо видео данного модуля, в конце у нас должно получиться два экрана: экран с детальной информацией о пользователе и его твитах и экран поиска и выбора другого пользователя. Мы предлагаем вам, с нашей помощью, самостоятельно создавать второй экран приложения. Параллельно с темами, детально рассматриваемыми на примере первого экрана, мы будем предлагать вам практические задания аналогичного характера для второго экрана.

Создание файла user_item_view.xml

Вот как будет выглядеть элемент списка на экране поиска пользователей.

user_item_view.jpeg

Нам с вами необходимо сделать упрощённую версию:

UserItemViewRaw.png

Давайте посмотрим на наш рисунок. Видим, что на нём расположен ImageView и два TextView. Стоит отметить, что TextView должны быть в общем контейнере, чтобы можно было их отцентрировать относительно ImageView.

Вот как выглядит экран, разбитый на структурные элементы:

UserItemViewExplained.png

Вам необходимо создать user_item_view. Причём сделать его нужно, используя как LinearLayout, так и RelativeLayout в качестве коренного элемента. Учтите, что в двух вариантах для вертикального центрирования текстов элементы TextView будут обёрнуты в ещё один контейнер.

Используя знания предыдущих уроков попробуйте создать данный layout сперва используя RelativeLayout, а затем LinearLayout.

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

Создание макета toolbar_search_user, используя RelativeLayout

Давайте сделаем ещё один небольшой пример. Для экрана поиска пользователей нам надо создать следующий layout:

SearchWidgetToolbarCropped.png

Выглядит он слишком стильно. Мы так пока делать не будем. Давайте сделаем более простой вариант:

SearchWidgetToolbarDone.png

Создадим новый файл в папке res->layout toolbar_search_user.xml.

Слева у нас должен быть расположен EditText – компонент для ввода текста. Он должен занимать всё свободное пространство по горизонтали (для свойства ширины layout_width надо задать значение match_parent), но он должен быть слева от кнопки. Кнопка занимает фиксированную ширину, но при этом должна прижаться к правому краю RelativeLayout. Начинать всегда надо с того элемента, у которого ширина или высота фиксированы. Поэтому начнём с кнопки. Надо добавить к ней атрибут android:layout_alignParentEnd="true". Этот атрибут как бы говорит кнопке, указывая ее расположение по горизонтали: находись у правого края от RelativeLayout, в котором ты находишься.

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

Для этого зададим ему атрибут android:layout_width="match_parent" для того, чтобы он занимал всю ширину. Теперь задаём ему зависимость, чтобы он находился слева от кнопки. Добавим атрибут android:layout_toStartOf="@+id/search_button". Для наглядности также добавим ему отступ справа.

По поводу высоты данного макета пока задумываться не будем, разберёмся с этим в месте его применения. Сейчас поставим, например, 100dp.

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

Отлично! Мы справились с заданием.

В результате данного практического занятия мы создали элементы user_item_view, toolbar_search_user, которые успешно применим по месту назначения в следующих уроках.

Полный листинг изменений кода:

Code diff

УВИДЕТЬ ВСЕ Добавить заметку
ВЫ
Добавить ваш комментарий