RecycleView多布局的实现

在之前的一篇“RecycleView的简单使用,替代的ListView,GridView的并且实现瀑布流”  http://www.jianshu.com/p/f6418086a1b3
介绍了RecycleView的简单使用,并实现了RecycleView的点击事件和长按事件,本篇文章主要讲解的是RecycleView实现多布局。
现在来看下效果图如下:

[图1.png]

图二:

图2.png

图三:

图三巴纽

上图+实现了四种布局:现在来看看主布局XML:

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#E0F2F1"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".main.MainActivity">

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

其他四种布局:
布局一:item_01.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <ImageView
        android:id="@+id/iv_item1"
        android:src="@mipmap/ic_launcher"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
    <TextView
        android:id="@+id/tv_item1"
        android:text="title"
        android:textColor="#e5ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

布局二:item_list_recycle.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="@android:color/holo_orange_dark"
    android:layout_height="350dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:background="@android:color/white"
        android:layout_height="330dp">
        <ImageView
            android:id="@+id/img_shopping_img"
            android:src="@drawable/shop02"
            android:layout_width="match_parent"
            android:layout_margin="5dp"
            android:layout_height="150dp" />


        <LinearLayout
            android:id="@+id/line_shoppong"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_below="@id/img_shopping_img"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/tv_shopping_name"
                android:text="手机"
                android:padding="5dp"
                android:textSize="15sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/tv_shopping_desc"
                android:text="手机放寒假"
                android:padding="5dp"
                android:textSize="12sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/tv_shopping_new_money"
                android:text="¥5567"
                android:padding="5dp"
                android:textSize="14sp"
                android:textColor="@android:color/holo_red_light"
                android:layout_width="wrap_content"
                android:layout_marginRight="10dp"
                android:layout_height="wrap_content" />
            <View
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="2dp"/>
            <Button
                android:id="@+id/item_shopping_order"
                android:layout_width="120dp"
                android:text="立即购买"
                android:layout_marginBottom="10dp"
                android:layout_marginRight="10dp"
                android:background="@android:color/holo_red_light"
                android:textColor="@android:color/white"
                android:layout_height="30dp" />

        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

布局三和布局五一样:item_grid_recycle.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_orange_light">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@android:color/white">

        <ImageView
            android:id="@+id/img_shopping_img"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_margin="5dp"
            android:src="@drawable/shop02" />


        <LinearLayout
            android:id="@+id/line_shoppong"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/img_shopping_img"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_shopping_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="手机放寒假"
                android:textSize="15sp" />

            <View
                android:layout_width="0dp"
                android:layout_height="2dp"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/tv_shopping_new_money"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:padding="5dp"
                android:text="¥5567"
                android:textColor="@android:color/holo_red_light"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv_shopping_old_money"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:padding="5dp"
                android:text="原价:¥8200"
                android:textSize="12sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/line_shoppong"
            android:layout_marginBottom="5dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_shopping_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"

                android:text="手机放寒假"
                android:textSize="12sp" />

            <View
                android:layout_width="0dp"
                android:layout_height="2dp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/item_shopping_order"
                android:layout_width="120dp"
                android:layout_height="30dp"
                android:layout_marginBottom="10dp"
                android:layout_marginRight="10dp"
                android:background="@android:color/holo_red_light"
                android:text="立即购买"
                android:textColor="@android:color/white" />


        </LinearLayout>


    </RelativeLayout>
</LinearLayout>

布局四:item_recycle_02.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="#dcb00f"
    card_view:cardElevation="4dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:orientation="vertical"
        >

        <TextView
            android:id="@+id/tv_item2_text"
            android:textColor="#eff1f0ef"
            android:gravity="center"
            android:text="手机话费框架和"
            android:textSize="23sp"
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/tv_item2_text1"
            android:gravity="center"
            android:text="手机话费框架和"
            android:textSize="14sp"
            android:padding="4dp"
            android:textColor="#eff1f0ef"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>

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

多布局实现的适配器:RecycleViewMulitAdapter 
其中方法getItemViewType(位置)获取数据源某个数据的类型; ViewHolder onCreateViewHolder(ViewGroup中父,INT viewType)根据不同的viewtype创建不同的ViewHolder 
onBindViewHolder(ViewHolder保持器,INT位置)根据不同的viewtype把数据绑定到对应的布局中

