Android Cardview元素叠加在一起

时间:2015-12-11 00:27:27

标签: android material-design android-cardview

我有一个cardview布局,如下图所示,但我文件中的两个元素都叠加在一起。我已经阅读了其他帖子,这些帖子说为了能够更有效地空间元素,你必须在cardview内有另一个布局,但它对我不起作用。如果我添加android:layout_above...,则其中一个元素会消失。我想要一个元素高于另一个元素。谁能指出我做错了什么?

enter image description here

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

1 个答案:

答案 0 :(得分:4)

您可以使用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>

这样,锚视图将位于父视图的中间但不会被绘制,因为宽度和高度为零,但它将成为时间和温度的参考,因此时间将填充上半部分和温度将填补下半部分