ListView具有多种item布局——实现微信对话列

最新推荐文章于 2022-11-01 21:15:18 发布
最新推荐文章于 2022-11-01 21:15:18 发布
阅读量711 收藏
点赞数
分类专栏： Android中级 文章标签： listview 布局 微信 layout
 

   这篇文章的效果也是大家常见的，各种通讯应用的对话列表都是这种方式，像微信、whatsapp、易信、米聊等。我们这篇文章也权当为回忆，形成简单的笔记。这篇文章参考了2009年Google IO中的《TurboChargeYourUI-How to make your AndroidUI fast and efficient》和2010年Google IO中的《The World of List View》。像2009年Google IO的资料还是很前沿的，那会android开发资料很少，最重要的就是参考google发布的各种资料。


    在《TurboChargeYourUI-How to make your AndroidUI fast and efficient》介绍了怎样提高listview的性能，优化了listview的加载速度。这里的item使用的是单一布局，能够实现view的重用和回收，那么多种布局文件的怎么办呢，如果再使用上面的方法，view的重用会出现问题，Android使用的BaseAdapter提供了解决多种布局文件的重用方法。

1）重写 getViewTypeCount() – 该方法返回多少个不同的布局

2）重写 getItemViewType(int) – 根据position返回相应的Item



[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * 比原来的多了getItemViewType和getViewTypeCount这两个方法， 
  3.  *  
  4.  * */  
  5. public class ChatAdapter extends BaseAdapter {  
  6.   
  7.     public static final String KEY = "key";  
  8.     public static final String VALUE = "value";  
  9.   
  10.     public static final int VALUE_TIME_TIP = 0;// 7种不同的布局  
  11.     public static final int VALUE_LEFT_TEXT = 1;  
  12.     public static final int VALUE_LEFT_IMAGE = 2;  
  13.     public static final int VALUE_LEFT_AUDIO = 3;  
  14.     public static final int VALUE_RIGHT_TEXT = 4;  
  15.     public static final int VALUE_RIGHT_IMAGE = 5;  
  16.     public static final int VALUE_RIGHT_AUDIO = 6;  
  17.     private LayoutInflater mInflater;  
  18.   
  19.     private List<Message> myList;  
  20.   
  21.     public ChatAdapter(Context context, List<Message> myList) {  
  22.         this.myList = myList;  
  23.   
  24.         mInflater = (LayoutInflater) context  
  25.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  26.     }  
  27.   
  28.     @Override  
  29.     public int getCount() {  
  30.         return myList.size();  
  31.     }  
  32.   
  33.     @Override  
  34.     public Object getItem(int arg0) {  
  35.         return myList.get(arg0);  
  36.     }  
  37.   
  38.     @Override  
  39.     public long getItemId(int arg0) {  
  40.         return arg0;  
  41.     }  
  42.   
  43.     @Override  
  44.     public View getView(int position, View convertView, ViewGroup arg2) {  
  45.   
  46.         Message msg = myList.get(position);  
  47.         int type = getItemViewType(position);  
  48.         ViewHolderTime holderTime = null;  
  49.         ViewHolderRightText holderRightText = null;  
  50.         ViewHolderRightImg holderRightImg = null;  
  51.         ViewHolderRightAudio holderRightAudio = null;  
  52.         ViewHolderLeftText holderLeftText = null;  
  53.         ViewHolderLeftImg holderLeftImg = null;  
  54.         ViewHolderLeftAudio holderLeftAudio = null;  
  55.           
  56.         if (convertView == null) {  
  57.             switch (type) {  
  58.             case VALUE_TIME_TIP:  
  59.                 holderTime = new ViewHolderTime();  
  60.                 convertView = mInflater.inflate(R.layout.list_item_time_tip,  
  61.                         null);  
  62.                 holderTime.tvTimeTip = (TextView) convertView  
  63.                         .findViewById(R.id.tv_time_tip);  
  64.                 holderTime.tvTimeTip.setText(msg.getValue());  
  65.                 convertView.setTag(holderTime);  
  66.                 break;  
  67.             // 左边  
  68.             case VALUE_LEFT_TEXT:  
  69.                 holderLeftText = new ViewHolderLeftText();  
  70.                 convertView = mInflater.inflate(R.layout.list_item_left_text,  
  71.                         null);  
  72.                 holderLeftText.ivLeftIcon = (ImageView) convertView  
  73.                         .findViewById(R.id.iv_icon);  
  74.                 holderLeftText.btnLeftText = (Button) convertView  
  75.                         .findViewById(R.id.btn_left_text);  
  76.                 holderLeftText.btnLeftText.setText(msg.getValue());  
  77.                 convertView.setTag(holderLeftText);  
  78.                 break;  
  79.   
  80.             case VALUE_LEFT_IMAGE:  
  81.                 holderLeftImg = new ViewHolderLeftImg();  
  82.                 convertView = mInflater.inflate(R.layout.list_item_left_iamge,  
  83.                         null);  
  84.                 holderLeftImg.ivLeftIcon = (ImageView) convertView  
  85.                         .findViewById(R.id.iv_icon);  
  86.                 holderLeftImg.ivLeftImage = (ImageView) convertView  
  87.                         .findViewById(R.id.iv_left_image);  
  88.                 holderLeftImg.ivLeftImage.setImageResource(R.drawable.test);  
  89.                 convertView.setTag(holderLeftImg);  
  90.                 break;  
  91.   
  92.             case VALUE_LEFT_AUDIO:  
  93.                 holderLeftAudio = new ViewHolderLeftAudio();  
  94.                 convertView = mInflater.inflate(R.layout.list_item_left_audio,  
  95.                         null);  
  96.                 holderLeftAudio.ivLeftIcon = (ImageView) convertView  
  97.                         .findViewById(R.id.iv_icon);  
  98.                 holderLeftAudio.btnLeftAudio = (Button) convertView  
  99.                         .findViewById(R.id.btn_left_audio);  
  100.                 holderLeftAudio.tvLeftAudioTime = (TextView) convertView  
  101.                         .findViewById(R.id.tv_left_audio_time);  
  102.                 holderLeftAudio.tvLeftAudioTime.setText(msg.getValue());  
  103.                 convertView.setTag(holderLeftAudio);  
  104.                 break;  
  105.             // 右边  
  106.             case VALUE_RIGHT_TEXT:  
  107.                 holderRightText= new ViewHolderRightText();  
  108.                 convertView = mInflater.inflate(R.layout.list_item_right_text,  
  109.                         null);  
  110.                 holderRightText.ivRightIcon = (ImageView) convertView  
  111.                         .findViewById(R.id.iv_icon);  
  112.                 holderRightText.btnRightText = (Button) convertView  
  113.                         .findViewById(R.id.btn_right_text);  
  114.                 holderRightText.btnRightText.setText(msg.getValue());  
  115.                 convertView.setTag(holderRightText);  
  116.                 break;  
  117.   
  118.             case VALUE_RIGHT_IMAGE:  
  119.                 holderRightImg= new ViewHolderRightImg();  
  120.                 convertView = mInflater.inflate(R.layout.list_item_right_iamge,  
  121.                         null);  
  122.                 holderRightImg.ivRightIcon = (ImageView) convertView  
  123.                         .findViewById(R.id.iv_icon);  
  124.                 holderRightImg.ivRightImage = (ImageView) convertView  
  125.                         .findViewById(R.id.iv_right_image);  
  126.                 holderRightImg.ivRightImage.setImageResource(R.drawable.test);  
  127.                 convertView.setTag(holderRightImg);  
  128.                 break;  
  129.   
  130.             case VALUE_RIGHT_AUDIO:  
  131.                 holderRightAudio=new ViewHolderRightAudio();  
  132.                 convertView = mInflater.inflate(R.layout.list_item_right_audio,  
  133.                         null);  
  134.                 holderRightAudio.ivRightIcon = (ImageView) convertView  
  135.                         .findViewById(R.id.iv_icon);  
  136.                 holderRightAudio.btnRightAudio = (Button) convertView  
  137.                         .findViewById(R.id.btn_right_audio);  
  138.                 holderRightAudio.tvRightAudioTime = (TextView) convertView  
  139.                         .findViewById(R.id.tv_right_audio_time);  
  140.                 holderRightAudio.tvRightAudioTime.setText(msg.getValue());  
  141.                 convertView.setTag(holderRightAudio);  
  142.                 break;  
  143.   
  144.             default:  
  145.                 break;  
  146.             }  
  147.               
  148.         } else {  
  149.             Log.d("baseAdapter", "Adapter_:"+(convertView == null) );  
  150.             switch (type) {  
  151.             case VALUE_TIME_TIP:  
  152.                 holderTime=(ViewHolderTime)convertView.getTag();  
  153.                 holderTime.tvTimeTip.setText(msg.getValue());  
  154.                 break;  
  155.             case VALUE_LEFT_TEXT:  
  156.                 holderLeftText=(ViewHolderLeftText)convertView.getTag();  
  157.                 holderLeftText.btnLeftText.setText(msg.getValue());  
  158.                 break;  
  159.             case VALUE_LEFT_IMAGE:  
  160.                 holderLeftImg=(ViewHolderLeftImg)convertView.getTag();  
  161.                 holderLeftImg.ivLeftImage.setImageResource(R.drawable.test);  
  162.                 break;  
  163.             case VALUE_LEFT_AUDIO:  
  164.                 holderLeftAudio=(ViewHolderLeftAudio)convertView.getTag();  
  165.                 holderLeftAudio.tvLeftAudioTime.setText(msg.getValue());  
  166.                 break;  
  167.             case VALUE_RIGHT_TEXT:  
  168.                 holderRightText=(ViewHolderRightText)convertView.getTag();  
  169.                 holderRightText.btnRightText.setText(msg.getValue());  
  170.                 break;  
  171.             case VALUE_RIGHT_IMAGE:  
  172.                 holderRightImg=(ViewHolderRightImg)convertView.getTag();  
  173.                 holderRightImg.ivRightImage.setImageResource(R.drawable.test);  
  174.                 break;  
  175.             case VALUE_RIGHT_AUDIO:  
  176.                 holderRightAudio=(ViewHolderRightAudio)convertView.getTag();  
  177.                 holderRightAudio.tvRightAudioTime.setText(msg.getValue());  
  178.                 break;  
  179.   
  180.             default:  
  181.                 break;  
  182.             }  
  183.               
  184.             //holder = (ViewHolder) convertView.getTag();  
  185.         }  
  186.         return convertView;  
  187.     }  
  188.   
  189.     /** 
  190.      * 根据数据源的position返回需要显示的的layout的type 
  191.      *  
  192.      * type的值必须从0开始 
  193.      *  
  194.      * */  
  195.     @Override  
  196.     public int getItemViewType(int position) {  
  197.   
  198.         Message msg = myList.get(position);  
  199.         int type = msg.getType();  
  200.         Log.e("TYPE:", "" + type);  
  201.         return type;  
  202.     }  
  203.   
  204.     /** 
  205.      * 返回所有的layout的数量 
  206.      *  
  207.      * */  
  208.     @Override  
  209.     public int getViewTypeCount() {  
  210.         return 7;  
  211.     }  
  212.   
  213.     class ViewHolderTime {  
  214.         private TextView tvTimeTip;// 时间  
  215.     }  
  216.   
  217.     class ViewHolderRightText {  
  218.         private ImageView ivRightIcon;// 右边的头像  
  219.         private Button btnRightText;// 右边的文本  
  220.     }  
  221.   
  222.     class ViewHolderRightImg {  
  223.         private ImageView ivRightIcon;// 右边的头像  
  224.         private ImageView ivRightImage;// 右边的图像  
  225.     }  
  226.   
  227.     class ViewHolderRightAudio {  
  228.         private ImageView ivRightIcon;// 右边的头像  
  229.         private Button btnRightAudio;// 右边的声音  
  230.         private TextView tvRightAudioTime;// 右边的声音时间  
  231.     }  
  232.   
  233.     class ViewHolderLeftText {  
  234.         private ImageView ivLeftIcon;// 左边的头像  
  235.         private Button btnLeftText;// 左边的文本  
  236.     }  
  237.   
  238.     class ViewHolderLeftImg {  
  239.         private ImageView ivLeftIcon;// 左边的头像  
  240.         private ImageView ivLeftImage;// 左边的图像  
  241.     }  
  242.   
  243.     class ViewHolderLeftAudio {  
  244.         private ImageView ivLeftIcon;// 左边的头像  
  245.         private Button btnLeftAudio;// 左边的声音  
  246.         private TextView tvLeftAudioTime;// 左边的声音时间  
  247.     }  
  248.   
  249. }  




分享两张微信、易信的图，你也可以做成这样子。

     


Demo下载，请猛击。


via:http://blog.csdn.net/xyz_lmn/article/details/13745489

博文精选
关注
专栏目录
聊天界面的制作（二）——发送消息后ListView左右布局显示
To_be_Designer
09-01 7989
基本功能1. 自定义标题栏。（标题栏不做任何功能）2. 有左右发送按钮。（这个只能自己和自己聊天哦，所以有左右发送按钮） 　　（1）点击左边按钮发送按钮，在ListView的左侧显示。 　　（2）点击右边按钮发送按钮，在ListView的右侧显示。 　　 3.有表情发送按钮。 　　（1）当点击表情发送按钮时， 弹出表情框，点击想要发送的表情将其添加输入框中。 　　（2）当在此点击表情
FanChat学习笔记（五）——终结篇
Vicent_9920的博客
01-12 1114
上一篇讲了主界面，里面包含了个人动态、联系人列表、会话列表，没有阅读的话建议看看FanChat学习笔记（四）——主页面。本文接着说一说添加好友与聊天界面的逻辑及一些重要的知识点。 添加好友——AddFriendActivity用到的知识点 添加好友——AddFriendActivity界面逻辑 聊天——ChatActivity用到的知识点 聊天——ChatActivity界面逻辑
综合使用Fragment、ListView、布局管理器、界面控件等进行UI界面设计：仿微信界面
06-11
综合使用Fragment、ListView、布局管理器、界面控件等进行UI界面设计：仿微信界面的设计；在操作栏上实现层级式导航。
ListView之聊天界面的实现和ListView的动态改变布局
小样
05-24 5544
一，特点：两个布局界面 二，方法： (1)返回第position个Item是什么类型的 @Override public int getItemViewType(int position){ return  type ; } (2)返回布局总数 public  int getViewTypeCount(){ return number ; } 三，见代码： （1）布局文件：
android--ListView实现聊天记录
04-01
android--ListView实现聊天记录
Android -- listview实现一行多列效果
a289676449的博客
06-05 6259
最近项目需要做一个效果，获取到list书之后，展示的时候需要多列显示。一般来说，我们使用listview的时候，都是只有单行单列的效果，那一行多列的效果该怎么实现呢？ 参考打造ListView万能Adapter，且支持一行多列的显示方式一文，我们就可以轻松实现这种效果了。 实现思路是，我们先创建一个viewHolder，获取每列item的view。然后在adapter的getView方法里，每一行我们都循环将column数量的数据输入，然后执行covert方法，将数据输入该行。执行完这一行的数据显示之后
ListView实现聊天对话
qq_64353584的博客
11-27 550
刚开始接触到ListView,总是看见别人做出来很多稀奇古怪的界面自己就是不会，随后学习到了自定义View,就想着ListView也可以自定义出想要的样式，然后在网上搜集很多的的方法，要不就是看不懂，代码复制出来还无运行，要么就是不是自己想要的那款。今天在这里使用的不需要自定义ListView控件，e而是利用ListView自带的控件就能完成。 我们熟知的QQ、微信界面，至少会展示两种界面，有双方发送消息的版面，只要大家勤于动脑，我相信如果你看了今天我的方法，可以在ListView上添加两种以上的布局。老
最全面鸿蒙系统开发的相关资料收录
Wscats
07-31 4376
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架，进行项目目录解读，JS FA、常用和自定义组件、用户交互、JS 动画的实现，通过本示例可以基本了解和学习到 JavaScript UI 的开发模式。 本项目是基于 OpenHarmony 项目而不是 HarmonyOS 项目，请注意运行环境。 请参考 OpenHarmony 项目配置方法 进行项目配置和运行。 如果你不熟悉 OpenHarmony 的 JS 开发，请参考该项目的 开发讲解。 示例 下载 awesome-har
《第一行代码Android》笔记
陀思妥耶夫斯基和海德格尔伴我勇敢存在
09-20 3997
第1章 开始启程，你的第一行Android代码1.1 了解全貌，Android王国简介 Android系统是基于Linux 2.6内核的，这一层为Android设备的各种硬件提供了底层的驱动，如显示驱动、音频驱动、照相机驱动、蓝牙驱动、Wi-Fi驱动、电源管理等。 另外Android运行时库还包含了Dalvik虚拟机，它使得每一个Android应用都能运行在独立的进程当中，并且拥有一个自己的Dalv
android　ListView实现显示微信好友列表
12-13
使用实现ListView实现微信好友列表 android ListView 微信　好友列表　自定义ImageView 自定义ListView
Android ListView侧滑显示操作项（仿微信消息列表）
11-22
模仿微信消息列表的效果，ListView侧滑显示操作选项。
android 自定义listview实现仿微信/QQ设置界面demo
06-21
android自定义listview实现仿微信/QQ设置界面的开发
android两列显示两个listview
04-10
android两列显示两个listview
android listview 列加id,Android ListView同一个item显示2列的实现方法(仿2列商品列表)...
weixin_34696129的博客
05-28 292
Android实战开发中，ListView控件用途十分广泛，各种自定义控件多种多样。当项目要求实现一个2列的商品列表形式的界面，我们首先肯定想到用ListView，然后我们可以使用百度的自定义ListView，当然也可以用以下方法实现。Android实战开发中ListView同一个item显示2列的实现方法其实主要不在于ListView控件本身，是在于ListView的适配器Adapter的自定义...
安卓---实验5---ListView制作微信通讯录、朋友圈
yitong的博客
11-01 1644
安卓实验课---listview
ListView和三种Adapter
Hi~Future
06-19 555
1、ListView  ListView主要用来进行数据列表，支持动态加入数据，支持自动滚屏。 如果想为ListView加入数据，也要使用Adapter来完成，根据不同的情况，需要加入以下几种Adapter 1）  ArrayAdapter：每行显示一条文本数据，可以使用这种Adapter。
Android关于ListView的使用(三)
weixin_48657573的博客
10-21 197
上次我们说到了对listview控件内容的控制，这次我要实现的是列表的点击事件，就是点击后会跳转到其他页面，这就类似于你看今日头条，找到一个喜欢的内容然后点进去出现界面。基本上没有大的变动，我还是把所有代码附上 这个新增加的MainActivity2Activity就是实现跳转后的页面的，对应的xml也是跳转后页面布局内容 MainActivity2Activity： package com.example.lenovo.myapplication; import android.app.Activit
【22】Android LIstView - 多 Item 布局
Hsy的博客
09-09 705
前言 我们之前使用的 ListView ，其中的 Item 都是固定的一类数据，那么如何实现类似微信聊天界面的布局呢？即多个类型 Item 显示在同一个 ListView 上。 实现方法 目前想到到方法有两个： 让每个 Item 的布局都包含所有类型的元素然后通过隐藏的方法去组合出不同 Item 使用 Adapter 原生支持的多类型 由于方法一每次都需要 inflate 出所以类...
Android实现微信对话列表滑动删除效果
"这篇文章主要介绍了如何在Android平台上实现类似微信对话列表的滑动删除效果，通过自定义ListView的item和处理触摸事件来解决滑动冲突问题。" 在Android开发中，模仿微信对话列表的滑动删除功能是一项常见的需求。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值