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

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

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

Материально-дизайн-иконки-1.0.1

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

Аватар с текстом и значком

??? В 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> 

АНОНС:

Предварительный просмотр XML

Solutions Collecting From Web of "Предложения по дизайну материалов для списков с аватаром, текстом и значком"

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

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

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

EDIT 2

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