public class RecycleViewMulitAdapter extends RecyclerView.Adapter<RecycleViewMulitAdapter.ViewHolder> implements View.OnClickListener
{

    Context mContext;
    List<RecycleListMode> listRecyDatas;
    LayoutInflater inflate;
    RecyclerView mRecycleView;
    private OnItemClickListener clickListener;
    public RecycleViewMulitAdapter(Context mContext, List<RecycleListMode> listRecyDatas) {

        this.mContext=mContext;
        this.listRecyDatas=listRecyDatas;
        inflate= LayoutInflater.from(mContext);
    }


    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);

        mRecycleView=recyclerView;
    }

    public void addRes(List<RecycleListMode> data){
        if (data!=null){
            this.listRecyDatas=data;
            notifyDataSetChanged();
        }

    }

    public void addLoadMore(List<RecycleListMode> dataload){
        if (dataload.size()>0){
            listRecyDatas.addAll(dataload);
            notifyDataSetChanged();
        }

    }

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

    public void setClickListener(RecycleViewMulitAdapter.OnItemClickListener clickListener){
        this.clickListener=clickListener;

    }

    private static final String TAG = "RecycleViewMulitAdapter";
    @Override
    public void onClick(View v) {
        int childAdapterPosition=mRecycleView.getChildAdapterPosition(v);
        if (clickListener!=null){
            clickListener.setItemClickListener(childAdapterPosition);

            Log.i(TAG, "onClick: "+childAdapterPosition);
        }

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

        View itemView=null;
        switch (viewType){
            case 0:

                itemView=inflate.inflate(R.layout.item_01,parent,false);
                break;
            case 1:

                itemView=inflate.inflate(R.layout.item_list_recycle,parent,false);
                break;
            case 2:
                itemView=inflate.inflate(R.layout.item_grid_recycle,parent,false);
                break;
            case 3:
                itemView=inflate.inflate(R.layout.item_recycle_02,parent,false);
                break;
            case 4:
                itemView=inflate.inflate(R.layout.item_list_recycle,parent,false);
                break;
        }

        ViewHolder holder=new ViewHolder(itemView);

        itemView.setOnClickListener(this);

        return holder;
    }

    @Override
    public int getItemViewType(int position) {
        return listRecyDatas.get(position).getStyle();
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        switch (getItemViewType(position)){
            case 0:
                ImageView imgitem= (ImageView) holder.getView(R.id.iv_item1);
                Glide.with(mContext).load(listRecyDatas.get(position).getImgURL()).into(imgitem);

                break;
            case 1:
            case 4:

               TextView tvName= (TextView) holder.getView(R.id.tv_shopping_name);
               TextView tvDesc= (TextView) holder.getView(R.id.tv_shopping_desc);
               TextView tvPrice= (TextView) holder.getView(R.id.tv_shopping_new_money);
               ImageView imgOrder= (ImageView) holder.getView(R.id.img_shopping_img);

                tvName.setText(listRecyDatas.get(position).getName());
                tvDesc.setText(listRecyDatas.get(position).getContent());
                tvPrice.setText(listRecyDatas.get(position).getPrice());
                Glide.with(mContext).load(listRecyDatas.get(position).getImgURL()).into(imgOrder);


                break;
            case 2:

                TextView tvName2= (TextView) holder.getView(R.id.tv_shopping_name);
                TextView tvDesc2= (TextView) holder.getView(R.id.tv_shopping_desc);
                TextView tvPrice2= (TextView) holder.getView(R.id.tv_shopping_new_money);
                ImageView imgOrder2= (ImageView) holder.getView(R.id.img_shopping_img);

                tvName2.setText(listRecyDatas.get(position).getName());
                tvDesc2.setText(listRecyDatas.get(position).getContent());
                tvPrice2.setText(listRecyDatas.get(position).getPrice());
                Glide.with(mContext).load(listRecyDatas.get(position).getImgURL()).into(imgOrder2);

                break;

            case 3:
              TextView textView= (TextView) holder.getView(R.id.tv_item2_text);
              TextView textView1= (TextView) holder.getView(R.id.tv_item2_text1);

                textView.setText(listRecyDatas.get(position).getName());
                textView1.setText(listRecyDatas.get(position).getContent());

        }

    }

    @Override
    public int getItemCount() {
        return listRecyDatas.size()>0? listRecyDatas.size():0;
    }

      // ViewHolder的创建使用共同的ViewHolder
    public class ViewHolder extends RecyclerView.ViewHolder {

        private Map<Integer,View> mCachView;
        public ViewHolder(View itemView) {
            super(itemView);

            mCachView=new HashMap<>();

        }

        public View getView(int resId){
            View view;
            if (mCachView.containsKey(resId)){
                view=mCachView.get(resId);
            }else{
                view=itemView.findViewById(resId);
                mCachView.put(resId,view);
            }

            return view;

        }
    }
}

