如何使Cardview彼此重叠?

时间:2019-07-03 08:08:45

标签: android

我正在尝试实现

cardview over one another

我尝试以不同的方式完成此操作,但我做不到。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:id="@+id/rl_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

<Button
        android:id="@+id/tableTxt"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center"
        android:background="@drawable/sharp_edge_corners"
        android:drawableStart="@drawable/tables_grey_icon"
        android:text="@string/table"
        android:elevation="2dp"
        android:textAllCaps="false"
        android:layout_marginTop="5dp"
        android:paddingStart="30dp"
        android:paddingEnd="5dp"/>

<RelativeLayout
        android:id="@+id/rl1"
        android:layout_width="190dp"
        android:layout_height="200dp"
        android:layout_below="@+id/tableTxt"
        android:layout_marginTop="-15dp"
        android:layout_marginBottom="20dp"
        android:background="@drawable/table_no_orders_border"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        android:layout_centerHorizontal="true">

    <android.support.v7.widget.CardView
            android:id="@+id/cv_one_login"
            android:layout_width="200dp"
            android:layout_height="199dp"
            android:layout_centerHorizontal="true"
            android:elevation="10dp"
            app:cardCornerRadius="1dp"
            app:cardElevation="10dp"
            android:layout_marginTop="0.1dp">

        <RelativeLayout
                android:id="@+id/lv2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:layout_marginBottom="5dp">

            <ImageButton
                    android:id="@+id/cartIconBtn"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:layout_margin="5dp"
                    android:elevation="3dp"
                    android:layout_alignParentEnd="true"
                    android:background="@drawable/ripple_oval"
                    android:layout_marginBottom="5dp"
                    android:layout_alignParentBottom="true"
                    android:scaleType="center"
                    android:src="@drawable/cart_icon24by24"
                    app:backgroundTint="@color/colorPrimaryDark"/>
            <TextView
                    android:id="@+id/cart_count_on_Image_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="-29dp"
                    android:layout_marginBottom="-19dp"
                    android:layout_marginTop="15dp"
                    android:layout_toEndOf="@id/cartIconBtn"
                    android:background="@drawable/floating_action_button_label"
                    android:elevation="7dp"
                    android:maxLength="2"
                    android:layout_above="@+id/cartIconBtn"
                    android:maxLines="1"
                    android:paddingTop="3dp"
                    android:paddingBottom="2dp"
                    android:paddingStart="5dp"
                    android:paddingEnd="5dp"
                    android:text="99"
                    android:textColor="@color/colorPrimaryDark"
                    app:layout_anchorGravity="bottom|right|end"
                    android:textStyle="bold"/>

            <android.support.v4.widget.NestedScrollView
                    android:id="@+id/sv1"
                    android:layout_width="match_parent"
                    android:layout_height="147dp"
                    android:scrollbars="vertical"
                    android:scrollbarSize="10dp"
                    android:isScrollContainer="true">
                <TextView
                        android:id="@+id/tableItems"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="@string/table"
                        android:textSize="14dp"
                        android:layout_marginStart="20dp"
                        android:layout_marginTop="20dp"
                        android:textColor="@color/TextcolorforBlack"/>
            </android.support.v4.widget.NestedScrollView>
            <TextView
                    android:id="@+id/invoiceid"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/total_bill"
                    android:textColor="@color/SettingsColor"
                    android:layout_below="@id/sv1"
                    android:textAlignment="gravity"
                    android:textSize="12dp"
                    android:gravity="top"
                    android:visibility="invisible"
                    android:layout_marginStart="5dp"/>
            <TextView
                    android:id="@+id/totalTableBill"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/total_bill"
                    android:textColor="@color/SettingsColor"
                    android:layout_below="@id/sv1"
                    android:textAlignment="gravity"
                    android:textSize="12dp"
                    android:gravity="bottom"
                    android:layout_marginStart="5dp"/>

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

current result

我这里的问题是我正在设计,但是很难cardview彼此实现。 Table1在我的设计中也看起来像cardview,但是我在另一个cardview中输入的项目在任何角度都不会像cardview。 有人请帮我提供代码。

3 个答案:

