Предложения по дизайну материалов для списков с аватаром, текстом и значком

Я хочу создать приложение Material Designed для Android, и я стараюсь следовать всем предложениям Google о создании красивых макетов специально для нового RecylcerView. RecyclerView имеет аватар ImageView, название и субтитр TextView и значок действия ImageView.

Какие значения следует поместить в свойствах ImageViews для width и height, чтобы он поддерживал разные размеры и плотность экрана и какой размер этих чертежей я должен выбрать из пакета системных значков?

material-design-icons-1.0.1

Предложение для списков:

avatar with text and icon

??? в коде xml - неизвестные вещи, которые я не знаю, что там положить:

XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_friend"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">???

        <ImageView
            android:id="@+id/friend_profile_picture"
            android:layout_width="40dp"???
            android:layout_height="40dp"???
            android:layout_alignParentLeft="true"
            android:layout_margin="16dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_person_grey600_48dp"/>???

        <TextView
            android:id="@+id/friend_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/friend_online_imageview"
            android:layout_toRightOf="@+id/friend_profile_picture"
            android:paddingTop="20dp"
            android:text="@string/plain_text_for_preview"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/friend_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/friend_name"
            android:layout_toLeftOf="@id/friend_online_imageview"
            android:layout_toRightOf="@+id/friend_profile_picture"
            android:paddingBottom="20dp"
            android:text="@string/plain_text_for_preview"
            android:textSize="14sp"/>

        <ImageView
            android:id="@+id/friend_online_imageview"
            android:layout_width="wrap_content"???
            android:layout_height="wrap_content"???
            android:layout_alignParentRight="true"
            android:layout_margin="16dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_messenger_grey600_18dp"/>???

    </RelativeLayout>

</android.support.v7.widget.CardView>

АНОНС:

Design Preview of XML

Ответы

Ответ 1

# 1 Две позиции:

Макет minHeight равен 72dp, layout_height - wrap_content. Размер значка - 40dp (обычно это растровое изображение круга). Значок имеет верхнее поле 16dp и 16dp левое поле, другое.

Оба TextView находятся в вертикально ориентированном и вертикально центрированном LinearLayout. Этот макет имеет левый край 16dp и правый край 16dp. Это позволит вам удалить изображение и сохранить неповрежденные боковые поля. Первая строка имеет обычно textApperance="@style/TextAppearance.AppCompat.Body2", а вторая строка имеет Body1. Текстовый макет имеет 16dp верх и 16dp нижний padding (он должен быть дополнен здесь, потому что нижнее поле не соблюдается для детей RelativeLayout - и полезно другое время). Теперь вы можете поместить несколько строк во второй TextView, и весь элемент будет хорошо расширяться.

Не забудьте установить layout_toRightOf="@+id/icon" и layout_alignWithParentIfMissing="true" в макете текста. Если у вас есть другой значок (или виджет) справа, добавьте layout_toLeftOf="@+id/right_icon". Если не использовать layout_alignParentRight="true". Это растянет макет, чтобы занять все свободное место. Или вы можете использовать LinearLayout.

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

# 2 Отдельные позиции в содержании

То же, что и номер 1 со следующими отличиями: minHeight или layout_height установлено в 56dp. Не используйте никаких вертикальных полей или отступов, просто центрируйте все по вертикали. Используйте только один текст строки.

Используйте это в списке с дополнением 8dp или заголовком 48dp вверху и заполнением 8dp внизу. В противном случае он будет выглядеть "обрезанным".

# 3 Отдельные позиции в меню

То же, что и номер 2 со следующими отличиями: высота 48dp. Значок 24dp. Значок должен иметь следующие атрибуты:

android:layout_width="40dp"
android:layout_height="wrap_content"
android:scaleType="fitStart"

Это позволит вам помещать любую иконку с 1dp на 40dp, не нарушая баланс (вам не нужно менять интервал между значком и текстом, поскольку он остается 40dp, как в предыдущих случаях).

Я использую это в навигационном ящике и меню.

Keylines

EDIT: Примечание

В спецификациях говорится, что поля слева и справа должны быть 24dp вместо 16dp для планшетов (sw600dp). Вы можете решить эту проблему, добавив на табличках левый и правый элементы макета 8dp (используйте динамические значения).

В спецификациях также указывается, что разделитель между элементами (если они есть) должен быть частью элемента. Вы должны определить "общий размер левого края" 72dp для телефонов и 80dp для планшетов и использовать его в качестве левого поля для представления разделителя. Вторая проблема заключается в том, что на планшетах у вас есть 8dp правильное дополнение. Я говорю это: если вы используете ListView, завинтите спецификации и установите пользовательский разделитель, который будет окрашиваться между элементами. Если вы используете RecyclerView, напишите приятный ItemDecorator, который добавит делитель над элементом.

РЕДАКТИРОВАТЬ 2

?listPreferredPaddingLeft и ?listPreferredPaddingRight будет расширяться до 16dp на телефонах и 24dp на планшетах (соблюдая настройки RTL). Вы можете использовать эти значения для левого и правого заполнения в элементах списка. Затем 40dp зарезервировано для значка, интервал 16dp и, наконец, контент.