具有固定数量子级的 CardView

Question

我想要一个 Activity 正好显示四张卡片（不多也不少）的布局，如下图所示。我可以在不使用 RecyclerView 的情况下实现这一点吗？我可以不使用 RecyclerView 并且不只是复制和粘贴 xml 四次吗？我可以通过 id 访问和更改每个视图也很重要。

我目前有四个CardView层层叠叠，感觉很不对劲。我应该怎么做？

这是我在上面的模型中使用的错误 XML 代码。我把它放在一个片段中，因为它很长而且可能对问题不是很重要：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LobbyActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/player1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toTopOf="@id/player2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintWidth_percent="0.95">

        <android.support.constraint.ConstraintLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/player1Info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="24dp"
                android:layout_marginEnd="16dp"
                android:text="Playername - 100(+3)"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textColor="@color/colorPrimary"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player1Thumb"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/player1Ready"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:text="Ready: true"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="#8A000000"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player1Thumb"
                app:layout_constraintTop_toBottomOf="@+id/player1Info" />

            <ImageView
                android:id="@+id/player1Thumb"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@android:drawable/ic_lock_lock" />

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

    <android.support.v7.widget.CardView
        android:id="@+id/player2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toTopOf="@id/player3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/player1"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintWidth_percent="0.95">

        <android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/player2Info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="24dp"
                android:layout_marginEnd="16dp"
                android:text="Playername - 100(+3)"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textColor="@color/colorPrimary"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player2Thumb"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/player2Ready"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:text="Ready: true"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="#8A000000"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player2Thumb"
                app:layout_constraintTop_toBottomOf="@+id/player2Info" />

            <ImageView
                android:id="@+id/player2Thumb"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@android:drawable/ic_lock_lock" />

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

    <android.support.v7.widget.CardView
        android:id="@+id/player3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toTopOf="@id/player4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/player2"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintWidth_percent="0.95">

        <android.support.constraint.ConstraintLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/player3Info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="24dp"
                android:layout_marginEnd="16dp"
                android:text="Playername - 100(+3)"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textColor="@color/colorPrimary"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player3Thumb"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/player3Ready"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:text="Ready: true"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="#8A000000"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player3Thumb"
                app:layout_constraintTop_toBottomOf="@+id/player3Info" />

            <ImageView
                android:id="@+id/player3Thumb"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@android:drawable/ic_lock_lock" />

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

    <android.support.v7.widget.CardView
        android:id="@+id/player4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/player3"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintWidth_percent="0.95">

        <android.support.constraint.ConstraintLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/player4Info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="24dp"
                android:layout_marginEnd="16dp"
                android:text="Playername - 100(+3)"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textColor="@color/colorPrimary"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player4Thumb"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/player4Ready"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:text="Ready: true"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="#8A000000"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/player4Thumb"
                app:layout_constraintTop_toBottomOf="@+id/player4Info" />

            <ImageView
                android:id="@+id/player4Thumb"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@android:drawable/ic_lock_lock" />

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

</android.support.constraint.ConstraintLayout>

Answer 1

当然可以。回收站视图不会给您带来任何优势。

但不要忘记创建 style 或使用 <include>。

如果以后要改设计的话对你有帮助

在你的情况下，我建议使用 include。你可以阅读它 here。主要思想是创建附加 cardview_layout.xml 并使用

<include layout="@layout/cardview_layout"/>

在您的主 xml 文件中。

Answer 2

如果卡片视图看起来相同，您可以创建一个单独的可重用布局，其中只有一个 CardView。然后，您可以使用 <include> 标记将其添加 4 次。这样，如果您需要更改它的外观，只需执行一次。

有关如何实现此目的的更多信息here。

例子

<include 
   android:id="@+id/news_title" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   layout="@layout/title"/>

注意： 你可以通过设置一个 id 来区分每个包含的元素，就像上面的例子一样。

要获取子视图，您需要其 ID。首先，使用 id 检索视图（或 CardView 或...）。例如：

CardView card1 = view.findViewById(cardView1);
card1.findViewById(player1Info);

与下一张包含的卡相同：

CardView card2 = view.findViewById(cardView2);
card2.findViewById(player1Info); //Notice how it is the same id here <------

Answer 3

如所述here <merge/> 当您不需要额外的视图组以获得良好的 UI 性能时使用。

The tag helps eliminate redundant view groups in your view hierarchy when including one layout within another. For example, if your main layout is a vertical LinearLayout in which two consecutive views can be re-used in multiple layouts, then the re-usable layout in which you place the two views requires its own root view. However, using another LinearLayout as the root for the re-usable layout would result in a vertical LinearLayout inside a vertical LinearLayout. The nested LinearLayout serves no real purpose other than to slow down your UI performance.

<merge xmlns:android="http://schemas.android.com/apk/res/android">

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/add"/>

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/delete"/>

</merge>

Now, when you include this layout in another layout (using the <include/> tag), the system ignores the <merge> element and places the two buttons directly in the layout, in place of the <include/> tag.

希望对您有所帮助。

Answer 4

如果您正在使用 RecyclerView，请使用 GridLayoutManager 来实现此目的

List<String> dataSource = new ArrayList<String>();


RecyclerView.LayoutParams lp = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    recyclerView.setLayoutParams(lp);


    GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 4, GridLayoutManager.VERTICAL, false);
    setContentView(recyclerView);
    recyclerView.setAdapter(new TextRecyclerAdapter(dataSource));
    recyclerView.setLayoutManager(gridLayoutManager);

here is git example for this

Answer 5

使用 LinearLayout ...可选，转换为 4 倍 include，具有独特的 id 属性。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp">
        <Space
            android:layout_width="match_parent"
            android:layout_height="80dp"/>
    </android.support.design.card.MaterialCardView>

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp">
        <Space
            android:layout_width="match_parent"
            android:layout_height="80dp"/>
    </android.support.design.card.MaterialCardView>

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp">
        <Space
            android:layout_width="match_parent"
            android:layout_height="80dp"/>
    </android.support.design.card.MaterialCardView>

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp">
        <Space
            android:layout_width="match_parent"
            android:layout_height="80dp"/>
    </android.support.design.card.MaterialCardView>

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

这看起来很像你那里的东西:

具有固定数量子级的 CardView

CardView with a fixed amount of children

java

android

android-recyclerview

android-constraintlayout

cardview