ListView的使用技巧集合（四）

1.聊天类型的Listview

通常我们使用的listview的每一项都是一个相同的布局，而我们熟知的QQ,微信等聊天类型的APP，在聊天界面都会至少有两种布局，即收到的的消息和发送的消息，其实这样的效果也是通过listview来实现的。要实现listview的布局呈现不同的效果，就需要对listview中的Adapter进行动手。

在定义BaseAdapter的时候，需要先去重写getView（）的方法，而这个方法就是用来获取到布局的，那么只需要在获取到布局的时候是哪一种布局就可以了，所以就有以下的两种方法。

    @Override
    public int getViewTypeCount() {
        return super.getViewTypeCount();
    }

    @Override
    public int getItemViewType(int position) {
        return super.getItemViewType(position);
    }

getItemViewType（）方法是用来返回第几个item的布局类型的，getViewTypeCount（）表示的是表示不同布局类型的总数的。结合getView（）方法就可以显示不同的聊天布局了。

1.下面先定义两个不同的布局类型chat_listview_in.xml//chat_listview_out.xml.要注意的是textvew使用的背景图片是.9patch的图片。可以针对文字信息的长短进行拉伸。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:orientation="horizontal"
           android:gravity="center_vertical"
           android:padding="13dp"
           android:layout_width="match_parent"
           android:layout_height="match_parent">

        <TextView
            android:paddingLeft="10dp"
            android:gravity="center"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/chatitem_out_bg"/>

        <ImageView
            android:id="@+id/icon_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>

    </LinearLayout>

2.封装聊天的内容，便于在adapter中获取到数据

public class ChatItemBean {

    private int type;
    private String text;
    private Bitmap icon;

    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;
    }
}

3.Adapter类的封装，使用viewholder来提高listview的效率，并且在getview()方法中使用getItemViewType(position)的值进行布局类型的判断，从而实现listview中多个布局内容的添加。

public class ChatListViewAdapter extends BaseAdapter {

    private Context mContext;
    private List<ChatItemBean> mData;

    public ChatListViewAdapter(Context context,List<ChatItemBean> data) {
        this.mContext = context;
        this.mData = data;
    }

    @Override
    public int getViewTypeCount() {
        return 2;   // 总共有两种vew
    }

    @Override
    public int getItemViewType(int position) {
        ChatItemBean itemBean = mData.get(position);
        return itemBean.getType();  // 返回每一个item的类型
    }

    @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 View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if (convertView == null) {
            if (getItemViewType(position) == 0) {
                viewHolder = new ViewHolder();
                convertView = LayoutInflater.from(mContext).inflate(R.layout.chat_listview_in, null, false);
                // 查找控件
                viewHolder.icon = (ImageView) convertView.findViewById(R.id.icon_in);
                viewHolder.mTextView = (TextView) convertView.findViewById(R.id.textview);
            } else if (getItemViewType(position) == 1) {
                viewHolder = new ViewHolder();
                convertView = LayoutInflater.from(mContext).inflate(R.layout.chat_listview_out, null, false);
                // 查找控件
                viewHolder.icon = (ImageView) convertView.findViewById(R.id.icon_out);
                viewHolder.mTextView = (TextView) convertView.findViewById(R.id.textview);
            }
            convertView.setTag(viewHolder);
        } else {
            // 复用
            viewHolder = (ViewHolder) convertView.getTag();
        }
        ChatItemBean bean = mData.get(position);    //获取到数据
        viewHolder.icon.setImageBitmap(bean.getIcon());
        viewHolder.mTextView.setText(bean.getText());

        return convertView;
    }

    public class ViewHolder{
        public ImageView icon;
        public TextView mTextView;
    }
}

4测试数据的完成

private ListView mListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chatlistview);
        mListView = (ListView) findViewById(R.id.listview);

        // 创建数据
        ChatItemBean itemBean1 = new ChatItemBean();
        itemBean1.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
        itemBean1.setType(0);
        itemBean1.setText("亲，在吗？？？");

        // 创建数据
        ChatItemBean itemBean2 = new ChatItemBean();
        itemBean2.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
        itemBean2.setType(1);
        itemBean2.setText("在呢，亲(づ￣3￣)づ╭❤～");

        // 创建数据
        ChatItemBean itemBean3 = new ChatItemBean();
        itemBean3.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
        itemBean3.setType(0);
        itemBean3.setText("这一款还有货吗？？");

        // 创建数据
        ChatItemBean itemBean4 = new ChatItemBean();
        itemBean4.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
        itemBean4.setType(1);
        itemBean4.setText("有呢亲，记得好评哦亲");

        // 创建数据
        ChatItemBean itemBean5 = new ChatItemBean();
        itemBean5.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
        itemBean5.setType(0);
        itemBean5.setText("好的，货到付款哦");

        List<ChatItemBean> mListData = new ArrayList<>();
        mListData.add(itemBean1);
        mListData.add(itemBean2);
        mListData.add(itemBean3);
        mListData.add(itemBean4);
        mListData.add(itemBean5);

        mListView.setAdapter(new ChatListViewAdapter(this, mListData));

    }

效果图如下：