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

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

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

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

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

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

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

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

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

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

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

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

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

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

Реализация с помощью RelativeLayout:

Вот как выглядит вариант без вертикального центрирования текстов:

user_item_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image_view"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/ic_launcher"
        android:layout_centerVertical="true"/>

    <TextView
        android:id="@+id/user_name_text_view"
        style="@style/TextView.Primary.Bold"
        android:layout_marginStart="@dimen/text_small_margin"
        android:layout_toEndOf="@+id/profile_image_view"
        android:text="Devcolibri"/>

    <TextView
        android:id="@+id/user_nick_text_view"
        style="@style/TextView.Secondary"
        android:layout_below="@+id/user_name_text_view"
        android:layout_marginStart="@dimen/text_small_margin"
        android:layout_toEndOf="@+id/profile_image_view"
        android:text="devcolibri"/>

</RelativeLayout>

Для центрирования нам необходимо добавить LinearLayout, которому необходимо указать атрибут
centerVertical="true", обернуть в него два наших TextView:

user_item_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image_view"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/ic_launcher"
        android:layout_centerVertical="true"/>

    <LinearLayout
        android:layout_centerVertical="true"
        android:layout_marginStart="@dimen/text_small_margin"
        android:layout_toEndOf="@+id/profile_image_view"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/user_name_text_view"
            style="@style/TextView.Primary.Bold"
            android:text="Devcolibri"/>

        <TextView
            android:id="@+id/user_nick_text_view"
            style="@style/TextView.Secondary"
            android:text="devcolibri"/>

    </LinearLayout>

</RelativeLayout>

Реализация с помощью LinearLayout

Реализация с помощью контейнера LinearLayout выглядит более элегантно:

user_item_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="8dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image_view"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/ic_launcher"/>

    <LinearLayout
        android:layout_marginStart="@dimen/text_small_margin"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/user_name_text_view"
            style="@style/TextView.Primary.Bold"
            android:text="Devcolibri"/>

        <TextView
            android:id="@+id/user_nick_text_view"
            style="@style/TextView.Secondary"
            android:text="devcolibri"/>

    </LinearLayout>

</LinearLayout>

Этот вариант и оставим.

Авторизация

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

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

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

Реализация с помощью RelativeLayout:

Реализация с помощью LinearLayout

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