[DSP2016] Android prosto z poligonu odc.2 (layout, responsive design)

Dziś nieco krótsza relacja z układania layoutu na szablonach elementów listy muzycznych tracków.

  

Zanim przejdę do zasadniczego tematu, na początku mała dygresja. Wiecie jak obrócić odpalony emulator Androida?  Microsoft przyzwyczaił mnie do tego, że emulator chwytam i obracam. Na oryginalnych emulatorach Androida to nie działa, ale jak zastosujemy bardziej tajną kombinację klawiszy lewy CTRL + F12 to wyjdzie na to samo.

Jak uzyskałem wygląd z pierwszego screenshota?

Jeśli chodzi o design poczytałem o wytycznych w Material Design co do list na stronie https://www.google.com/design/spec/components/lists.html, rzuciłem też okiem na stylizację listy w jednym z sampli z SDK. Ten ładny wesoły żółto-złoty kolor pochodzi oczywiscie z palety Material Design ( https://www.google.com/design/spec/style/color.html),  białą nutę “skołowałem” też z ikon Material Design (https://design.google.com/icons/), w ImageView dałem kolor na background. Inspirowałem się również trochę m.in aplikacją Muzyka Play.

Od strony technicznej to, co sobie przypomniałem o layoucie w miarę wystarczyło, trochę intuicji plus wykorzystałem swoją wcześniejszą wiedzę o RelativePanel z … Windows 10. Tak wiem, że był wzorowany właśnie m.in na RelativeLayout z Androida, ale wtedy zapoznałem się z tą filozofią. Wystarczyło to teraz do poruszania się po oryginale. Ostatecznie zawartość pliku file_list_item.xml przybrała postać:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/media_item_height">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="@dimen/media_item_icon_margin_start"
        android:background="#ffc107"
        android:src="@drawable/ic_audiotrack_white_36dp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_marginStart="@dimen/media_item_text_margin_start"
        android:layout_centerVertical="true">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:maxLines="1"
            android:ellipsize="end"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="?android:attr/textColorPrimary"/>

        <TextView
            android:id="@+id/artist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/title"
            android:maxLines="1"
            android:ellipsize="end"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="?android:attr/textColorSecondary"/>

        <TextView
            android:id="@+id/duration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_below="@+id/title"
            android:layout_toRightOf="@+id/artist"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="?android:attr/textColorSecondary"/>

    </RelativeLayout>

</RelativeLayout>

A co z ekranem w orientacji w landscape? Inspirowany nieco app-ką Prezentacje postanowiłem przygotować nieco inny szablon dla szerokości większej niż 600dp. To jeden z zalecanych standardowych break pointów w Material Design (https://www.google.com/design/spec/layout/responsive-ui.html). Wystarczy że plik o tej samej nazwie umieścimy w folderze layout-w600dp obok dotychczasowego layout, a system przy spełnieniu warunku sam automatycznie załaduje pożądaną wersję szablonu. W moim przypadku wystarczy obrócić telefon do pozycji landscape, choć na większych urządzeniach powinno się to w ogóle pokazywać.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/media_item_height">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="@dimen/media_item_icon_margin_start"
        android:background="#ffc107"
        android:src="@drawable/ic_audiotrack_white_36dp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_marginStart="@dimen/media_item_text_margin_start"
        android:layout_centerVertical="true">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:maxLines="1"
            android:ellipsize="end"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="?android:attr/textColorPrimary"/>

        <TextView
            android:id="@+id/artist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/title"
            android:layout_marginLeft="16dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="?android:attr/textColorSecondary"/>

        <TextView
            android:id="@+id/duration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="8dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="?android:attr/textColorSecondary"/>

    </RelativeLayout>

</RelativeLayout>

Dlaczego nie zrobiłem tutaj layoutu gridowego? Większe kafle dla tracków muzycznych wydają mi się nieco przerostem formy nad treścią, wiele aplikacji podobnego rodzaju również ich nie stosuje w takim przypadku. Obecne rozwiązanie wydaje się wystarczające, co nie oznacza że może kiedyś zdecyduję się na opracowanie wariantu prezentacji z kaflami (na razie trochę eksperymentowałem, ale nie uznałem to za rzecz niezbędną, która musi być w pierwszej wersji omawianej app-ki).

To tyle na dzisiaj. To znaczy planowałem w ramach tej wrzutki zrobienie jeszcze search na liście, ale po wstępnym rozpoznaniu widzę, że to nieco bardziej złożony temat (choć dostrzegam jakieś analogie z Windows), wiec lepiej będzie jak omówię go osobno.