CardView卡片布局

1、首先我们需要导入依赖

    implementation 'com.android.support:recyclerview-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
    implementation 'com.android.support:cardview-v7:27.1.1'
    implementation 'com.github.bumptech.glide:glide:4.7.1'

2、再来看看CardView的基本使用

在RecyclerView的使用中我们需要为item写一个布局，而卡片布局就是将这个布局用CardView来写
比如今天我们要写一个展示水果的卡片布局item_card.xml：

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    android:elevation="5dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:id="@+id/fruit_image"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:textSize="16sp"/>
    </LinearLayout>

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

布局内容很简单，ImageView展示水果图片，TextView展示水果名字
这一步就是卡片布局需要做的，其他的就按照普通的RecyclerView的操作进行：
布局里添加一个RecyclerView

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

</android.support.constraint.ConstraintLayout>

3、最后到了java文件里的实现，这里跟之前recyclerView的学习基本相同，就不再赘述原理了：

• 1、我们先要写一个实体类Fruit:

public class Fruit {
    private String name;
    private int imageId;


    public String getName() {
        return name;
    }


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

• 2、然后就要为我们的RecyclerView写一个Adapter：

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
    private List<Fruit> mFruitList;
    private Context context;

    static class ViewHolder extends RecyclerView.ViewHolder{
        ImageView fruitImage;
        TextView fruitName;
        CardView cardView;
        public ViewHolder(View view) {
            super(view);
            cardView = (CardView)view;
            fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
            fruitName = (TextView) view.findViewById(R.id.fruit_name);
        }
    }
    public FruitAdapter(List<Fruit> fruitList){
        mFruitList = fruitList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (context == null){
            context = parent.getContext();
        }
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_card,parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        Glide.with(context).load(fruit.getImageId()).into(holder.fruitImage);
        holder.fruitName.setText(fruit.getName());
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }
}

• 3、最后在MainActivity里实现：

public class MainActivity extends AppCompatActivity {
    private List<Fruit> fruitList = new ArrayList<>();
    private FruitAdapter adapter;
    private Fruit[] fruits = {
            new Fruit("苹果",R.drawable.apple),
            new Fruit("香蕉",R.drawable.banana),
            new Fruit("橘子",R.drawable.orange),
            new Fruit("西瓜" ,R.drawable.watermlon),
            new Fruit("梨子",R.drawable.pear),
            new Fruit("葡萄",R.drawable.grape),
            new Fruit("菠萝",R.drawable.pineapple),
            new Fruit("草莓",R.drawable.strawberry),
            new Fruit("樱桃",R.drawable.cherry),
            new Fruit("芒果",R.drawable.mango)
            };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        GridLayoutManager layoutManager = new GridLayoutManager(this,2);//为RecyclerView设置网格布局，同时将列数设为2列
        recyclerView.setLayoutManager(layoutManager);
        adapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
    }
    
    private void initFruits(){
        fruitList.clear();
        for (int i = 0;i < 50;i++){
            Random random = new Random();
            int index = random.nextInt(fruits.length);
            fruitList.add(fruits[index]);

        }
    }
}

• 让我们来来看看运行效果图吧：