PS:好长时间不写博客了,起初是不知道写些什么,后来接触了到了很多东西,原本看似简单的东西,背后都隐藏着巨大的秘密,想handler的使用,一般情况下会引起内存泄漏问题,想着找到方法结局不就得了吗,可是谁想查阅资料发现,这个东西没想到牵扯的这么深, Activity -> handler -> message -> queue -> UI线程作为GC Root引用链,看都看懵逼了,赶紧看一些稍微简单的UI 实现,突发奇想,RecyclerView的混合布局界面的实现。如下图

。。。

像这些布局,可以用listview来实现,也可以RecyclerView来实现,每个布局文件都是不一样的,第一张图:上面是一行三个图,下面是一行四个图。第二张图一行分左右。作为一个新手来说,估计就有点难以招架了,不过用recyclerview就比较好实现了,只要指定Type,来加载不同的布局就可以。下面来简单实现一个简单点的。有一行两个数据,有一行一个数据界面。

我们可以看到,这个RecyclerView中有多种item显示出来,那么具体怎么实现呢,其实在RecyclerView中,我们可以重写方法getItemViewType(),这个方法会传进一个参数position表示当前是第几个Item,然后我们可以通过position拿到当前的Item对象,然后判断这个item对象需要那种视图,返回一个int类型的视图标志,然后在onCreatViewHolder方法中给引入布局,这样就能够实现多种item显示了,我们先来看一下,一共要实现多少方法,他们分别是什么,我都加了注释。

/**
* 加载视图
* */
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return null;
}
/**
* 加载数据
* */
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { } /**
* 返回数据数量
* */
@Override
public int getItemCount() {
return 0;
} /**
* 返回数据类型
* */
@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}

我们一般情况下会在上面这些方法中做一些具体操作,所以只要掌握了上面这几个方法,就完全OK了。

步骤:

1:item的布局文件(xml)
2:item的bean类(第二个方法写一个)
3:自定义ViewHolder类继承RecyclerView.ViewHolder
4:自定义adapter继承RecyclerView.Adapter<RecyclerView.ViewHolder>
  a:getItemViewType返回type值
  b:onCreateViewHolder加载不同的视图
  c:onBindViewHolder绑定数据
5:主文件中设置recyclerview的布局样式,赋值调试

1:Item  xml布局文件和Bean类,ViewHolder创建。

注:bean因demo简洁,并没有用到bean类。一共两个布局,这里只给出一个,类似写出即可。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:background="@color/colorPrimary"
android:id="@+id/id_one_tv1"/>
</LinearLayout> public class TypeViewHolderOne extends RecyclerView.ViewHolder { public TextView textView; public TypeViewHolderOne(View itemView) {
super(itemView);
textView = itemView.findViewById(R.id.id_one_tv1);
}
}

2:方法讲解

注意:一般情况下后天会给移动端返回一串JSON字符串,里面有一些数据是需要自己来专门跳出来的,

方法:

  • 你可以写多个list来存放不同的数据,但是如果是多个的话,返回的数据就一串字符串,你不仅要挑出来,还要存放在多个list里面,下次下拉刷新时还要在多个list中累加数据,这样就有点麻烦了
  • 不挑出来直接就只判断type,然后根据type去调用不同的layout,然后在绑定数据的方法中再次判断是不是自己想要的ViewHolder,最后赋值显示。

返回type类型方法

//返回类型,有单列显示还是双列显示
@Override
public int getItemViewType(int position) {
return mList.get(position).getType();
}

我们重写了getItemViewType()方法后,就要写不同的item(布局文件),然后在onCreatViewHolder方法引入布局。这里的类型就简单直接写的和。

@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//视图显示
//创建view视图
switch (viewType) {
case 1:
return new TypeViewHolderOne(layoutInflater.inflate(R.layout.model_view1, parent, false));
case 2:
return new TypeViewHolderTwo(layoutInflater.inflate(R.layout.model_view2, parent, false));
}
return null;
}

