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

我試圖從appBarLayout上方開始創建一個卡片Widget，並繼續在下面的白色背景之上。在這張卡的上面，我需要有ImageView（位於頂部中心）和兩個浮動按鈕（位於右下角）。這些元素中有一半在卡上，另一半在外面。如何在appBarLayout上方設置CardView小部件？

我的問題是：我的卡下面沒有陰影，並且按鈕被切成兩半。

這是我走到這一步： 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>

來源

2015-10-20 Gabriel Morin

終於想通了，我只好用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>

來源

2015-10-20 12:45:01

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

回答

相關問題