Android《第七章：CardView》

CardView适用于实现卡片式布局效果的重要控件，由appcompat-v7库提供，实际上CardView也是一个FrameLayout，只是额外提供了圆角和阴影效果，看上去有立体的感觉。一般CardView都用在ListView的item布局中。

使用方法很简单1：在app的build.gradle文件里面添加依赖库，注意版本要一致，不然会出错。

compile 'com.android.support:cardview-v7:25.3.1'
compile 'com.android.support:recyclerview-v7:25.3.1'

在这里我们结合RecyclerView 进行使用。

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bsoft.cardviewtest.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>
</LinearLayout>

item_card

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF">

        <ImageView
            android:id="@+id/masonry_item_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"/>


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

    <TextView
        android:id="@+id/masonry_item_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>
</LinearLayout>

以上是我们搭建的布局文件，那么我们首先来创建实体类：

/**
 * Created by 泅渡者
 * Created on 2017/10/16.
 * @author User
 */

public class Product {

    private String mTitle;
    private int mImg;

    public Product() {
    }

    public Product(String mTitle, int mImg) {
        this.mTitle = mTitle;
        this.mImg = mImg;
    }

    public String getmTitle() {
        return mTitle;
    }

    public void setmTitle(String mTitle) {
        this.mTitle = mTitle;
    }

    public int getmImg() {
        return mImg;
    }

    public void setmImg(int mImg) {
        this.mImg = mImg;
    }
}

然后就是我们的适配器文件 ：

/**
 * Created by 泅渡者
 * Created on 2017/10/16.
 */

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

    private Context mcontext;
    private List<Product> datas;

    public TestAdapter(Context mcontext, List<Product> datas) {
        this.mcontext = mcontext;
        this.datas = datas;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        ViewHolder holder = new ViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.item_card, parent,
                false));
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        holder.iv_image.getLayoutParams().height = getRandem();
        holder.iv_image.setImageResource(datas.get(position).getmImg());
        holder.tv_title.setText(datas.get(position).getmTitle());
        holder.card_view.setRadius(8);//设置图片圆角的半径大小
        holder.card_view.setCardElevation(8);//设置阴影部分大小
        holder.card_view.setContentPadding(5, 5, 5, 5);//设置图片距离阴影大小
    }

    private int getRandem() {
        Random random = new Random();
        int randNum = random.nextInt(100) + 101;
        return randNum;
    }

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

    class ViewHolder extends RecyclerView.ViewHolder {
        ImageView iv_image;
        TextView tv_title;
        CardView card_view;

        public ViewHolder(View itemView) {
            super(itemView);
            iv_image = (ImageView) itemView.findViewById(R.id.masonry_item_img);
            tv_title = (TextView) itemView.findViewById(R.id.masonry_item_title);
            card_view = (CardView) itemView.findViewById(R.id.card_view);
        }
    }

}

热案后我们再来看看我们的MainActivity：

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private TestAdapter adapter;
    private List<Product> datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();

    }


    private void initView() {
        recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        initData();
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        //设置RecyclerView布局管理器为2列垂直排布
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        adapter = new TestAdapter(this, datas);
        recyclerView.setAdapter(adapter);
        SpacesItemDecoration decoration = new SpacesItemDecoration(16);
        recyclerView.addItemDecoration(decoration);
    }

    private void initData() {
        datas = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            Product mproduct = new Product();
            mproduct.setmImg(R.drawable.timg);
            mproduct.setmTitle("测试xxxxxxx");
            datas.add(mproduct);
        }
    }
}

还有一个文件就是我们的分割线：

/**
 * Created by 泅渡者
 * Created on 2017/10/16.
 */
public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

    private int space;

    public SpacesItemDecoration(int space) {
        this.space = space;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.left = space;
        outRect.right = space;
        outRect.bottom = space;
        if (parent.getChildAdapterPosition(view) == 0) {
            outRect.top = space;
        }
    }
}

大功告成，由于这里基本没有什么难点，所以就不在讲解。再来看看运行结果吧：

image.png
布局不太好看，凑合下。。。。
代码上传至：https://gitee.com/13102169005/Android_Projects.git