在主页代码中:RecycleViewMuliteActivity实现数据危机

public class  RecycleViewMuliteActivity extends AppCompatActivity implements MyAdapter.OnItemClickListener {

   private static final String TAG = "RecycleViewMuliteActivi";
    private RecyclerView recyclerView;
    private int spansize=2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_recycle_view_mulite);
        recyclerView = (RecyclerView) findViewById(R.id.recycleViewlist);
        /**
         * 模拟数据实现商城  RecycleView  的多布局实现
         */
        final List<RecycleListMode> listRecyDatas=new ArrayList<>();
        RecycleListMode mode0=new RecycleListMode();
        mode0.setStyle(0);
        mode0.setImgURL("https://img.alicdn.com/simba/img/TB1Kod0SXXXXXbPXFXXSutbFXXX.jpg");
        listRecyDatas.add(mode0);

        RecycleListMode mode=new RecycleListMode();
        mode.setId("");
        mode.setName("满66减30三合一海鲜");
        mode.setContent("(虾仁+鱿鱼须+墨鱼花)185g/包)");
        mode.setPrice("¥ 19.90");
        mode.setStyle(1);
        mode.setImgURL("https://img.alicdn.com/imgextra/i1/1910146537/TB2y03MabSGJuJjSZFqXXXo2pXa_!!1910146537.jpg_430x430q90.jpg");
        listRecyDatas.add(mode);

        RecycleListMode mode1=new RecycleListMode();
        mode1.setId("");
        mode1.setStyle(1);
        mode1.setName("【天猫超市】泸州老窖奥普蓝");
        mode1.setContent("原浆啤酒320ml*6罐(蓝罐) 六连包");
        mode1.setPrice("¥ 24.90");
        mode1.setImgURL("https://img.alicdn.com/imgextra/i3/725677994/TB1franSVXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg");
        listRecyDatas.add(mode1);

        RecycleListMode mode2=new RecycleListMode();
        mode2.setId("");
        mode2.setStyle(1);
        mode2.setPrice("¥ 19.90");
        mode2.setName("满66减30三合一海鲜");
        mode2.setContent("(虾仁+鱿鱼须+墨鱼花)185g/包)");
        mode2.setImgURL("https://img.alicdn.com/imgextra/i1/1910146537/TB2y03MabSGJuJjSZFqXXXo2pXa_!!1910146537.jpg_430x430q90.jpg");
        listRecyDatas.add(mode2);

        RecycleListMode mode3=new RecycleListMode();
        mode3.setId("");
        mode3.setStyle(1);
        mode3.setPrice("¥ 19.90");
        mode3.setName("满66减30三合一海鲜");
        mode3.setContent("(虾仁+鱿鱼须+墨鱼花)185g/包)");
        mode3.setImgURL("https://img.alicdn.com/imgextra/i1/1910146537/TB2y03MabSGJuJjSZFqXXXo2pXa_!!1910146537.jpg_430x430q90.jpg");
        listRecyDatas.add(mode3);

        RecycleListMode mode6=new RecycleListMode();
        mode6.setId("");
        mode6.setStyle(3);
        mode6.setPrice("");
        mode6.setName("超值优惠,首买送家电");
        mode6.setContent("接口和首付款计划开始无法互联网");
        listRecyDatas.add(mode6);

        RecycleListMode mode4=new RecycleListMode();
        mode4.setId("");
        mode4.setStyle(2);
        mode4.setPrice("¥ 19.90");
        mode4.setName("满66减30三合一海鲜");
        mode4.setContent("(虾仁+鱿鱼须+墨鱼花)185g/包)");
        mode4.setImgURL("https://img.alicdn.com/imgextra/i1/1910146537/TB2y03MabSGJuJjSZFqXXXo2pXa_!!1910146537.jpg_430x430q90.jpg");
        listRecyDatas.add(mode4);
        RecycleListMode mode5=new RecycleListMode();
        mode5.setId("");
        mode5.setStyle(2);
        mode5.setPrice("¥ 19.90");
        mode5.setName("满66减30三合一海鲜");
        mode5.setContent("(虾仁+鱿鱼须+墨鱼花)185g/包)");
        mode5.setImgURL("https://img.alicdn.com/imgextra/i1/1910146537/TB2y03MabSGJuJjSZFqXXXo2pXa_!!1910146537.jpg_430x430q90.jpg");
        listRecyDatas.add(mode5);

        for (int i = 0; i < 9; i++) {
            RecycleListMode mode7=new RecycleListMode();
            mode7.setId("");
            mode7.setStyle(4);
            mode7.setPrice("¥ 19.90");
            mode7.setName("满66减30三合一海鲜");
            mode7.setContent("(虾仁+鱿鱼须+墨鱼花)185g/包)");
            mode7.setImgURL("https://img.alicdn.com/imgextra/i1/1910146537/TB2y03MabSGJuJjSZFqXXXo2pXa_!!1910146537.jpg_430x430q90.jpg");
            listRecyDatas.add(mode7);
        }

        GridLayoutManager gridLayoutManager=new GridLayoutManager(RecycleViewMuliteActivity.this,6);
        final RecycleViewMulitAdapter recycleAdapter=new RecycleViewMulitAdapter(this,listRecyDatas);


        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {

                switch (recycleAdapter.getItemViewType(position)){
                    case 0:
                        spansize=6;
                        break;
                    case 1:
                        spansize=3;
                        break;
                    case 2:
                        spansize=3;
                        break;
                    case 3:
                        spansize=6;
                        break;
                    case 4:
                        spansize=2;


                }
                Log.i(TAG, "getSpanSize: "+spansize);
                return spansize;
            }
        });
        recyclerView.setLayoutManager(gridLayoutManager);
        recyclerView.setAdapter(recycleAdapter);
        recycleAdapter.setClickListener(new RecycleViewMulitAdapter.OnItemClickListener() {
            @Override
            public void setItemClickListener(int position) {

                String name = listRecyDatas.get(position).getName();

                Toast.makeText(RecycleViewMuliteActivity.this, "第点击第"+position+"个"+name, Toast.LENGTH_SHORT).show();
            }
        });
    }


    @Override
    public void setItemClickListener(int position) {

        Log.i(TAG, "setItemClickListener: "+position);
    }
}

