卡片布局CardView

Posted 2020-09-29 静静的码代码

CardView用于实现卡片式的布局效果。由appcompat-v7库提供。CardView其实也是一种FrameLayout。用CardView和RecyclerView实现图片文字和卡片布局。

用到RecyclerView和CardView控件，就要在闭包中添加一下依赖

    compile ‘com.android.support:recyclerview-v7:25.0.0‘
    compile ‘com.android.support:cardview-v7:25.0.0‘
    compile ‘com.github.bumptech.glide:glide:3.7.0‘

用法：

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

定义一个实体类 Fruit，写你要显示在界面的 名字，ID，的setget方法，外加一个带参构造。

还要为RecyclerView建一个子布局，也就是卡片布局。

CardView作为最外层布局，他只是一个加强版的FrameLayout，并没有方便的定位方式，在里面在嵌套一个LinearLayout。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/fruit_tv_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fruit_tv_name"
            android:layout_gravity="center_horizontal"
            android:layout_margin="6dp"
            android:textSize="16sp"/>
    </LinearLayout>

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

 并且新建一个RecyclerView适配器FruitAdapter， 并且继承自RecyclerView.Adapter泛型指定为FruitAdapter.ViewHolder

package ca.sd.zsl.toolbartest;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;



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

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

        public ViewHolder(View itemView) {
            super(itemView);
            cardView = (CardView) itemView;
            fruitImage = (ImageView) itemView.findViewById(R.id.fruit_tv_image);
            fruitName = (TextView) itemView.findViewById(R.id.fruit_tv_name);
        }
    }

    public FruitAdpapter(List<Fruit> fruitList){
        mFruitList = fruitList;
    }


    @Override
    public 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(ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);获取条目
        holder.fruitName.setText(fruit.getName());在该条目设置文字
　　　　利用Glide加载水果图片，.with()，传入一个Context，Activity，Fragment参数，
　　　　调用load()方法去加载图片，里面可以是URL地址，本地路径，一个资源ID，最后调用into()，方法将图片
　　　　然后设置到具体某一个ImageView中。
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

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

}

主函数

private List<Fruit> fruitList = new ArrayList<>();
    private FruitAdpapter adpapter;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

//一个初始化显示数据的方法
initFruits();
找到RecyclerView布局
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
获取GridLayoutManager 对象，构造函数两个参数，第一Context，第二个是屏幕显示几列
GridLayoutManager layoutManager = new GridLayoutManager(MainActivity.this, 2);
设置布局管理器，实现RecyclerView布局内容的显示，里面只包含LinearLayoutManager（线性布局管理器），
StaggeredGridLayoutManager（错列网格布局管理器），GridLayoutManager（网格布局管理器）
recyclerView.setLayoutManager(layoutManager);
获取适配器实例，并添加到RecyclerView对象中
adpapter = new FruitAdpapter(fruitList);
recyclerView.setAdapter(adpapter);
}