android新特性：RecyclerView与CardView配合使用

• 首先看一下效果吧

20170122143042622.png

RecyclerView与CardView配合使用，已经是当前APP很流行的一种做法了，那么让我们来简单了解一下该怎样使用吧！

• 在工程中添加依赖：

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

• 主页面很简单，就是个RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.hnshangyu.cardview.MainActivity">

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

• 初始化数据MainActivity

package cn.hnshangyu.cardview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.widget.Toast;

import java.util.concurrent.CopyOnWriteArrayList;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.recylerview)
    RecyclerView mRecyclerView;
    private CopyOnWriteArrayList<String> dataList = new CopyOnWriteArrayList<>();
    private MyCardAdatper myCardAdatper;
    private StaggeredGridLayoutManager manager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
        initListener();
    }

    private void initView() {
        for (int i = 0; i < 100; i++) {
            dataList.add("huangxiaoguo" + i);
        }
        manager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(manager);
        myCardAdatper = new MyCardAdatper(this, dataList);
        mRecyclerView.setAdapter(myCardAdatper);
    }

    private void initListener() {
        myCardAdatper.setOnItemClickListener(new MyCardAdatper.OnItemClickListener() {
            @Override
            public void OnItemClick(int position) {
                Toast.makeText(MainActivity.this, dataList.get(position), Toast.LENGTH_LONG).show();
            }
        });
    }

}

• Item布局引入CardView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="5dp"
    app:cardElevation="10dp"
    app:contentPadding="10dip">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/item_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:scaleType="fitCenter" />

        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/item_img"
            android:layout_centerHorizontal="true"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:textColor="@color/material_deep_teal_500" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

• 对RecyclerView进行条目适配Adapter

package cn.hnshangyu.cardview;

import android.content.Context;
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 java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * Created by Administrator on 2017/1/20.
 */

public class MyCardAdatper extends RecyclerView.Adapter<MyCardAdatper.ViewHolder> {
    private Context mContext;
    private List<String> mDataList;

    private OnItemClickListener onItemClickListener;

    public interface OnItemClickListener {
        void OnItemClick(int position);
    }

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    public MyCardAdatper(Context context, CopyOnWriteArrayList<String> dataList) {
        this.mContext = context;
        this.mDataList = dataList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_card_problem, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        holder.itemTitle.setText(mDataList.get(position));
        holder.itemImg.setImageResource(R.mipmap.ic_recyclerview_09);
        holder.cardview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (onItemClickListener != null) {
                    onItemClickListener.OnItemClick(position);
                }
            }
        });
    }


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


    static class ViewHolder extends RecyclerView.ViewHolder {
        @Bind(R.id.item_img)
        ImageView itemImg;
        @Bind(R.id.item_title)
        TextView itemTitle;
        @Bind(R.id.cardview)
        CardView cardview;

        ViewHolder(View view) {
            super(view);
            ButterKnife.bind(this, view);
        }
    }
}

这样是不是比普通的item好看呢