我们看到的TypeViewHolderOne(View view);这个方法是自定义的需要继承RecyclerView.ViewHolder

public class TypeViewHolderOne extends RecyclerView.ViewHolder {
public TextView textView;
public TypeViewHolderOne(View itemView) {
super(itemView);
textView = itemView.findViewById(R.id.id_one_tv1);
}
}

写到这里,布局有了,viewholder有了,数据的判断类型有了,就差展示了,所以重写onBindViewHolder方法

/**
* 方法作用:绑定数据,
* 方法描述:根据holder对控件进行赋值,同时如果有回调接口,在该方法中写。
*/
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
//优化 绑定数据
if(holder instanceof TypeViewHolderOne){//判断是哪个对象
TypeViewHolderOne viewHolderOne= (TypeViewHolderOne) holder;
viewHolderOne.textView.setText(mList.get(position).getName());
}else if(holder instanceof TypeViewHolderTwo){
TypeViewHolderTwo viewHolderTwo= (TypeViewHolderTwo) holder;
viewHolderTwo.textView1.setText(mList.get(position).getName());
viewHolderTwo.textView2.setText("类型"+mList.get(position).getType());
}
}

所有预备工作已经做完了,开始赋值。

recyclerViewAdapter = new RecyclerViewAdapter2(this, list);
recyclerView.setAdapter(recyclerViewAdapter);
//本地模拟数据
public void addData() {
int a=(int)(Math.random()*10);
TypeBean typeBean;
for (int i = 0; i < 10; i++) {
typeBean = new TypeBean();
typeBean.setName("样式:" + (i + 1));
typeBean.setType(1);
if (i == a) {
typeBean.setType(2);
}
list.add(typeBean);
}
recyclerViewAdapter.notifyDataSetChanged();
}

现在还不能运行,因为还没有给recyclerview指定一个布局格式,下面是指定了布局格式,一共两列,获取一开始咱们设置的type,如果type=2,则要让他独自占2列,也就是说,他自己一行。

final GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
int itemViewType = recyclerView.getAdapter().getItemViewType(position);
if (itemViewType == 2) {
return 2;
}
return 1;
}
});

装饰可写可不写

//设置各个item的装饰,如间距,大小等,可写可不写,不写可以在xml文件中设置。
recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//super.getItemOffsets(outRect, view, parent, state);
//拿到Grid管理器
GridLayoutManager.LayoutParams layoutParams = (GridLayoutManager.LayoutParams) view.getLayoutParams();
//拿到grid管理器所设置的总列数
int spanSize = layoutParams.getSpanSize();
//拿到当前所在列数
int spanIndex = layoutParams.getSpanIndex();
//设置顶部间距
outRect.top = 20;
if (spanSize != gridLayoutManager.getSpanCount()) {
if (spanIndex == 1) {
outRect.left = 10;
} else {
outRect.right = 10;
}
}
}
});
recyclerView.setLayoutManager(gridLayoutManager);

现在运行试试吧

总结:

1:使用RecyclerView必须要写的就是适配器要继承RecyclerView.Adapter<RecyclerView.ViewHolder>,当然这里面你也可以自定义。

2:加载多个布局文件时(item)需要加入Type字段去判断是哪一个item。在activity中加载recyclerview时,要加入布局样式,比如说,普通的LinearLayoutManager,或者GridLayoutManager,StaggeredGridLayoutManager。不加是不显示的。

