Android Cardview 元素相互堆叠

Question

我有一个如下所示的 cardview 布局，但我的文件中的两个元素彼此堆叠。我读过其他帖子，说要能够更有效地 space 元素，您必须在 cardview 中有另一个布局，但它对我不起作用。如果我添加一个 android:layout_above... ，那么其中一个元素就会消失。我想要一个元素高于另一个元素。谁能指出我做错了什么？

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/currentData"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="@color/orange">

    <RelativeLayout
        android:id="@+id/cardviewLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/time"
            tools:text="this is the time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_above="@+id/temperature"
            android:textColor="@color/white"/>

        <TextView
            android:id="@+id/temperature"
            tools:text="50°"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textSize="50sp" />

    </RelativeLayout>

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

Answer 1

您可以为此使用 LinearLayout 而不是 RelativeLayout

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/currentData"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="@color/orange">

    <LinearLayout
        android:id="@+id/cardviewLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:weightSum="2"
        android:orientation="vertical">

        <TextView
            android:id="@+id/time"
            tools:text="this is the time"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_above="@+id/temperature"
            android:weight="1"
            android:textColor="@color/white"/>

        <TextView
            android:id="@+id/temperature"
            tools:text="50°"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:weight="1"
            android:textSize="50sp" />

    </LinearLayout>

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

或者如果你想使用 RelativeLayout 你可以使用这个技巧

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/currentData"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="@color/orange">

    <RelativeLayout
        android:id="@+id/cardviewLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:orientation="vertical">

        <View
            android:id="@+id/anchor_view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"/>

        <TextView
            android:id="@+id/time"
            tools:text="this is the time"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_above="@+id/anchor_view"
            android:textColor="@color/white"/>

        <TextView
            android:id="@+id/temperature"
            tools:text="50°"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_below="@+id/anchor_view"
            android:textSize="50sp" />

    </RelativeLayout>

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

这样anchorview将位于父视图的中间但不会被绘制，因为宽度和高度为零但它会成为时间和温度的参考所以时间会填满上层一半和温度将填充下半部分

Android Cardview 元素相互堆叠

Android Cardview elements stack on top of each other

android

material-design

android-cardview