简体   繁体   中英

How do I make a scorecard type layout CardView?

I have been battling with GridLayout and TableLayout for the past couple of hours and for the life of me can't figure out a way to make a CardView that looks like the following: 所需的计分卡布局

Currently I have a CardView parent with this GridLayout is its child:

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

Which gives this layout where the stars are placeholders to visualise where the ImageViews are and the scores are 1 - 13:

徽标和分数已经聚拢并保持对齐,所有内容均已推向顶部

Try this layout

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

为什么不尝试使用相对布局来包含内部内容(也可以对标题进行处理),并根据父级,左,右和中心部分对齐视图,它应该适合您。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM