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;}@Overridepublic int getCount() {    Log.i(TAG, chatList.size() + "");    return chatList.size();}@Overridepublic Object getItem(int i) {    return chatList.get(i);}@Overridepublic long getItemId(int i) {    return i;}/** * 返回多少種Item布局 * * @return */@Overridepublic int getViewTypeCount() {    return ITEM_TOTAL_COUNT;}/** * 根據position返回相應的Item * * @param position * @return */@Overridepublic int getItemViewType(int position) {    Log.i(TAG, chatList.get(position).getType() + "");    return chatList.get(position).getType();}@Overridepublic 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;@Overrideprotected 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網格視圖。

Android學習筆記二十五之ListView多布局實現