如何制作记分卡类型布局CardView？

Question

在过去的几个小时里，我一直在与GridLayout和TableLayout进行斗争，但在我的生活中，我无法找到一种方法来制作如下所示的CardView：

目前我有一个CardView父级，这个GridLayout是它的孩子：

<GridLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:rowCount="3"
    android:columnCount="3"
    android:orientation="horizontal"
    android:padding="20dp">
    <!--FirstRow-->
    <ImageView
        android:id="@+id/away_logo"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnWeight="0.3"
        android:layout_gravity="start"
        android:gravity="center_vertical"
        android:src="@android:drawable/btn_star_big_on"/>
    <LinearLayout
    android:id="@+id/scores_layout"
    android:layout_row="1"
    android:layout_rowWeight="0.5"
    android:layout_column="1"
    android:layout_columnWeight="0.4"
    android:layout_gravity="center"
    android:orientation="horizontal">
        <TextView
            android:id="@+id/away_score_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="10"
            android:gravity="center_vertical|start"
            android:layout_weight="0.5"/>
        <TextView
            android:id="@+id/home_score_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center_vertical"
            android:text="11"
            android:gravity="center_vertical|end"
            android:layout_weight="0.5"/>
    </LinearLayout>
    <ImageView
        android:id="@+id/home_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_rowWeight="0.33"
        android:layout_column="2"
        android:layout_columnWeight="0.3"
        android:layout_gravity="start"
        android:gravity="center_vertical"
        android:src="@android:drawable/btn_star_big_on"/>
    <!--SecondRow-->
    <TextView
        android:id="@+id/away_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_rowWeight="0.3"
        android:layout_column="0"
        android:layout_columnWeight="0.33"
        android:layout_gravity="start"
        android:text="Team"
        android:gravity="center_vertical"/>
    <TextView
        android:id="@+id/home_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_rowWeight="0.3"
        android:layout_column="2"
        android:layout_columnWeight="0.33"
        android:layout_gravity="end"
        android:text="Team"
        android:gravity="center_vertical"/>
    <!--LastRow-->
    <TextView
        android:id="@+id/time_rink_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_rowWeight="0.3"
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_columnWeight="1"
        android:text="7:00P.M.atBotany"
        android:layout_gravity="center_horizontal"/>
</GridLayout>

这给出了这种布局，其中星星是占位符，可视化ImageView的位置，分数为1 - 13：

Answer 1

试试这个布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        tools:text="7:00 P.M. at Venue"/>

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

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:orientation="vertical"
            android:padding="5dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                tools:src="@drawable/team_1_image"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="8dp"
                tools:text="Team 1"/>
        </LinearLayout>

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            tools:text="1 - 3"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:orientation="vertical"
            android:padding="5dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                tools:src="@drawable/team_2_image"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="8dp"
                tools:text="Team 2"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Answer 2

为什么不尝试使用相对布局来包含内部内容（也可以为标题执行），并根据父级，左侧，右侧和中间部分对齐视图，它应该适合您。