RecycleView实现复杂的布局

骑猪看日落 2022-07-15 18:24 201阅读 0赞

相信大家对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即可

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

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

<?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();
        }