web-dev-qa-db-ja.com

アバター、テキスト、アイコンを含むリストのマテリアルデザインの提案

作成したいMaterial Designed Androidアプリケーションと私は、新しいRecylcerViewのために特別にニースレイアウトを作成することに関するすべてのGoogleの提案に従うようにしています。RecyclerViewにはアバターがありますImageView、タイトルとサブタイトルTextView、アクションアイコンImageView。

ImageViewの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

androidandroid-recyclerviewmaterial-designandroid-drawable
34
fpopic

＃1 2つの項目：

レイアウトminHeightは72 dp、layout_heightはwrap_contentです。アイコンのサイズは40dpです（通常は円形のビットマップです）。アイコンには16 dpの上部マージンと16 dpの左マージンがあり、他にはありません。

両方のTextViewsは、垂直に配置され、垂直に中央揃えされたLinearLayoutにあります。このレイアウトには、16 dpの左マージンと16 dpの右マージンがあります。これにより、画像を削除しても、横の余白はそのまま残ります。通常、1行目にはtextApperance="@style/TextAppearance.AppCompat.Body2"があり、2行目にはBody1があります。テキストレイアウトには16 dpの上部と16 dpの下部がありますpadding（RelativeLayoutの子では下マージンが考慮されないため、ここでパディングする必要があり、他の場合にも役立ちます）。これで、2番目のTextViewに複数の行を入れることができ、アイテム全体が適切に拡張されます。

テキストレイアウトにlayout_toRightOf="@+id/icon"およびlayout_alignWithParentIfMissing="true"を設定することを忘れないでください。右側に別のアイコン（またはウィジェット）がある場合は、layout_toLeftOf="@+id/right_icon"を追加します。そうでない場合はlayout_alignParentRight="true"を使用してください。これにより、レイアウトが拡張され、使用可能なすべてのスペースが占有されます。または、LinearLayoutを使用できます。

これをコンテンツ領域のリストに入れます。リストの上部または下部にパディングを配置する必要はありません。見栄えが良くなります。

＃2コンテンツ内の単一のラインアイテム

1と同じですが、次の違いがあります：minHeightまたはlayout_heightは56dpに設定されます。垂直方向のマージンやパディングは使用せず、すべてを垂直方向に中央揃えにします。 1行のテキストのみを使用してください。

上部に8 dpのパディングまたは48 dpのヘッダーがあり、下部に8 dpのパディングがあるリストでこれを使用します。それ以外の場合は「カットオフ」になります。

＃3メニューの単一行項目

2と同じですが、次の点が異なります。高さは48 dpです。アイコンは24 dpです。アイコンには次の属性が必要です。

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

これにより、バランスを崩すことなく、1 dpから40 dpまでアイコンを配置できます（アイコンとテキストの間隔を変更する必要はありません。これは、以前のようにアイコンとテキストの間隔が40 dpのままであるためです）。

ナビゲーションドロワーとメニューで使用します。

Keylines

編集：注

仕様によると、アイテムの左右のマージンはタブレットでは16 dpではなく24 dp（sw600dp）である必要があります。これを解決するには、タブレットに左右のアイテムレイアウトのパディング8 dpを追加します（動的な値を使用）。

仕様では、アイテム間の仕切り（存在する場合）はアイテムの一部である必要があるとも述べています。電話の場合は72 dp、タブレットの場合は80 dpの「合計左マージンディメンション」を定義し、それをディバイダービューの左マージンとして使用する必要があります。 2番目の問題は、タブレットで8 dpの右パディングがあることです。私はこう言います：ListViewを使用する場合は、スペックをねじ込み、アイテム間にペイントされるカスタムの仕切りを設定します。 RecyclerViewを使用する場合は、アイテムの上に仕切りを追加するNice ItemDecoratorを記述します。

編集2

?listPreferredPaddingLeftと?listPreferredPaddingRightは、スマートフォンでは16 dp、タブレットでは24 dpに拡張されます（RTL設定を尊重）。これらの値は、リストアイテムの左右のパディングに使用できます。次に、アイコン、16 dpの間隔、最後にコンテンツ用に40 dpを予約しました。

61
Eugen Pechanec

