CardView：赋予你流畅动感的 Material Design 布局

CardView 与 AppBarLayout：打造流畅动感的 Material Design 布局

CardView 简介

在 Android 开发中，CardView 控件是打造卡片式布局的利器，其自带的阴影效果为应用程序增添了质感与层次感。

特性：

• 卡片式布局： 轻松呈现独立的卡片式内容。
• 阴影效果： 赋予卡片质感和层次感。
• 圆角： 美化卡片边缘，提升视觉效果。
• 点击事件： 响应用户的点击操作。

用法：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="卡片内容"/>

</androidx.cardview.widget.CardView>

AppBarLayout 简介

AppBarLayout 专注于实现 Material Design 中的 AppBar，为应用程序提供层次感与导航功能。

特性：

• AppBar： 创建标题栏、导航栏和标签栏等 AppBar。
• 滚动效果： 随着用户滚动页面，AppBar 灵活隐藏或显示。
• 标签栏： 方便用户在不同内容之间切换。
• 标题栏： 展示应用程序标题和导航按钮。

用法：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"/>

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

CardView 与 AppBarLayout 的结合

CardView 与 AppBarLayout 相辅相成，打造更美观、层次更丰富的 Material Design 布局。

卡片式导航栏：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮1"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮2"/>

    </LinearLayout>
</androidx.cardview.widget.CardView>

卡片式标签栏：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.fragment.app.FragmentStateAdapter>
            // ...

        </androidx.fragment.app.FragmentStateAdapter>

    </androidx.viewpager2.widget.ViewPager2>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.cardview.widget.CardView>

卡片式标题栏：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题"/>

    </androidx.appcompat.widget.Toolbar>

</androidx.cardview.widget.CardView>

结语

CardView 和 AppBarLayout 是打造 Material Design 布局的利器，它们为应用程序带来美观、灵动和层次感。熟练运用这两个控件，你将能创建出令人印象深刻的 Android 界面。

常见问题解答

1. CardView 和 AppBarLayout 有何区别？

   • CardView用于创建卡片式布局，而 AppBarLayout 用于创建 AppBar，包括标题栏、导航栏和标签栏。

2. 如何为 CardView 添加圆角？

   • 通过 app:cardCornerRadius 属性设置圆角半径。

3. 如何让 AppBarLayout 随着滚动隐藏？

   • 使用 app:layout_scrollFlags="scroll|enterAlways" 属性即可实现。

4. 如何为 AppBarLayout 添加标签栏？

   • 使用 androidx.viewpager2.widget.ViewPager2 和 com.google.android.material.tabs.TabLayout 即可实现。

5. 如何将 CardView 集成到 AppBarLayout 中？

   • 将 CardView 作为 AppBarLayout 的子控件即可实现。