RecycleView实现复杂的布局

来源：互联网发布：iphone mac连接编辑：程序博客网时间：2024/05/21 17:54

相信大家对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();    }

1 0