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

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

gitzip

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

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

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

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

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

TweetItemView.jpeg

Единственный вопрос, который может смутить вас – размещение элементов «ретвит» и «мне нравится». Можно строго задать отступ у правого элемента, но тогда 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>

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

linear_weight.png

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

strings.xml

<resources>

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

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

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

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

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

Code diff

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