Android RecyclerView+MaterialCardView 学习笔记

文章目录

前言
一、学习任务
二、操作步骤
- 1.添加依赖
- 2.编写activity_main.xml
- 定义一个实体类
- 编写fruit_item.xml
- 编写适配器FruitAdapter.java
- 修改MainActivity.java
- 运行效果图
总结

前言

MaterialCardView 是用于实现卡片布局效果的控件，由Material库提供。实际上，MaterialCardView 也是一个frameLayout，额外提供了圆角和阴影等效果。

一、学习任务

使用RecyclerView和MaterialCardView实现一个卡片布局。

二、操作步骤 1.添加依赖

代码如下：

    //实现RecyclerView要添加依赖
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    //Gilde库 一个超级强大的开源图片加载库
    implementation 'com.github.bumptech.glide:glide:4.9.0'

2.编写activity_main.xml

代码如下：

定义一个实体类

代码如下：

package com.example.networktest;

public class Fruit {

    private int f_img;//表示水果的图片
    private String f_name;//表示水果的名字

    public String getF_name() {
        return f_name;
    }

    public void setF_name(String f_name) {
        this.f_name = f_name;
    }

    public int getF_img() {
        return f_img;
    }

    public void setF_img(int f_img) {
        this.f_img = f_img;
    }


    public Fruit(String f_name, int f_img) {
        this.f_name = f_name;
        this.f_img = f_img;
    }


}

编写fruit_item.xml

代码如下：

编写适配器FruitAdapter.java

代码如下：

package com.example.networktest;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;

import java.util.List;

public class FruitAdapter extends RecyclerView.Adapter {

    private Context mContext;

    private List mFruits;

    static class ViewHolder extends RecyclerView.ViewHolder{

        CardView mCardView;

        ImageView f_image;

        TextView f_name;

        //绑定 控件（fruit_item）
        public ViewHolder(View view){

            super(view);

            mCardView=(CardView) view;

            f_image=view.findViewById(R.id.fruitImage);

            f_name=view.findViewById(R.id.fruitName);
        }
    }

    //绑定 数据
    public FruitAdapter(List fruitList){
        mFruits=fruitList;
    }

    //绑定 显示页面
    // onCreateViewHolder 用于创建一个ViewHolder实例
    @Override
    public FruitAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        if (mContext==null){
            mContext=parent.getContext();
        }

        View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(FruitAdapter.ViewHolder holder, int position) {
        //得到list中当前fruit实例
        Fruit fruit = mFruits.get(position);

        holder.f_name.setText(fruit.getF_name());
        //Glide.with() 传入一个context/activity/fragment
        //load() 加载图片
        //into() 将图片设置到具体某一个ImageView
        //为什么使用Glide设置图片？ 网上找的图片像素很高，不进行压缩就展示，容易引起内存溢出
        Glide.with(mContext).load(fruit.getF_img()).into(holder.f_image);
    }

    @Override
    public int getItemCount() {
        return mFruits.size();//获取 fruitList中的fruit数量
    }
}

修改MainActivity.java

代码如下：

package com.example.networktest;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;


import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.GridLayout;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;


public class MainActivity extends AppCompatActivity {
    private Toolbar tool_bar;
    private DrawerLayout drawerLayout;
    private NavigationView navView;
    private FloatingActionButton setting_btn;
    private RecyclerView mRecyclerView;


    //定义 一个水果数组
    private Fruit[] mFruits ={
            new Fruit("桃子",R.drawable.tao),
            new Fruit("香蕉",R.drawable.xiangjiao),
            new Fruit("草莓",R.drawable.caomei),
            new Fruit("枇杷",R.drawable.pipa),
            new Fruit("菠萝",R.drawable.bolo),
            new Fruit("柠檬",R.drawable.ningmeng),
            new Fruit("哈密瓜",R.drawable.hamigua),
            new Fruit("西红柿",R.drawable.xihongshi)
    };

