RecycleView实现复杂的布局

相信大家对RecycleView已经很熟悉了，很久之前就听说它将取代listview,我不知道是不是这样，但是它的功能确实强大。下面是RecycleView的特点：-

**不关心item是否正确的显示，如何显示**- 

**不关心Item间如何分隔**-

**不关心Item增加与删除的动画效果**- 

**仅仅关注如何回收与复用View** 

我们可以通过layoutManager来显示item的显示风格 

通过实现ItemDecoration来绘制item之间的分隔状态

通过ItemAnimation来设置删除和增加的动画效果与RecycleView相关的  

类AdapterViewHolderlayoutManagerItemDecorationItemAnimationDividerItemDecoration.java 这个是一个包装的类，直接拷贝到项目中就行

------布局-----<android.support.v7.widget.RecyclerView

android:id="@+id/id_recycleView"

android:layout_width="match_parent"

android:layout_height="match_parent">

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

-----Adapter-------

//首先我们的适配器是要继承RecycleView.Adapter<RecycleView.ViewHolder>这个类的

//这个类里里面已经强制需要我们使用ViewHolder这个类

public class SimpleAdapter extends RecyclerView.Adapter<MyviewHolder> {
private LayoutInflater minflater;
private Context context;
private List<String> mData;
//构造函数，初始化数据
public SimpleAdapter(Context context, List<String> datas) {
this.context = context;
this.mData = datas;
minflater = LayoutInflater.from(context);
    }

@Override

//创建viewHolder
public MyviewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View inflate = minflater.inflate(R.layout.item_simple_textview,parent,false);
        MyviewHolder viewHolder = new MyviewHolder(inflate);

return viewHolder;
    }

@Override
//绑定ViewHolder
public void onBindViewHolder(MyviewHolder holder, int position) {
      holder.tv.setText(mData.get(position));
    }

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

//工具类
class MyviewHolder extends RecyclerView.ViewHolder {
    TextView tv ;
public MyviewHolder(View itemView) {

super(itemView);
tv = (TextView) itemView.findViewById(R.id.id_tv);
    }
}

--------MainActivity---------

mRecycleView = (RecyclerView) findViewById(R.id.id_recycleView);
mAdapter = new SimpleAdapter(this,mDatas);
mRecycleView.setAdapter(mAdapter);
//设置RecycleView的布局管理   这里可以设置linnerlayoutManager也可以设置GridView形式
LinearLayoutManager  linnermanger = new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false);
mRecycleView.setLayoutManager(linnermanger);

/**
mRecycleView.setLayoutManager(new GridLayoutManager(this,3));
mRecycleView.setLayoutManager(new LinearLayoutManager(this));
mRecycleView.setLayoutManager(new StaggeredGridLayoutManager(5,StaggeredGridLayoutManager.HORIZONTAL));
*/

//设置RecycleView的item分割线
//        mRecycleView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL_LIST));

==================以上是Recycle的一些基本的只是，下面实现复杂布局======

在我们的主布局中依旧是一个RecycleView即可

<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"
    tools:context="test.huawei.com.myrecycle.MainActivity">

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

</RelativeLayout>

//我们写出第一种形式的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="60dp"
    android:gravity="center_vertical">

    <ImageView
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:id="@+id/avatar"
    android:layout_marginLeft="20dp"/>
    <TextView
        tools:text="hongbiao"
        android:layout_marginLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/name"/>
</LinearLayout>

//我们写出第二种形式的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="60dp"

    android:gravity="center_vertical">
<ImageView
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:id="@+id/avatar"
    android:layout_marginLeft="20dp"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="20dp">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="hongbiao"/>

        <TextView
            tools:text="hongbiao"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:id="@+id/content"/>
    </LinearLayout>
</LinearLayout>

//我们写出第三种形式的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="60dp"

    android:gravity="center_vertical">
<ImageView
    android:layout_centerVertical="true"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginLeft="20dp"
    android:id="@+id/avatar"/>

    <LinearLayout
        android:layout_toRightOf="@id/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            tools:text="hongbiao"/>

        <TextView
            tools:text="hongbiao"
            android:layout_marginLeft="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:id="@+id/content"/>
    </LinearLayout>

   <ImageView
       android:layout_alignParentRight="true"
       android:id="@+id/contentimage"
       android:layout_centerVertical="true"
       android:layout_width="100dp"
       android:layout_marginRight="20dp"
       android:layout_height="40dp" />
</RelativeLayout>

========上面三种布局对应三种ViewHolder，到时候根据type的类型来显示不同的ViewHolder====

public class TypeOneViewViewHolder extends TypeAbstractViewHolder {

    public ImageView avatar ;
    public TextView name ;


    public TypeOneViewViewHolder(View itemView) {
        super(itemView);
        avatar = (ImageView) itemView.findViewById(R.id.avatar);
        name   = (TextView) itemView.findViewById(R.id.name);
        itemView.setBackgroundColor(Color.BLUE);
    }
    @Override
    public void bindHolder(DataModel molder){
        avatar.setBackgroundResource(molder.avatarcolor);
        name.setText(molder.name);
    }

}

public class TypeTwoViewViewHolder extends TypeAbstractViewHolder {

    public ImageView avatar ;
    public TextView name ;
    public TextView  content;

    public TypeTwoViewViewHolder(View itemView) {
        super(itemView);
        avatar = (ImageView) itemView.findViewById(R.id.avatar);
        name   = (TextView) itemView.findViewById(R.id.name);
        content   = (TextView) itemView.findViewById(R.id.content);
        itemView.setBackgroundColor(Color.YELLOW);
    }
    @Override
    public void bindHolder(DataModel molder){
        avatar.setBackgroundResource(molder.avatarcolor);
        name.setText(molder.name);
        content.setText(molder.content);
    }

}

