Android学习笔记二十五之ListView多布局实现

Android学习笔记二十五之ListView多布局实现

　　这一节是介绍ListView这个控件的最后一节，实现一个Item的多布局。像我们经常在用的各种即时通讯工具，QQ、微信等，假设他们的会话界面是ListView实现的，那么ListView就有多种Item布局，这一节，我们就来实现一个ListView的多种Item。

　　要实现ListView里面有多种Item，就要重写适配器的两个方法getViewTypeCount()和getItemViewType(int position)，第一个方法是返回Item的种类数目，第二个是返回当前Item是哪种类型。下面我们具体实现来说明：

自定义适配器代码：

package com.example.listviewdemo.adapter;

import android.content.Context;
import android.util.Log;
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 com.example.listviewdemo.Chat;
import com.example.listviewdemo.R;

import java.util.List;

/**
* Created by Devin on 2016/7/11.
* 实现多种Item布局
* 重写两个方法getViewTypeCount()和getItemViewType(int position)
*/
public class ChatAdapter extends BaseAdapter {

private static String TAG = "ChatAdapter";
/**
* 右边显示的布局
*/
public static final int ITEM_RIGHT = 0;
/**
* 中间显示时间
*/
public static final int ITEM_TIME = 1;
/**
* 左边显示的布局
*/
public static final int ITEM_LEFT = 2;
private static int ITEM_TOTAL_COUNT = 3;
private Context mContext;
private List<Chat> chatList;

public ChatAdapter(Context mContext, List<Chat> chatList) {
this.mContext = mContext;
this.chatList = chatList;
}

@Override
public int getCount() {
Log.i(TAG, chatList.size() + "");
return chatList.size();
}

@Override
public Object getItem(int i) {
return chatList.get(i);
}

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

/**
* 返回多少种Item布局
*
* @return
*/
@Override
public int getViewTypeCount() {
return ITEM_TOTAL_COUNT;
}

/**
* 根据position返回相应的Item
*
* @param position
* @return
*/
@Override
public int getItemViewType(int position) {
Log.i(TAG, chatList.get(position).getType() + "");
return chatList.get(position).getType();
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
int type = getItemViewType(i);
Chat chat = chatList.get(i);
ViewHolderLeft viewHolderLeft = null;
ViewHolderRight viewHolderRight = null;
ViewHolderTime viewHolderTime = null;
if (view == null) {
switch (type) {
case ITEM_LEFT:
view = LayoutInflater.from(mContext).inflate(R.layout.item_left, null);
viewHolderLeft = new ViewHolderLeft();
viewHolderLeft.ivLeftImage = (ImageView) view.findViewById(R.id.iv_left_image);
viewHolderLeft.tvLeftText = (TextView) view.findViewById(R.id.tv_left_text);
viewHolderLeft.ivLeftImage.setImageResource(R.drawable.icon);
viewHolderLeft.tvLeftText.setText(chat.getValue());
view.setTag(viewHolderLeft);
break;
case ITEM_TIME:
view = LayoutInflater.from(mContext).inflate(R.layout.item_center, null);
viewHolderTime = new ViewHolderTime();
viewHolderTime.tvTime = (TextView) view.findViewById(R.id.tv_time);
viewHolderTime.tvTime.setText(chat.getValue());
view.setTag(viewHolderTime);
break;
case ITEM_RIGHT:
view = LayoutInflater.from(mContext).inflate(R.layout.item_right, null);
viewHolderRight = new ViewHolderRight();
viewHolderRight.ivRightImage = (ImageView) view.findViewById(R.id.iv_right_image);
viewHolderRight.tvRightText = (TextView) view.findViewById(R.id.tv_right_text);
viewHolderRight.ivRightImage.setImageResource(R.drawable.touxiang);
viewHolderRight.tvRightText.setText(chat.getValue());
view.setTag(viewHolderRight);
break;
}

} else {
switch (type) {

case ITEM_LEFT:
viewHolderLeft = (ViewHolderLeft) view.getTag();
viewHolderLeft.ivLeftImage.setImageResource(R.drawable.icon);
viewHolderLeft.tvLeftText.setText(chat.getValue());
break;
case ITEM_TIME:
viewHolderTime = (ViewHolderTime) view.getTag();
viewHolderTime.tvTime.setText(chat.getValue());
break;
case ITEM_RIGHT:
viewHolderRight = (ViewHolderRight) view.getTag();
viewHolderRight.ivRightImage.setImageResource(R.drawable.touxiang);
viewHolderRight.tvRightText.setText(chat.getValue());
break;
}

}

return view;
}

private static class ViewHolderLeft {
//左边显示头像
ImageView ivLeftImage;
//左边显示的文本
TextView tvLeftText;
}

private static class ViewHolderTime {
//中间显示时间
TextView tvTime;
}

private static class ViewHolderRight {
//右边显示的头像
ImageView ivRightImage;
//右边显示的文本
TextView tvRightText;
}
}

这里简单定义了三种类型的Item，左边显示一个聊天，中间显示时间，右边显示另外一个聊天。

