Question

我试图让一个卡片小部件从appBarLayout上方开始，并继续在随后的白色背景之上。在这张卡的上方，我需要和ImageView（在顶部中心）和两个浮动按钮（在右下角）。这些元素中有一半在卡片上，另一半在外面。

我的问题是：我的卡片下方没有阴影，按钮被切成两半。

这是我到目前为止所得到的： layout_card_detailed.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_margin="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.CardView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/card_view"
            android:layout_gravity="center"
            card_view:cardCornerRadius="1dp"
            android:foreground="?android:attr/selectableItemBackground"
            android:layout_marginTop="@dimen/card_detail_avatar_margin"
            >


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:padding="@dimen/card_detail_padding"
                android:orientation="vertical">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_width="match_parent"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />

                <TextView
                    android:id="@+id/text_description"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/abc_text_size_medium_material"
                    android:layout_marginBottom="@dimen/space_big" />

                <TextView
                    android:id="@+id/text_owner"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/abc_text_size_small_material"
                    android:layout_marginBottom="@dimen/space_small" />

                <TextView
                    android:id="@+id/text_date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/abc_text_size_small_material"
                    />

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/space_big" />

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


    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <ImageView
            android:id="@+id/image_avatar"
            android:layout_width="@dimen/avatar_size_detail"
            android:layout_height="@dimen/avatar_size_detail"
            android:src="@drawable/contact"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="-28dp"
        android:gravity="bottom|right">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/fab_margin">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_match"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@android:drawable/ic_dialog_email"
                android:layout_marginRight="@dimen/fab_margin"
                />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_reply"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@android:drawable/ic_dialog_email" />
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

activity_card_detail.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context="com.myapp.CardDetailActivity" tools:ignore="MergeRootFrame">

    <android.support.design.widget.AppBarLayout android:id="@+id/app_bar"
        android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <android.support.v7.widget.Toolbar android:id="@+id/detail_toolbar"
                android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>



    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/layout_margin">
        <include layout="@layout/layout_card_detailed"/>
    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

Answer 1

最后想通了，我不得不使用CoordinatorLayout而不是FrameLayout。现在一切都很好，从我的FAB阴影以突然的方式切割，遵循原始android视图的方形形状。如果有人作为一个我感兴趣的想法： - ）。

layout_card_detailed.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/layout_margin">

        <android.support.v7.widget.CardView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/card_view"
            card_view:cardCornerRadius="1dp"
            android:foreground="?android:attr/selectableItemBackground"
            android:layout_marginTop="@dimen/card_detail_avatar_margin">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                >
                <ProgressBar
                    android:id="@+id/progress"
                    android:visibility="visible"
                    style="?android:attr/progressBarStyleSmall"
                    android:layout_width="@dimen/card_progress_size"
                    android:layout_height="@dimen/card_progress_size"
                    android:layout_centerInParent="true"
                    />
            </RelativeLayout>
            <LinearLayout
                android:id="@+id/content_loading"
                android:visibility="invisible"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:padding="@dimen/card_detail_padding"
                android:orientation="vertical">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_width="match_parent"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />

                <TextView
                    android:id="@+id/text_description"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/abc_text_size_medium_material"
                    android:layout_marginBottom="@dimen/space_big" />

                <TextView
                    android:id="@+id/text_owner"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/abc_text_size_small_material"
                    android:layout_marginBottom="@dimen/space_small" />

                <TextView
                    android:id="@+id/text_networks"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/abc_text_size_small_material"
                    />

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/space_big" />

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

    </RelativeLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/card_view"
        app:layout_anchorGravity="right|end|bottom"
        android:layout_marginRight="@dimen/fab_margin">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_match"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_share"
            android:layout_marginRight="@dimen/fab_margin"
            />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_reply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_dialog_email"
            />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        app:layout_anchor="@id/card_view"
        app:layout_anchorGravity="right|end|bottom"
        android:layout_marginRight="@dimen/fab_margin">


    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/layout_margin"
        >
        <ImageView
            android:id="@+id/image_avatar"
            android:layout_width="@dimen/avatar_size_detail"
            android:layout_height="@dimen/avatar_size_detail"
            android:src="@drawable/contact"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

如何在appBarLayout上方设置CardView小部件？

1 个答案: