安卓日记——玩转Material Design（RecyclerView+CardView篇）

前面安卓日记——玩转Material Design（伸缩顶部篇）提到要想用顶部伸缩必须要RecyclerView的配合，今天就给大家介绍一下RecyclerView的用法，顺带介绍一下CardView

RecyclerView是一种流式布局，所用的Adapter要求强制使用ViewHolder

这个RecyclerView比传统的流式布局更加自由，当然要写的东西也只是多那么一点而已

1.导入所需的包

compile 'com.android.support:cardview-v7:23.4.0'
compile 'com.android.support:appcompat-v7:23.4.0'

2.编辑主layout

<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

</RelativeLayout>

2.编辑RecyclerView的Item

新建一个layout（我取名为item_recycler）

<?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"
app:cardBackgroundColor="@android:color/white"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
android:layout_margin="10dp">

<ImageView
android:id="@+id/ivPic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"/>
</android.support.v7.widget.CardView>

使用CardView作为主布局，把边角弧度设为5dp，提升高度设为5dp

CardView就是这么简单

3.编辑一个Adapter

这个Adapter必须继承自RecyclerView.Adapter，而且要在这个Adapter新建一个继承自RecyclerView.ViewHolder的内部类

然后要在构造方法里传入数据

总的Adapter如下

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.RecVH> {
List<Product> products=new ArrayList<Product>();

//构造方法传入数据
public RecyclerAdapter(List<Product>products){
this.products=products;
}

//创造ViewHolder
@Override
public RecVH onCreateViewHolder(ViewGroup parent, int viewType) {
//把item的Layout转化成View传给ViewHolder
View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler,parent,false);
return new RecVH(view);
}
//    将数据放入相应的位置
@Override
public void onBindViewHolder(RecVH holder, int position) {
holder.tvTitle.setText(products.get(position).getTitle());
holder.ivPic.setImageResource(products.get(position).getImg());
}

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

//ViewHolder绑定控件
public class RecVH extends RecyclerView.ViewHolder{
ImageView ivPic;
TextView tvTitle;
public RecVH(View itemView) {
super(itemView);
ivPic= (ImageView) itemView.findViewById(R.id.ivPic);
tvTitle= (TextView) itemView.findViewById(R.id.tvTitle);
}
}
}

4.编辑界面逻辑代码

public class RecyclerActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private List<Product>products=new ArrayList<Product>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler);
initVar();
initView();
}

private void initView() {
recyclerView= (RecyclerView) findViewById(R.id.recyclerView);
//设置并列2行的layoutManager
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

//        设置线性布局的layoutManager
//        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
//        recyclerView.setLayoutManager(linearLayoutManager);

//设置adapter
RecyclerAdapter adapter=new RecyclerAdapter(products);
recyclerView.setAdapter(adapter);
}

//新建一些数据
private void initVar() {
products.add(new Product(R.drawable.avastar,"hello"));
products.add(new Product(R.drawable.avastar,"hello"));
products.add(new Product(R.drawable.logo,"hello"));
products.add(new Product(R.drawable.avastar,"hello"));
products.add(new Product(R.drawable.iconfont_source,"hello"));
products.add(new Product(R.drawable.iconfont_about,"hello"));
products.add(new Product(R.drawable.iconfont_source,"hello"));
products.add(new Product(R.drawable.avastar,"hello"));
}
}

我这里用的是两行并列显示的形式，如果想像listView一样的话就可以把RecyclerView的LayoutManager 设为LinearLayoutManager ，就是上面代码注释掉那一块

一个瀑布流的RecyclerView就大功告成了

把RecyclerView嵌入到篇博客相应的位置就好了

最终效果

其实RecyclerView还有一个玩法就是我想在RecyclerView顶部弄一个不同样式的布局怎么办呢？也就是说顶部item的layout不一样怎么办呢？就像我上篇博客的效果那样，顶部不一样

强大的RecyclerView当然也提供了解决方案

细心的网友会发现onCreateViewHolder方法里有个参数名为viewType

那怎么传入viewType，从而生成不同的ViewHolder呢？

只需重写getItemViewType方法就好了

@Override
public int getItemViewType(int position) {
return position;
}

表示我传入的viewType和position一样，新建ViewHolder时判断viewType如果是0的话就新建不同的View，并且把这个viewType传到ViewHolder的构造方法里，这样才能根据不同的位置使用不用的view绑定不同控件

还要注意的是这时总的item数就等于传入的List的Size+1,还有List中数据的位置也是比实际item的位置-1的。

以另外一个上一篇博客所使用到的Adapter为例

传入List还有顶部的数据

public class ListAdapter extends RecyclerView.Adapter<ListAdapter.MyViewHolder> {

List<String> mListData;

public ListAdapter(List<String> mListData) {
this.mListData = mListData;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
View view;
if (viewType==0){
view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item_top,
viewGroup, false);
}else {
view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item,
viewGroup, false);
}

return new MyViewHolder(view,viewType);
}

@Override
public void onBindViewHolder(MyViewHolder myViewHolder, int viewType) {
if (viewType!=0){
myViewHolder.title.setText(mListData.get(viewType-1));
}else {
myViewHolder.tvFoucusedNum.setText("100");
myViewHolder.tvFocusNum.setText("200");
}

}

//item数量是List的Size+1
@Override
public int getItemCount() {
return mListData == null ? 0 : mListData.size()+1;
}

@Override
public int getItemViewType(int position) {
return position;
}

class MyViewHolder extends RecyclerView.ViewHolder {

TextView title;
TextView tvFocusNum;
TextView tvFoucusedNum;
public MyViewHolder(View itemView,int i) {
super(itemView);
if (i==0){
tvFocusNum= (TextView) itemView.findViewById(R.id.tvFocusNum);
tvFoucusedNum= (TextView) itemView.findViewById(R.id.tvFocusedNum);
}else {
title = (TextView) itemView.findViewById(R.id.listitem_name);
}

}
}

}

这样子就可以区分开顶部啦。

好了关于Material Design的控件使用就介绍到这里，还有一些比较常用的控件也值得去玩的，我就不再介绍了。