RecyclerView实现混合布局的更多相关文章

  1. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  2. CSS 实现流布局以及多列混合布局

    基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...

  3. Swing 混合布局

    案例一:Border边境边界 package swing; /** * swing 混合布局 */ import java.awt.*; import javax.swing.*; public cl ...

  4. android开发 RecyclerView 瀑布列表布局

    1.写一个内容的自定义小布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...

  5. 【Android】15.0 UI开发(六)——列表控件RecyclerView的网格布局排列实现

    1.0 列表控件RecyclerView的网格布局排列实现,关键词GridLayoutManager. LinearLayoutManager 实现顺序布局 GridLayoutManager 实现网 ...

  6. 【Android】14.0 UI开发(五)——列表控件RecyclerView的瀑布布局排列实现

    1.0 列表控件RecyclerView的瀑布布局排列实现,关键词StaggeredGridLayoutManager LinearLayoutManager 实现顺序布局 GridLayoutMan ...

  7. Recyclerview添加头布局和尾布局,点击效果

    简介: 本篇博客主要包括recyclerview添加多种布局以及添加头布局和尾布局,还有item点击事件 思路: 主要重写Recyclerview.Adapter中的一些方法 1.public int ...

  8. 慕课笔记利用css进行布局【混合布局】

    <html> <head> <title>混合布局学习</title> <style type="text/css"> ...

  9. doT.js实现混合布局,判断,数组,函数使用,取模,数组嵌套

    doT.js实现混合布局 数据结构 { "status": "1", "msg": "获取成功", "info ...

随机推荐

  1. Centos7 安装jdk,MySQL

    报名立减200元.暑假直降6888. 邀请链接:http://www.jnshu.com/login/1/20535344 邀请码:20535344 学习阿里云平台的云服务器配置Java开发环境.我现 ...

  2. javascript案例之放大镜效果

    效果图 如何实现该效果呢??   我们先来进行分析 实现思路 1.鼠标移入移出事件 1>移入:悬浮块和大图显示 2>移出:悬浮块和大图隐藏 2.鼠标移动(悬浮块随着鼠标移动) 1>获 ...

  3. 个人永久性免费-Excel催化剂功能第28波-工作薄瘦身,安全地减少非必要冗余

    Excel催化剂在完善了数据分析场景的插件需求后,决定再补充一些日常绝大多数Excel用户同样可以使用到的小功能,欢迎小白入场,在不违背太多Excel最佳实践的前提下,Excel催化剂乐意为广大Exc ...

  4. 百度AI之百度图像识别java版本使用

    百度AI之百度图像识别java版本使用\ 官网 http://ai.baidu.com/ 创建应用 查看 appid,appkey,sk 下载sdk https://ai.baidu.com/sdk# ...

  5. ehcache的使用 Shiro与Ehcache的结合(附:EhcacheUtils)

    ehcache 缓存的使用 合理的使用缓存会极大的提高程序的运行效率.切记:缓存请勿滥用. 配置ehcache与Shiro shiro初识请查看该文章 https://blog.csdn.net/py ...

  6. SYNPROXY:廉价的抗DoS攻击方案

    DoS攻击是一个永恒的问题,虽然专业厂商的防火墙,负载均衡类的网关设备能比较有效的防御DoS攻击,但黑客们更倾向于x86+GNU/Linux的组合,原因很简单:足够的廉价. 在linux内核3.13里 ...

  7. Linux vim环境设置

    //vim /etc/vimrc(管理员权限) 1. 显示行号: set number 或者  set nu 不显示行号: set nonu 2.自动缩进: set autoindent 3.C语言自 ...

  8. Redis项目实战---应用及理论(三)---Jedis使用

    Jedis即redis java客户端,源码地址:https://github.com/xetorthio/jedis pom配置: <dependency>    <groupId ...

  9. 用户体验要素——产品系统设计方法

    用户体验已经成为了每个互联网人的口头词,特别是互联网产品经理或产品设计师. 的确,对于任何一个互联网产品而言,体验都是非常重要的. 但是具体的用户体验到底指的是哪些方面,界面,UI,还是交互,其中到底 ...

  10. springcloud-熔断监控Hystrix Dashboard和Turbine

    作者:纯洁的微笑出处:http://www.ityouknow.com/ 版权归作者所有,转载请注明出处 Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystri ...