聊天LIstView
2016-04-07 14:42
260 查看
前言:
通常我们使用的ListView的每一项都具有相似的布局,所以展现出来的时候,除了数据不同,只要你不隐藏布局,其他的布局应该都是类似的。而我们熟知的qq,微信等聊天app,聊天界面至少展示了2种布局,就是我们收到的消息和自己发送的消息,其实这样的效果也是通过ListView来实现的,下面我们就来模仿一个聊天软件的聊天列表界面,其效果图如下所示。
这样一个ListView与我们平时所使用的ListView最大的不同,就是他拥有两个不同的布局——收到的布局和发送的布局。要实现这样的效果,就需要拿ListView的Adapter"开刀"。在定义BaseAdapter的时候,需要去重写他的getView()方法,这个方法是用来获取布局的,那么我们只需要在获取布局的时候去判断他该获取哪一种布局就可以了。而且,ListView也已经考虑到了这种情况,所以提供了2个方法,代码如下:
@Override public int getItemViewType(int position) { ChatItemListViewBean bean = mData.get(position); return bean.getType(); } @Override public int getViewTypeCount() { return 2; }
gitItemType()方法用来返回第position个Item是何种类型,而getViewTypeCount()用来返回不同布局的总数。通过这2个方法,在结合getView(),就可以很轻松的设计出布局了。首先需要实现2个布局——chat_item_itemin和chat_item_itemout,2个布局差不多,主要是一左一右。代码如下所示。由于in和out界面内容只是方向上的差别,所以我显示了一个布局。
<?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="match_parent" android:gravity="center_vertical" android:orientation="horizontal" android:padding="10dp"> <ImageView android:id="@+id/icon_in" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/text_in" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/chatitem_in_bg" android:gravity="center" android:textSize="20sp" /> </LinearLayout>同时,为了封装下聊天的内容,便于在Adapter中获取数据信息,我们封装了一个Bean类来保存聊天信息,代码如下所示。
package com.example.text2; import android.graphics.Bitmap; public class ChatItemListViewBean { private int type; private String text; private Bitmap icon; public ChatItemListViewBean() { } public int getType() { return type; } public void setType(int type) { this.type = type; } public String getText() { return text; } public void setText(String text) { this.text = text; } public Bitmap getIcon() { return icon; } public void setIcon(Bitmap icon) { this.icon = icon; } }
非常简单的类,我们只是申明了需要的信息并提供了get和set方法。
接下来,需要完成最重要的BaseAdapter进行布局类型的判断,从而确定使用哪种布局,代码如下:
package com.example.text2; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; import java.util.List; public class ChatItemListViewAdapter extends BaseAdapter { private List<ChatItemListViewBean> mData; private LayoutInflater mInflater; public ChatItemListViewAdapter(Context context, List<ChatItemListViewBean> data) { this.mData = data; mInflater = LayoutInflater.from(context); } @Override public int getCount() { return mData.size(); } @Override public Object getItem(int position) { return mData.get(position); } @Override public long getItemId(int position) { return position; } @Override public int getItemViewType(int position) { ChatItemListViewBean bean = mData.get(position); return bean.getType(); } @Override public int getViewTypeCount() { return 2; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { if (getItemViewType(position) == 0) { holder = new ViewHolder(); convertView = mInflater.inflate( R.layout.chat_item_itemin, null); holder.icon = (ImageView) convertView.findViewById( R.id.icon_in); holder.text = (TextView) convertView.findViewById( R.id.text_in); } else { holder = new ViewHolder(); convertView = mInflater.inflate( R.layout.chat_item_itemout, null); holder.icon = (ImageView) convertView.findViewById( R.id.icon_out); holder.text = (TextView) convertView.findViewById( R.id.text_out); } convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.icon.setImageBitmap(mData.get(position).getIcon()); holder.text.setText(mData.get(position).getText()); return convertView; } public final class ViewHolder { public ImageView icon; public TextView text; } }
在上面的代码中,通过getView()中判断getItemViewType(position)的值来决定具体实例化哪一个布局,从而实现在一个LIstView中多个布局的添加。最后写一个测试类
package com.example.text2; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.graphics.BitmapFactory; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.ListView; public class MainActivity extends Activity { private ListView mListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mListView = (ListView) findViewById(R.id.listView_chat); ChatItemListViewBean bean1 = new ChatItemListViewBean(); bean1.setType(0); bean1.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.in_icon)); bean1.setText("Hello how are you?"); ChatItemListViewBean bean2 = new ChatItemListViewBean(); bean2.setType(1); bean2.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher)); bean2.setText("Fine thank you, and you?"); ChatItemListViewBean bean3 = new ChatItemListViewBean(); bean3.setType(0); bean3.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.in_icon)); bean3.setText("I am fine too"); ChatItemListViewBean bean4 = new ChatItemListViewBean(); bean4.setType(1); bean4.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher)); bean4.setText("Bye bye"); ChatItemListViewBean bean5 = new ChatItemListViewBean(); bean5.setType(0); bean5.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.in_icon)); bean5.setText("See you"); List<ChatItemListViewBean> data = new ArrayList<ChatItemListViewBean>(); data.add(bean1); data.add(bean2); data.add(bean3); data.add(bean4); data.add(bean5); mListView.setAdapter(new ChatItemListViewAdapter(this, data)); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
在测试代码中,简单的添加了一些模拟聊天的内容,并将信息封装到Bean对象中,最后进行测试。
相关文章推荐
- 用@property声明的成员属性_xx在重写了get方法以后,再重写set方法,get会报错,提示_xx不存在。困扰已久,望解答
- OsWorkFlow工作流简介
- Java解析XML
- 大数据技能图谱
- callback用法简介
- Java并发编程系列之二十四:Exchanger
- 队列实现二叉树的层序遍历
- Android属性动画深入分析
- Android AlarmManager使用
- Spring 注释(一) @Controller @Component @Repository @Service
- 经典面试题
- 环形单链表的约瑟夫问题
- vc++ windows 开始菜单添加快捷方式
- jquery 事件绑定以及解绑定
- SVM入门(十)将SVM用于多类分类
- WMware克隆虚拟机后出现网络无法连接的问题
- 浅谈Android中的LOG查看ANR(一)
- Spring注释(二) @RequestMapping
- android.view.WindowManager$BadTokenException
- delegate、notification、KVO各优缺点 - xuym