答案 0 :(得分:0)

我建议与ConstraintLayouts合作,避免出现负边距。要使高程适用于重叠的卡片,您必须确保它们的高程不同。因为高程也会影响z索引。因此,如果它们具有相同的高程,则它们具有相同的z索引,这意味着它们没有一个位于另一个之上,因此没有阴影/高程效果。

<android.support.v7.widget.CardView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_margin="16dp"
    app:cardBackgroundColor="#FFFFFF"
    app:cardElevation="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_margin="16dp"
    app:cardBackgroundColor="#FFFFFF"
    app:cardElevation="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

答案 1 :(得分:0)

使用以下代码。

void*

答案 2 :(得分:0)

使用两张卡片的视图而不是按钮。并从版式(卡片视图的父级)中删除相对版式。

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:id="@+id/rl_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <android.support.v7.widget.CardView
            android:layout_width="190dp"
        android:layout_height="200dp"
        android:layout_below="@+id/tableTxt"
        android:layout_marginTop="-15dp"
            android:layout_centerHorizontal="true"
            android:elevation="10dp"
            app:cardCornerRadius="5dp"
            app:cardElevation="5dp">

        <RelativeLayout
                android:id="@+id/lv2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:layout_marginBottom="5dp">

            <ImageButton
                    android:id="@+id/cartIconBtn"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:layout_margin="5dp"
                    android:elevation="3dp"
                    android:layout_alignParentEnd="true"
                    android:background="@drawable/ripple_oval"
                    android:layout_marginBottom="5dp"
                    android:layout_alignParentBottom="true"
                    android:scaleType="center"
                    android:src="@drawable/cart_icon24by24"
                    app:backgroundTint="@color/colorPrimaryDark"/>
            <TextView
                    android:id="@+id/cart_count_on_Image_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="-29dp"
                    android:layout_marginBottom="-19dp"
                    android:layout_marginTop="15dp"
                    android:layout_toEndOf="@id/cartIconBtn"
                    android:background="@drawable/floating_action_button_label"
                    android:elevation="7dp"
                    android:maxLength="2"
                    android:layout_above="@+id/cartIconBtn"
                    android:maxLines="1"
                    android:paddingTop="3dp"
                    android:paddingBottom="2dp"
                    android:paddingStart="5dp"
                    android:paddingEnd="5dp"
                    android:text="99"
                    android:textColor="@color/colorPrimaryDark"
                    app:layout_anchorGravity="bottom|right|end"
                    android:textStyle="bold"/>

            <android.support.v4.widget.NestedScrollView
                    android:id="@+id/sv1"
                    android:layout_width="match_parent"
                    android:layout_height="147dp"
                    android:scrollbars="vertical"
                    android:scrollbarSize="10dp"
                    android:isScrollContainer="true">
                <TextView
                        android:id="@+id/tableItems"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="@string/table"
                        android:textSize="14dp"
                        android:layout_marginStart="20dp"
                        android:layout_marginTop="20dp"
                        android:textColor="@color/TextcolorforBlack"/>
            </android.support.v4.widget.NestedScrollView>
            <TextView
                    android:id="@+id/invoiceid"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/total_bill"
                    android:textColor="@color/SettingsColor"
                    android:layout_below="@id/sv1"
                    android:textAlignment="gravity"
                    android:textSize="12dp"
                    android:gravity="top"
                    android:visibility="invisible"
                    android:layout_marginStart="5dp"/>
            <TextView
                    android:id="@+id/totalTableBill"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/total_bill"
                    android:textColor="@color/SettingsColor"
                    android:layout_below="@id/sv1"
                    android:textAlignment="gravity"
                    android:textSize="12dp"
                    android:gravity="bottom"
                    android:layout_marginStart="5dp"/>

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

    <android.support.v7.widget.CardView
            android:id="@+id/tableTxt"
            android:layout_width="150dp"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:background="@drawable/sharp_edge_corners"
            app:cardCornerRadius="5dp"
            app:cardElevation="10dp"
            app:cardBackgroundColor="#123"
            android:paddingStart="30dp"
            android:paddingEnd="5dp">

    // design your top view

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