    private List mFruitList=new ArrayList<>();
    private FruitAdapter mFruitAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruit();
        init();
        listen();
    }

    //初始化 fruitList的数据
    private void initFruit(){
        //清空数据
        mFruitList.clear();

        //一共挑选50个水果放在页面上（果多热闹）
        for (int i=0;i<50;i++){

            Random random=new Random();

            int index = random.nextInt(mFruits.length);

            //从fruit数组中随机存入一个水果到fruitList中
            mFruitList.add(mFruits[index]);
        }
    }
    private void init() {
        //绑定 recyclerView
        mRecyclerView=findViewById(R.id.f_recycler);

        //划分为 2列的gridLayout
        GridLayoutManager layoutManager = new GridLayoutManager(this,2);

        //绑定 布局
        mRecyclerView.setLayoutManager(layoutManager);

        //给适配器 绑定 数据
        mFruitAdapter=new FruitAdapter(mFruitList);

        //绑定 适配器
        mRecyclerView.setAdapter(mFruitAdapter);

        //绑定 NavigationView控件
        navView = findViewById(R.id.navView);

        //绑定 FloatingActionButton控件
        setting_btn = findViewById(R.id.setting_btn);

        //绑定 DrawerLayout控件
        drawerLayout = findViewById(R.id.drawer_layout);

        //绑定 Toolbar控件
        tool_bar = findViewById(R.id.tool_bar);

        //得到toolBar实例
        setSupportActionBar(tool_bar);

        //显示 tool_bar左侧按钮
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //设置 tool_bar左侧按钮图标
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.navi);

        //设置 note_group为默认选中
        navView.setCheckedItem(R.id.note_group);
    }



    private void listen() {

        //设置 一个菜单选项 选中事件 的监听器
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            //当用户点击了任意菜单，回调到onNavigationItemSelected方法中
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {

                //显示 当前点击了哪个item
                switch (item.getItemId()) {
                    case R.id.note_group:
                        Toast.makeText(getApplication(), "你点击了note_group", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.note_collect:
                        Toast.makeText(getApplication(), "你点击了note_collect", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.note_setting:
                        Toast.makeText(getApplication(), "你点击了note_setting", Toast.LENGTH_SHORT).show();
                        break;
                }

                //关闭 滑动菜单
                drawerLayout.closeDrawers();

                return true;
            }
        });

//        监听 FloatingActionButton控件
        setting_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //make方法：view 只要是当前界面布局的任意一个view就可以，Snackbar会使用这个view来自动查找最外层的布局
                //make方法：第二个参数 Snackbar中显示的内容
                //make方法：第三个参数 Snackbar显示的时长
                //make方法：setAction方法 设置一个动作
                Snackbar.make(v,"你点击了悬浮按钮",Snackbar.LENGTH_SHORT)
                        .setAction("后悔啦不点啦", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(getApplication(),"我假装不知道你点过按钮了",Toast.LENGTH_SHORT).show();
                    }
                }).show();
//                Toast.makeText(getApplication(),"你点击了悬浮按钮",Toast.LENGTH_SHORT).show();
            }
        });

    }

    //加载 toorlbar.xml这个菜单文件
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

    //处理多个按钮的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                //按下home按钮 打开滑动菜单
                //openDrawer() 传入gravity参数 确保这里的行为和xml中定义的一致
                drawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.love:
                Toast.makeText(this, "you clicked love", Toast.LENGTH_SHORT).show();
                break;
            case R.id.save:
                Toast.makeText(this, "you clicked save", Toast.LENGTH_SHORT).show();
                break;
            case R.id.rew:
                Toast.makeText(this, "you clicked rewrite", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

运行效果图

总结

注意frameLayout默认把控件放在左上角（coordinatorlayout就是一个增强版的frameLayout）。

Android RecyclerView+MaterialCardView 学习笔记

Java相关栏目本月热门文章