以下は、3行リストの material design に貼り付け可能なタイルです。

enter image description here

<?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 = "88dp"
  Android:layout_marginTop = "8dp"
  Android:orientation = "vertical">

<ImageView
  Android:id = "@+id/avatar"
  Android:layout_width = "40dp"
  Android:layout_height = "40dp"
  Android:layout_marginBottom = "20dp"
  Android:layout_marginLeft = "16dp"
  Android:layout_marginRight = "16dp"
  Android:layout_marginTop = "20dp"
  Android:background = "@drawable/avatar"
  Android:contentDescription = "Avatar"/>

<TextView
  Android:id = "@+id/avatar_text"
  Android:layout_width = "40dp"
  Android:layout_height = "40dp"
  Android:layout_marginBottom = "20dp"
  Android:layout_marginLeft = "16dp"
  Android:layout_marginRight = "16dp"
  Android:layout_marginTop = "20dp"
  Android:gravity = "center_vertical|center_horizontal"
  Android:maxLines = "1"
  Android:text = "AV"
  Android:textColor = "@color/white_dark"
  Android:textSize = "16sp"
  Android:fontFamily="sans-serif"  
  Android:textStyle = "bold"/>

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "match_parent"
  Android:layout_marginBottom = "16dp"
  Android:layout_marginEnd = "56dp"
  Android:layout_marginStart = "72dp"
  Android:layout_marginTop = "16dp"
  Android:orientation = "vertical">

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "wrap_content"
  Android:orientation = "horizontal">

  <TextView
    Android:id = "@+id/first_line"
    Android:layout_width = "wrap_content"
    Android:layout_height = "wrap_content"
    Android:layout_marginEnd = "16dp"
    Android:ellipsize="Marquee"
    Android:singleLine="true"
    Android:text = "This is the title line"
    Android:textColor = "@color/black_light"
    Android:textSize = "16sp"
    Android:fontFamily="sans-serif"/>

</LinearLayout>

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "wrap_content"
  Android:orientation = "horizontal">

  <TextView
    Android:id = "@+id/second_line"
    Android:layout_width = "wrap_content"
    Android:layout_height = "wrap_content"
    Android:ellipsize="Marquee"
    Android:singleLine="true"
    Android:textColor = "@color/discreet_dark"
    Android:textSize = "14sp"
    Android:fontFamily="sans-serif"
    tools:text = "This is the second line"/>
</LinearLayout>

<LinearLayout
  Android:layout_width = "match_parent"
  Android:layout_height = "wrap_content"
  Android:orientation = "horizontal">

  <TextView
    Android:id = "@+id/third_line"
    Android:layout_width = "wrap_content"
    Android:layout_height = "wrap_content"
    Android:ellipsize="Marquee"
    Android:singleLine="true"
    Android:textColor = "@color/discreet_dark"
    Android:textSize = "14sp"
    Android:fontFamily="sans-serif"
    tools:text = "This is the third line"/>
</LinearLayout>

</LinearLayout>

<TextView
  Android:id = "@+id/minor_info"
  Android:layout_width = "wrap_content"
  Android:layout_height = "wrap_content"
  Android:layout_alignParentEnd = "true"
  Android:layout_marginEnd = "16dp"
  Android:layout_marginTop = "20dp"
  Android:maxLines = "1"
  Android:maxWidth = "40dp"
  Android:text = "19 min"
  Android:textColor = "@color/discreet_dark"
  Android:textSize = "12sp"
  Android:fontFamily="sans-serif"/>

<ImageView
  Android:id = "@+id/favourite"
  Android:layout_width = "24dp"
  Android:layout_height = "24dp"
  Android:layout_alignParentBottom = "true"
  Android:layout_alignParentEnd = "true"
  Android:layout_marginBottom = "16dp"
  Android:layout_marginLeft = "16dp"
  Android:layout_marginRight = "16dp"
  Android:contentDescription = "Favourite"
  tools:src = "@drawable/favourite_checked"/>

<View
  Android:layout_width = "match_parent"
  Android:layout_height = "1dp"
  Android:layout_alignParentBottom="true"
  Android:layout_marginStart = "72dp"
  Android:background = "@color/discreet_light"/>

</RelativeLayout>
1
Zon