好,现在RecycleView的所布局已实现完毕。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用ItemTouchHelper来实现RecycleView布局的拖拽和滑动删除功能。下面是一个简单的示例代码: 1. 创建ItemTouchHelper.Callback ``` public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback { private final ItemTouchHelperAdapter mAdapter; public MyItemTouchHelperCallback(ItemTouchHelperAdapter adapter) { mAdapter = adapter; } @Override public boolean isLongPressDragEnabled() { return true; } @Override public boolean isItemViewSwipeEnabled() { return true; } @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END; return makeMovementFlags(dragFlags, swipeFlags); } @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { mAdapter.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition()); return true; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { mAdapter.onItemDismiss(viewHolder.getAdapterPosition()); } } ``` 2. 创建ItemTouchHelperAdapter ``` public interface ItemTouchHelperAdapter { void onItemMove(int fromPosition, int toPosition); void onItemDismiss(int position); } ``` 3. 在Adapter中实现ItemTouchHelperAdapter接口 ``` public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements ItemTouchHelperAdapter { private List<MyData> mData; ... @Override public void onItemMove(int fromPosition, int toPosition) { MyData item = mData.get(fromPosition); mData.remove(fromPosition); mData.add(toPosition, item); notifyItemMoved(fromPosition, toPosition); } @Override public void onItemDismiss(int position) { mData.remove(position); notifyItemRemoved(position); } } ``` 4. 在Activity或Fragment中添加ItemTouchHelper ``` ItemTouchHelper.Callback callback = new MyItemTouchHelperCallback(mAdapter); ItemTouchHelper touchHelper = new ItemTouchHelper(callback); touchHelper.attachToRecyclerView(mRecyclerView); ``` 注意:以上代码只是示例,具体实现需要根据自己的需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值