美文网首页android技术专栏Android知识Android技术知识
RecycleView多布局的实现

RecycleView多布局的实现

作者: 破荒之恋 | 来源:发表于2017-09-18 09:56 被阅读77次

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

    [图1.png]

    图二：

    图2.png

    图三：

    图三.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（position）获取数据源某个数据的类型；ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)根据不同的viewtype创建不同的ViewHolder
    onBindViewHolder(ViewHolder holder, int position)根据不同的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的所布局已实现完毕。

    相关文章

      网友评论

        本文标题：RecycleView多布局的实现

        本文链接：https://www.haomeiwen.com/subject/aaotdxtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        android技术专栏

        Android知识

        Android技术知识

        关于我们|服务条款|联系我们|RecycleView多布局的实现|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！