卡片式布局+下拉刷新+可折叠式标题栏的使用

最新推荐文章于 2024-06-13 10:15:11 发布

Persist in Being Yourself

最新推荐文章于 2024-06-13 10:15:11 发布

阅读量386

点赞数 1

分类专栏： Android 文章标签： android 安卓移动开发

本文链接：https://blog.csdn.net/weixin_47619153/article/details/116709744

版权

本文介绍了如何在Android应用中实现卡片式布局、下拉刷新和可折叠式标题栏。首先，通过引入CardView和RecyclerView实现卡片布局，接着利用SwipeRefreshLayout实现下拉刷新功能。最后，通过AppBarLayout和CollapsingToolbarLayout打造可折叠标题栏。完整代码可在ToolbarTest项目中查看。

摘要由CSDN通过智能技术生成

这篇文章承接上篇Toolbar的使用，上篇文章的链接Toolbar的使用+DrawerLayout的使用+NavigationView的使用+悬浮按钮和可交互提示使用的综合案例

注意：以下讲解的都只将出现部分代码，完整的项目代码会在结尾给出。

卡片式布局：
①卡片式布局需要使用CardView控件，该控件也是一个FrameLayout，只是额外提供了圆角和阴影等效果。由于我们需要用到RecyclerView、CardView控件，所以在使用之前需要添加号相关依赖：

    implementation 'com.android.support:recyclerview-v7:24.2.1'
    implementation 'com.android.support:cardview-v7:24.2.1'
    implementation 'com.github.bumptech.glide:glide:3.7.0'

Glide是一个超级强大的图片加载库。
②修改activity_main.xml的代码，主要就是引入RecyclerView

 <androidx.coordinatorlayout.widget.CoordinatorLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

            <androidx.recyclerview.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/recycler_view" />

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/fab"
                android:layout_gravity="bottom|end"
                android:layout_margin="16dp"
                android:src="@drawable/done"/>

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

③定义一个实体类Fruit

public class Fruit {
   

    private String name;
    private int imageId;

    public Fruit(String name, int imageId) {
   
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
   
        return name;
    }

    public void setName(String name) {
   
        this.name = name;
    }

    public int getImageId() {
   
        return imageId;
    }

    public void setImageId(int imageId) {
   
        this.imageId = imageId;
    }
}

④定义RecyclerView的子项布局fuiit_item

<androidx.cardview.widget.CardView
    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="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

   <!-- app:cardCornerRadius指定卡片圆角弧度
    android:scaleType="centerCrop"可以让图片保持原有比例填充满ImageView，
    并将超出屏幕的部分裁剪掉-->

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:id="@+id/fruit_image"
            android:scaleType="centerCrop"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fruit_name"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

⑤为RecyclerView准备一个适配器FruitAdapter

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
   

    private Context mcontext;
    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder {
   
        CardView cardView;
        ImageView fuiitImage;
        TextView fruitName;

        public ViewHolder(@NonNull View itemView) {
   
            super(itemView);
            cardView = (CardView