public class TypeThreeViewViewHolder extends TypeAbstractViewHolder {

    public ImageView avatar ;
    public TextView name ;
    public TextView content;
    public ImageView contentImage;
    public TypeThreeViewViewHolder(View itemView) {
        super(itemView);
        avatar = (ImageView) itemView.findViewById(R.id.avatar);
        name   = (TextView) itemView.findViewById(R.id.name);
        content   = (TextView) itemView.findViewById(R.id.content);
        contentImage = (ImageView) itemView.findViewById(R.id.contentimage);
        itemView.setBackgroundColor(Color.GREEN);
    }

    @Override
    public void bindHolder(DataModel molder){
        avatar.setBackgroundResource(molder.avatarcolor);
        name.setText(molder.name);
        content.setText(molder.content);
        contentImage.setBackgroundResource(molder.contentColor);
    }

}

-----他们一起继承一个抽象类

public abstract  class TypeAbstractViewHolder extends RecyclerView.ViewHolder {
    public TypeAbstractViewHolder(View itemView) {
        super(itemView);
    }

    public abstract void bindHolder(DataModel molder);
}

=======核心Adapter======

public class DemoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private LayoutInflater  mLayoutInflater ;

    private List<DataModel> mlist = new ArrayList<>();


    //将集合直接全部加进来
    public void addList(List<DataModel> list){
        mlist.addAll(list);
    }

    public DemoAdapter(Context context) {
        mLayoutInflater = LayoutInflater.from(context);


    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {


       switch (viewType){
           case DataModel.TYPE_ONE:
               return  new TypeOneViewViewHolder(mLayoutInflater.inflate(R.layout.item_type_one,parent,false));

           case DataModel.TYPE_TWO:
               return  new TypeTwoViewViewHolder(mLayoutInflater.inflate(R.layout.item_type_two,parent,false));

           case DataModel.TYPE_THREE:
               return  new TypeThreeViewViewHolder(mLayoutInflater.inflate(R.layout.item_type_three,parent,false));

           default:
               break;

       }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
//      int  viewType = getItemViewType(position);
        ((TypeAbstractViewHolder)holder).bindHolder(mlist.get(position));
//        switch (viewType){
//            case DataModel.TYPE_ONE:
//                return  new TypeOneViewViewHolder(mLayoutInflater.inflate(R.layout.item_type_one,parent,false));
//
//            case DataModel.TYPE_TWO:
//                return  new TypeOneViewViewHolder(mLayoutInflater.inflate(R.layout.item_type_two,parent,false));
//
//            case DataModel.TYPE_THREE:
//                return  new TypeOneViewViewHolder(mLayoutInflater.inflate(R.layout.item_type_three,parent,false));
//
//            default:
//                break;
//
//        }
    }

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

    @Override
    public int getItemViewType(int position) {
        return mlist.get(position).type;
    }
}

=======javaBean=======

public class DataModel {


    //下面的这三种类型是后面布局对应的类型，通过这个类型的不同可以采用不同的布局
    public static final int TYPE_ONE = 1;
    public static final int TYPE_TWO = 2;
    public static final int TYPE_THREE = 3;

    public int type ;
    public int avatarcolor ;//头像颜色
    public String name ;
    public String content ;
    public int contentColor ;

}

======================================

=================MainActivity=====================

public class MainActivity extends AppCompatActivity {
    private RecyclerView mrecyclerView;
    private DemoAdapter mAdapter;
    //定义一些颜色的数组
    int colors[] = {android.R.color.holo_red_dark,
            android.R.color.holo_blue_dark,
            android.R.color.holo_orange_dark};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mrecyclerView = (RecyclerView) findViewById(R.id.recycleview);
        final GridLayoutManager   gridlayout = new GridLayoutManager(this,2);
        gridlayout.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                int  type = mrecyclerView.getAdapter().getItemViewType(position);
                if (type==3) {
                    return gridlayout.getSpanCount();
                }else{
                    return 1;
                }
            }
        });
        mrecyclerView.setLayoutManager(gridlayout);
        mAdapter = new DemoAdapter(this);
        mrecyclerView.setAdapter(mAdapter);
        mrecyclerView.addItemDecoration(new RecyclerView.ItemDecoration(){
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
               GridLayoutManager.LayoutParams  layoutParams = (GridLayoutManager.LayoutParams) view.getLayoutParams();
               int spanSize = layoutParams.getSpanSize();
                int spanIndex = layoutParams.getSpanIndex();
                outRect.top = 20 ;
                if (spanSize!=gridlayout.getSpanCount()){
                    if (spanIndex==1){
                        outRect.left = 10;

                    }else{
                        outRect.right = 10;
                    }
                }
            }
        });

        initData();//初始化模拟一些数据
    }

    private void initData() {
        List<DataModel> list = new ArrayList<>();

        for (int i = 0; i <= 40; i++) {
            //随机数生成1到3类型
            int type = ((int) (Math.random() * 3) + 1);
            DataModel data = new DataModel();
            data.avatarcolor = colors[type-1];//模拟头像，用背景颜色代替
            data.type = type ;//将类型值赋值到model当中
            data.name = "name:"+type;
            data.content = "content:"+i;
            data.contentColor = colors[(type+1)%3];//content的模拟背景
            list.add(data);
        }
        mAdapter.addList(list);
        mAdapter.notifyDataSetChanged();
    }