中间Item布局代码：

<?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"
android:orientation="vertical">

<TextView
android:id="@+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="4dp"
android:text="shijian"
android:textColor="#000000"
android:textSize="12sp" />

</RelativeLayout>

左边Item布局代码：

<?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"
android:orientation="vertical">

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:padding="8dp">

<ImageView
android:id="@+id/iv_left_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="5dp"
android:src="@drawable/touxiang" />

<TextView
android:id="@+id/tv_left_text"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/iv_left_image"
android:text="这是文本"
android:textSize="14sp" />

</RelativeLayout>

</RelativeLayout>

右边Item布局代码：

<?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"
android:orientation="vertical">

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:padding="8dp">

<TextView
android:id="@+id/tv_right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:text="这是文本"
android:textColor="#000000"
android:textSize="14sp" />

<ImageView
android:id="@+id/iv_right_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_toRightOf="@id/tv_right_text"
android:src="@drawable/icon" />

</RelativeLayout>

</RelativeLayout>

中间显示时间，左右两边都是简单的显示一个头像和一个文本。

Activity代码：

package com.example.listviewdemo.activity;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;

import com.example.listviewdemo.Chat;
import com.example.listviewdemo.R;
import com.example.listviewdemo.adapter.ChatAdapter;

import java.util.ArrayList;
import java.util.List;

/**
* Created by Devin on 2016/7/11.
*/
public class MoreItemActivity extends AppCompatActivity {
private ListView lv_chart;
private ChatAdapter adapter;
private List<Chat> chatList;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_moreitem);
lv_chart = (ListView) findViewById(R.id.lv_chart);
chatList = new ArrayList<>();
initData();
adapter = new ChatAdapter(getApplicationContext(), chatList);
lv_chart.setAdapter(adapter);
}

/**
* 初始化数据
*/
private void initData() {
Chat chat1 = new Chat();
chat1.setType(ChatAdapter.ITEM_TIME);
chat1.setValue("2016-7-11 下午 16:39");
chatList.add(chat1);

Chat chat2 = new Chat();
chat2.setType(ChatAdapter.ITEM_LEFT);
chat2.setValue("这是左边第一条测试数据");
chatList.add(chat2);

Chat chat3 = new Chat();
chat3.setType(ChatAdapter.ITEM_RIGHT);
chat3.setValue("这是右边第一条测试数据");
chatList.add(chat3);

Chat chat4 = new Chat();
chat4.setType(ChatAdapter.ITEM_TIME);
chat4.setValue("2016-7-11 下午 16:40");
chatList.add(chat4);

Chat chat5 = new Chat();
chat5.setType(ChatAdapter.ITEM_LEFT);
chat5.setValue("这是左边第二条测试数据");
chatList.add(chat5);

Chat chat6 = new Chat();
chat6.setType(ChatAdapter.ITEM_RIGHT);
chat6.setValue("这是右边第二条测试数据");
chatList.add(chat6);

Chat chat7 = new Chat();
chat7.setType(ChatAdapter.ITEM_TIME);
chat7.setValue("2016-7-11 下午 16:41");
chatList.add(chat7);

Chat chat8 = new Chat();
chat8.setType(ChatAdapter.ITEM_LEFT);
chat8.setValue("这是左边第三条测试数据");
chatList.add(chat8);

Chat chat9 = new Chat();
chat9.setType(ChatAdapter.ITEM_RIGHT);
chat9.setValue("这是右边第三条测试数据");
chatList.add(chat9);

Chat chat10 = new Chat();
chat10.setType(ChatAdapter.ITEM_LEFT);
chat10.setValue("这是左边第四条测试数据");
chatList.add(chat10);

Chat chat11 = new Chat();
chat11.setType(ChatAdapter.ITEM_RIGHT);
chat11.setValue("这是右边第四条测试数据");
chatList.add(chat11);

Chat chat12 = new Chat();
chat12.setType(ChatAdapter.ITEM_LEFT);
chat12.setValue("这是左边第五条测试数据");
chatList.add(chat12);

Chat chat13 = new Chat();
chat13.setType(ChatAdapter.ITEM_RIGHT);
chat13.setValue("这是右边第五条测试数据");
chatList.add(chat13);

Chat chat14 = new Chat();
chat14.setType(ChatAdapter.ITEM_RIGHT);
chat14.setValue("这是右边第六条测试数据");
chatList.add(chat14);

}
}

还有就是一个普通的javabean

package com.example.listviewdemo;

/**
* Created by Devin on 2016/7/11.
*/
public class Chat {
private int type;
private String value;

public Chat() {
}

public Chat(int type, String value) {
this.type = type;
this.value = value;
}

public int getType() {
return type;
}

public void setType(int type) {
this.type = type;
}

public String getValue() {
return value;
}

public void setValue(String value) {
this.value = value;
}
}

最后实现效果图：





ListView多布局实现主要是重写两个方法，判断当前是哪一种Item，最后加载不同的内容。ListView的学习就告一段落了，下面我们介绍一下GridView网格视图。