带有 Fab 按钮的卡片视图，例如 Material 底部应用栏

Question

我可以使用 fab 按钮制作卡片视图。我可以在卡片视图中锚定 fab 按钮，但在这里我想制作一个看起来像 BottomAppBar（材料设计）的卡片视图。

代码

 <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        tools:context=".fragments.ViewHistoryFragment"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        style="@style/Widget.MaterialComponents.BottomAppBar">

    <!--    style="@style/Widget.MaterialComponents.BottomAppBar"-->

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/cv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/Widget.MaterialComponents.CardView">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:background="#C3EFC2">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>


            </LinearLayout>

        </com.google.android.material.card.MaterialCardView>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/cv"
            android:src="@mipmap/ic_launcher"
            android:layout_marginEnd="@dimen/margin8"
           app:layout_anchorGravity="bottom|right|end"
            app:borderWidth="@dimen/margin8"
            app:backgroundTint="#343433" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

我想喜欢这种类型的 这意味着我想要我的卡片视图中的摇篮直径。 attached my wanted output

任何人的任何建议都将受到赞赏。

Answer 1

您可以申请MaterialCardView和EdgeTreatment：

    BottomAppBarTopEdgeTreatment bottomAppBarTopEdgeTreatment = new BottomAppBarTopEdgeTreatment(
            fabMargin),
            roundedCornerRadius,
            cradleVerticalOffset
    );
    bottomAppBarTopEdgeTreatment.setFabDiameter(fabSize);

    MaterialCardView cardView = findViewById(R.id.card);
    cardView.setShapeAppearanceModel( cardView.getShapeAppearanceModel().toBuilder()
            .setTopEdge(bottomAppBarTopEdgeTreatment)
            .build());        

然后将Fab 锚定到CardView：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    app:layout_anchorGravity="top|center"
    app:layout_anchor="@id/card"
    .../>

<com.google.android.material.card.MaterialCardView
    android:id="@+id/card"
    ../>