Урок 7. Практика. Создание элемента списка твитов

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

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

Создание файла tweet_item_view

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

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

Создание файла tweet_item_view

Для последующего применения в списке твитов необходимо создать xml-файл с названием tweet_item_view, который должен выглядеть так.

Единственный вопрос, который может смутить вас – размещение элементов «ретвит» и «мне нравится». Можно строго задать отступ у правого элемента, но тогда layout будет разнородно смотреться на устройствах с разным размером экрана. Т.е. нам нужен механизм, который позволил бы нам создать более динамичную структуру нашего layout.

Атрибут android:layout_weight.

В LinearLayout для данной задачи существуют веса. Для этого необходимо использовать два атрибута:

android:weightSum – данный атрибут необходимо применять у элемента контейнера. Он определяет максимальную сумму всех весов дочерних элементов;
android:layout_weight – этот атрибут указывается у каждого из дочерних элементов в соответствии с тем, какие пропорции необходимо учесть. Стоит заметить, что при использовании данного атрибута, значение атрибута android:layout_width должно быть 0dp.

Атрибут android:weightSum опционален и по умолчанию берётся равным сумме всех атрибутов android:layout_weight дочерних элементов.

Рассмотрим пример, в котором контейнер, занимающий всю ширину экрана размещает внутри себя 3 элемента в пропорции 1:3:1:

sample.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="5">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="2"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3"/>

</LinearLayout>

Визуально мы получим следующую картину:

Чтобы вам не искать иконки элементов «ретвит» и «мне нравится», приводим вам их кодовые символы для вставки в файл строковых ресурсов:

strings.xml

<resources>

    // строки выше не изменились

    <string name="fa_heart_o">\uf08a</string>
    <string name="fa_retweet">\uf079</string>
</resources>

Таким образом, на данный момент у вас достаточно знаний, чтобы выполнить второе задание и создать элемент tweet_item_view. Ниже вас ждёт готовое решение данной задачи.

tweet_item_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    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:layout_marginEnd="@dimen/text_small_margin"
        android:src="@mipmap/ic_launcher"/>

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

    <TextView
        android:id="@+id/author_nick_text_view"
        style="@style/TextView.Secondary"
        android:layout_marginStart="@dimen/text_small_margin"
        android:layout_toEndOf="@+id/author_name_text_view"
        android:text="devcolibri"/>

    <TextView
        android:id="@+id/creation_date_text_view"
        style="@style/TextView.Secondary"
        android:layout_marginStart="@dimen/text_small_margin"
        android:layout_toEndOf="@+id/author_nick_text_view"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="нояб. 27"/>

    <TextView
        android:id="@+id/tweet_content_text_view"
        style="@style/TextView.Primary"
        android:layout_below="@id/author_name_text_view"
        android:layout_marginTop="@dimen/text_small_margin"
        android:layout_toEndOf="@id/profile_image_view"
        android:text="Сегодня поговорим о RecyclerView и о том, почему нужно использовать именно его."/>

    <ImageView
        android:id="@+id/tweet_image_view"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_below="@id/tweet_content_text_view"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:layout_toEndOf="@id/profile_image_view"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tweet_image_view"
        android:layout_toEndOf="@id/profile_image_view"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/retweets_container"
            style="@style/HalfWidth"
            android:orientation="horizontal">

            <TextView
                style="@style/TextIcon"
                android:text="@string/fa_retweet"/>

            <TextView
                android:id="@+id/retweets_text_view"
                style="@style/TextView.Secondary"
                android:layout_marginStart="@dimen/text_small_margin"
                android:text="16"/>
        </LinearLayout>


        <LinearLayout
            android:id="@+id/likes_container"
            style="@style/HalfWidth"
            android:orientation="horizontal">

            <TextView
                style="@style/TextIcon"
                android:text="@string/fa_heart_o"/>

            <TextView
                android:id="@+id/likes_text_view"
                style="@style/TextView.Secondary"
                android:layout_marginStart="@dimen/text_small_margin"
                android:text="16"/>
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Вы же не забыли про использование стилей? Здесь стоит обратить внимание на стиль HalfWidth:

styles.xml

<style name="HalfWidth">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_weight">0.5</item>
</style>

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

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

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

Code diff

Авторизация

Урок 7. Практика. Создание элемента списка твитов

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

Создание файла tweet_item_view

Атрибут android:layout_weight.