ListView多布局实现

1.如何实现ListView的多布局呢？比如说。我们打算设计一个聊天窗口，自己的聊天内容放置在对话框的右边，别人发来的消息放置在对话框的左边。

  下面我们可以看，如下实例：

1) 首先我们要先设置两个两个布局文件，分别代表别人的发送的消息，和自己发送的消息，实例如下：

chat_item_right.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="match_parent">

    <ImageView
            android:id="@+id/item_chat_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:src="@mipmap/ic_launcher"
            />

    <TextView
            android:id="@+id/item_chat_user_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/item_chat_icon"
            android:layout_toLeftOf="@id/item_chat_icon"
            android:text="用户名"
            />

    <TextView
            android:id="@+id/item_chat_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/item_chat_user_name"
            android:layout_below="@id/item_chat_user_name"
            android:layout_marginTop="10dp"
            android:text="内容"
            />

</RelativeLayout>

chat_item_left.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="match_parent">
    <ImageView
            android:id="@+id/item_chat_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:src="@mipmap/ic_launcher"
            />

    <TextView
            android:id="@+id/item_chat_user_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/item_chat_icon"
            android:layout_toRightOf="@id/item_chat_icon"
            android:text="用户名"
            />

    <TextView
            android:id="@+id/item_chat_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/item_chat_user_name"
            android:layout_below="@id/item_chat_user_name"
            android:layout_marginTop="10dp"
            android:text="信息内容"
            />

</RelativeLayout>

2) 接下来我们要自定义Adapter了，实例如下：

public class ChatAdapter extends BaseAdapter {

    private Context mContext;
    private List<ChatMessage> mItems;

    public ChatAdapter(Context context, List<ChatMessage> items) {
        mContext = context;
        mItems = items;
    }

    @Override
    public int getCount() {
        int ret = 0;
        if (mItems != null) {
            ret = mItems.size();
        }
        return ret;
    }

    @Override
    public Object getItem(int position) {
        return mItems.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    // ListView加载多种不同的布局，可以根据当前条目的Type来进行加载


    /**
     * 返回ListView一共可以显示多少种布局类型
     * 数字必须>0
     * @return
     */
    @Override
    public int getViewTypeCount() {
        return 2;
    }

    /**
     * 返回当前条目的布局类型，返回值的范围是 [0, getViewTypeCount())
     * 因为 ListView 视图复用 在复用之前，也就是 convertView 在获取之前，先根据返回值
     * 找到对应的视图缓冲区，有则返回，无 convertView = null
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        int ret = 0;

        ChatMessage message = mItems.get(position);
        if(message.isReceived()){
            ret = 0;
        }else{
            ret = 1;
        }

        return ret;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View ret = null;

        int type = getItemViewType(position);

        switch (type){
            case 0:
                ret = getLeftView(position, convertView, parent);
                break;
            case 1:
                ret = getRightView(position, convertView, parent);
                break;
        }

        return ret;
    }

    private View getLeftView(int position, View convertView, ViewGroup parent){
        View ret = null;

        if(convertView != null){
            ret = convertView;
        }else{
            ret = LayoutInflater.from(mContext).inflate(R.layout.item_chat_left, parent, false);
        }

        TextMessageHolder holder = (TextMessageHolder) ret.getTag();
        if (holder == null) {
            holder = new TextMessageHolder(ret);
            ret.setTag(holder);
        }

        holder.bindView(position, mItems.get(position));

        return ret;
    }

    private View getRightView(int position, View convertView, ViewGroup parent){
        View ret = null;

        if(convertView != null){
            ret = convertView;
        }else{
            ret = LayoutInflater.from(mContext).inflate(R.layout.item_chat_right, parent, false);
        }

        TextMessageHolder holder = (TextMessageHolder) ret.getTag();
        if (holder == null) {
            holder = new TextMessageHolder(ret);
            ret.setTag(holder);
        }

        holder.bindView(position, mItems.get(position));

        return ret;
    }





    private static class TextMessageHolder {
        private ImageView mImageView;
        private TextView mTextName;
        private TextView mTextContent;

        public TextMessageHolder(View itemView) {
            mImageView = (ImageView) itemView.findViewById(R.id.item_chat_icon);
            mTextName = (TextView) itemView.findViewById(R.id.item_chat_user_name);
            mTextContent = (TextView) itemView.findViewById(R.id.item_chat_content);
        }

        public void bindView(int position, ChatMessage message) {
            mTextName.setText(message.getUserName());
            mTextContent.setText(message.getText());
        }
    }

}

3) 创建一个实体类用他来设置适配器中的控件现实的内容，示例如下：

public class ChatMessage {

    private String iconPath;
    private String userName;
    private String text;
    // 代表是否是从其他人发送，当前程序收到的（在左侧）
    private boolean received;
    private long time;

    public String getIconPath() {
        return iconPath;
    }

    public void setIconPath(String iconPath) {
        this.iconPath = iconPath;
    }

    public boolean isReceived() {
        return received;
    }

    public void setReceived(boolean received) {
        this.received = received;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public long getTime() {
        return time;
    }

    public void setTime(long time) {
        this.time = time;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }
}