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.RecyclerViewandroid: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"><ImageViewandroid:id="@+id/iv_item1"android:src="@mipmap/ic_launcher"android:layout_width="match_parent"android:layout_height="200dp" /><TextViewandroid: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"><RelativeLayoutandroid:layout_width="match_parent"android:layout_margin="10dp"android:background="@android:color/white"android:layout_height="330dp"><ImageViewandroid:id="@+id/img_shopping_img"android:src="@drawable/shop02"android:layout_width="match_parent"android:layout_margin="5dp"android:layout_height="150dp" /><LinearLayoutandroid: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"><TextViewandroid:id="@+id/tv_shopping_name"android:text="手机"android:padding="5dp"android:textSize="15sp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/tv_shopping_desc"android:text="手机放寒假"android:padding="5dp"android:textSize="12sp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid: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" /><Viewandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="2dp"/><Buttonandroid: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"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:background="@android:color/white"><ImageViewandroid:id="@+id/img_shopping_img"android:layout_width="match_parent"android:layout_height="150dp"android:layout_margin="5dp"android:src="@drawable/shop02" /><LinearLayoutandroid:id="@+id/line_shoppong"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/img_shopping_img"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_shopping_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="5dp"android:text="手机放寒假"android:textSize="15sp" /><Viewandroid:layout_width="0dp"android:layout_height="2dp"android:layout_weight="1" /><TextViewandroid: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" /><TextViewandroid: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><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/line_shoppong"android:layout_marginBottom="5dp"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_shopping_desc"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="5dp"android:text="手机放寒假"android:textSize="12sp" /><Viewandroid:layout_width="0dp"android:layout_height="2dp"android:layout_weight="1" /><Buttonandroid: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.CardViewxmlns: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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid: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"/><TextViewandroid: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);}@Overridepublic 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";@Overridepublic void onClick(View v) {int childAdapterPosition=mRecycleView.getChildAdapterPosition(v);if (clickListener!=null){clickListener.setItemClickListener(childAdapterPosition);Log.i(TAG, "onClick: "+childAdapterPosition);}}@Overridepublic 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;}@Overridepublic int getItemViewType(int position) {return listRecyDatas.get(position).getStyle();}@Overridepublic 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());}}@Overridepublic int getItemCount() {return listRecyDatas.size()>0? listRecyDatas.size():0;}// ViewHolder的创建使用共同的ViewHolderpublic 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;@Overrideprotected 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() {@Overridepublic 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() {@Overridepublic void setItemClickListener(int position) {String name = listRecyDatas.get(position).getName();Toast.makeText(RecycleViewMuliteActivity.this, "第点击第"+position+"个"+name, Toast.LENGTH_SHORT).show();}});}@Overridepublic void setItemClickListener(int position) {Log.i(TAG, "setItemClickListener: "+position);}
}

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

RecycleView多布局的实现相关推荐

android支付宝首页布局,类似支付宝首页——RecycleView多布局结构实现
大家都知道,RecycleView默认只能通过setLayoutManager()方法指定一种布局结构,那么像支付宝首页这样复杂的多布局情况如何处理呢?在ListView中,我们也遇到过这种情况,是通 ...
RecycleView Layout 详解
前提我们以RecycleView 的宽高都是Match_Parent作为前提去分析,这样onMeasure方法就不会调用dispatchStep1.dispatchStep2.我们只看onLayou ...
【Android应用开发】RecycleView API 翻译 (文档翻译)
. RecyclerView extends ViewGroup implements ScrollingView NestedScrollingChild java.lang.Object ↳ ...
【Android】RecycleView简单仿漫画APP图片相关样式
真的真的想不到起什么标题好了,这次的内容真的是太简单了,没有什么挑战性,一天以内就完成了.最近在学kotlin,也会有一份kotlin的代码,鉴于很多人都是从java开始进行android开发的,ko ...
Android UI控件和布局
说明: 本文是郭霖<第一行代码-第3版>的读书笔记 4.1 如何编写程序界面编写XML,这是传统的方法 ConstraintLayout,Google推出的新方法,可以在可视化编辑器中拖 ...
Android开发：recycleView页面点击跳转
对带有recycleView的页面进行点击跳转比如,某一tab页是新闻列表,则点击某一行能跳转到新闻详情页面主要步骤一.设计recycleView页面 1.因为我们需要在消息界面建一个消息列表, ...
Android Recycleview的用法
前言最近没得什么项目可以做,闲来无事想写一些东西,看了看以前做的项目,用到的最多的就是列表了,今天就说一下recycleview. 这个世界并不是掌握在那些嘲笑者的手中,而恰恰掌握在能够经受得住嘲笑 ...
Android仿QQ侧滑菜单
先上效果图: GIF图有点模糊,源码已上传Github:Android仿QQ侧滑菜单 ####整体思路: 自定义ItemView的根布局(SwipeMenuLayout extends LinearL ...
Android新手如何学习开发一款app?
毫无疑问,开发一款自己的App对于初学者来说,无论从技术学习,还是找工作(或者装x),都是一大利器.那么如何才能快速上手,开发一款属于自己的app.本篇文章仅以自己的一些经验给更多的Android新手 ...
6月 CSDN 创作者之夜：获奖名单公布
在5月份,各位创作者都在坚持输出文章,为了感谢各位创作者的支持,我们也会其中一些优质博主进行颁奖,文章本期获奖名单从多个角度进行评选,有的是通过活动获得,有的是通过文章上榜获得,具体奖项有新人奖.实力 ...

RecycleView多布局的实现

RecycleView多布局的实现相关推荐

最新文章

热门文章