web-dev-qa-db-ja.com

アイテムをCardViewにグループ化するためのベストプラクティスは何ですか？

CardViewは通常、1つの要素を装飾するために使用されます。ただし、このウィジェットにいくつかの項目をラップする必要がある場合があります。たとえば、受信トレイアプリのように。

enter image description here

では、これを行うための最良の方法は何ですか？カスタムLayoutManagerまたはカスタムItemDecorationを介して実装できます。カスタムLayoutManagerの実装は簡単な作業ではありません（アニメーション、アイテムの装飾などを完全にサポートしています）。 2番目のオプションでは、CardView（およびAndroid-L標高）の実装を無視して、境界の描画を手動で実装する必要があります。

androidandroid-recyclerviewandroid-cardview
37
bvitaliyg

TL; DR：

要素をホストするのはoneCardViewではなく、いくつかの連続するCardViewsであり、異なるマージン：

グループの上位のCardViewの場合：

    Android:layout_marginTop="5dp"
    Android:layout_marginLeft="5dp"
    Android:layout_marginRight="5dp"
    Android:layout_marginBottom="0dp"
    card_view:cardCornerRadius="0dp"

グループの一番下のCardViewの場合：

    Android:layout_marginTop="0dp"
    Android:layout_marginLeft="5dp"
    Android:layout_marginRight="5dp"
    Android:layout_marginBottom="5dp"
    card_view:cardCornerRadius="0dp"

そして真ん中のものは、マージンTop＆Bottomを0に設定します。

    Android:layout_marginTop="0dp"
    Android:layout_marginLeft="5dp"
    Android:layout_marginRight="5dp"
    Android:layout_marginBottom="0dp"
    card_view:cardCornerRadius="0dp"

受信トレイアプリについて：

これはアプリの階層です（もちろん、少し簡略化されています）：

| Android.support.v4.widget.DrawerLayout
FrameLayout
------- | Android.support.v7.widget.RecyclerView
------- | Android.support.v7.widget.Toolbar
--- | Android.support.design.widget.NavigationView

ナビゲーションドロワーと折りたたまれたカードがなくても、完全な構造は次のようになります。---（enter image description here

興味深い部分は、RecyclerViewのアイテム構造に飛び込むときに始まります。
Googleが使用するアイテムには2種類あります。セパレーター（右側に日付とアクションがあります）とカードです。カードの内容は異なりますが、ViewHolderの観点から-RecyclerViewには2種類のアイテムがあります）

  1. セパレーターenter image description here

    これは単なるLinearLayoutで、内部にTextViewとImageViewがあります。

    enter image description here

  2. アイテムカード
    enter image description here

    そのレイアウトは、コンテンツがViewHolderにバインドされていることに基づいて調整されます。たとえば、フォーカスされているような単純な電子メールは、ネストされたCardViewと3つのImageViewsを持つTextViewです。

    enter image description here

したがって、残っている唯一の質問は、Googleの連中がカードを1つの大きなカードに「マージ」して、余分な影を避ける方法です。

トリックは本当に簡単です：

  1. すべてのCardViewにはcard_view:cardCornerRadius="0dp"があります

  2. グループの上部のCardViewには、上部/左側/右側に5dpのマージンが設定されていますが、下部には0dpが設定されています。

    Android:layout_marginTop="5dp"
Android:layout_marginLeft="5dp"
Android:layout_marginRight="5dp"
Android:layout_marginBottom="0dp"

  3. グループの下部CardViewには、左/右/下に5dpのマージンが設定されていますが、上部には0dpが設定されています。

    Android:layout_marginTop="0dp"
Android:layout_marginLeft="5dp"
Android:layout_marginRight="5dp"
Android:layout_marginBottom="5dp"

  4. グループの中央のCardViewには、左/右に5dpのマージンが設定されていますが、上/下に0dpが設定されています。

    Android:layout_marginTop="0dp"
Android:layout_marginLeft="5dp"
Android:layout_marginRight="5dp"
Android:layout_marginBottom="0dp"

それでおしまい！

これが私が書いた小さな例です：

enter image description here

レイアウト（トリッキーなマージンあり）

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:padding="16dp"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto">
    <Android.support.v7.widget.CardView
        Android:layout_gravity="center"
        Android:layout_width="match_parent"
        Android:layout_height="100dp"
        Android:layout_marginTop="5dp"
        Android:layout_marginLeft="5dp"
        Android:layout_marginRight="5dp"
        Android:layout_marginBottom="0dp"
        card_view:cardCornerRadius="0dp"
        card_view:contentPadding="10dp">
        <FrameLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">
            <TextView
                Android:text="card1"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:textStyle="bold"/>
        </FrameLayout>
    </Android.support.v7.widget.CardView>
    <Android.support.v7.widget.CardView
        Android:layout_gravity="center"
        Android:layout_width="match_parent"
        Android:layout_height="100dp"
        Android:layout_marginTop="0dp"
        Android:layout_marginLeft="5dp"
        Android:layout_marginRight="5dp"
        Android:layout_marginBottom="0dp"
        card_view:cardCornerRadius="0dp"
        card_view:contentPadding="10dp">
        <FrameLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">
            <TextView
                Android:text="card2"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:textStyle="bold"/>
        </FrameLayout>
    </Android.support.v7.widget.CardView>
    <Android.support.v7.widget.CardView
        Android:layout_gravity="center"
        Android:layout_width="match_parent"
        Android:layout_height="100dp"
        Android:layout_marginTop="0dp"
        Android:layout_marginLeft="5dp"
        Android:layout_marginRight="5dp"
        Android:layout_marginBottom="5dp"
        card_view:cardCornerRadius="0dp"
        card_view:contentPadding="10dp">
        <FrameLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">
            <TextView
                Android:text="card3"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:textStyle="bold"/>
        </FrameLayout>
    </Android.support.v7.widget.CardView>
</LinearLayout>

私はそれが役立つことを願っています

36
Konstantin Loginov