在android中创建关于cardview的视图

Question

我想创建这个布局

这是我使用此代码的cardview(灰色视图)和imageview(蓝色视图)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/abc_search_url_text_normal"
android:orientation="vertical">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:layout_marginBottom="3dp"
    android:paddingTop="5dp"
    app:cardBackgroundColor="@color/abc_input_method_navigation_guard">


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

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="bottom"
    android:layout_marginBottom="30dp"
    android:layout_marginRight="10dp"
    android:scaleType="fitXY"
    android:src="@drawable/abc_ratingbar_full_material" />

</FrameLayout>

但结果我的图像视图回到了cardview,我尝试了reletivelayout而不是framelayout,但结果相同.

Answer 1

默认情况下,CardView在API 21+中具有高程,您可以将高程操作设置为小于ImageView的高程

    <android.support.v7.widget.CardView  xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:cardElevation="1dp"/>

 <ImageView
        android:id="@+id/image_view_user"
        android:layout_width="48dp"
        android:layout_height="48dp"
         android:elevation="2dp"/>

在Pre 21中你可以使用

overlayView.bringToFront();
root.requestLayout();
root.invalidate();

如果你有不同的高程,这将不会在21+

Answer 2

只需将CardView放在FrameLayout中的其他视图中即可.如下所示:

<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/apk/res-auto"
android:layout_marginStart="10sp"
android:layout_marginEnd="10sp"
>
<FrameLayout
    android:layout_marginTop="15sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="100sp"
        app:cardCornerRadius="5sp"
        app:cardBackgroundColor="@color/colorPrimary">
    <!--other view items -->
    </android.support.v7.widget.CardView>
</FrameLayout>
     <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="90sp"
        android:layout_height="90sp"
        app:civ_border_width="2dp"
        android:layout_marginStart="10sp"
        app:civ_border_color="@color/colorPrimaryDark"
        android:id="@+id/profileImg"
        android:background="@drawable/ic_if_profle_1055000"
        xmlns:app="http://schemas.android.com/apk/res-auto"/>

截图:

Answer 3

只需将 ImageView 的标高添加到大于 CardView 的标高即可

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/abc_search_url_text_normal"
android:orientation="vertical">

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:layout_marginBottom="3dp"
    android:paddingTop="5dp"
    app:cardBackgroundColor="@color/white">


</androidx.cardview.widget.CardView>

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="bottom"
    android:layout_marginBottom="30dp"
    android:layout_marginRight="10dp"
    android:scaleType="fitXY"
    android:elevation="8dp"
    android:src="@drawable/ic_launcher_background" />

Answer 4

尝试：

• 使用RelativeLayout

• 将ImageView与父项的右/末端对齐，并添加一个右/末端页边距

• 将FAB对准卡片视图的顶部并添加负边距

<RelativeLayout
    ...>
    <CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    />

   <ImageView
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/cardView"
    android:layout_marginTop="-32dp"
    android:layout_marginRight="20dp"
   />

</RelativeLayout>