Android ListView顯示不同樣式的item

先look圖

我們再使用listview時，listview的item大多時候都是一種樣式，在很多app中也很常見，但有時候根據需求，可能數據的數量不一樣，同個類型的數據顯示的位置不同，亦或者有的item需要圖片，有的不需要，但是這些又必須在同一個listview中顯示，這時我們就需要在listview中顯示多種樣式的item，首先我們需要考慮的是如何將不同數量的數據裝載到ArrayList<~>中呢，先看看下面的listViewItem，。

package com.example.keranbin.myapplication;

import java.util.HashMap;
import java.util.Map;

public class lIstViewItem
{
    //用於區分listview顯示的不同item,告訴適配器我這是什么類型，listview適配器根據type決定怎么顯示
    public int type;
    //將要顯示的數據用HashMap包裝好
    public HashMap<String,Object> map ;
    
    public lIstViewItem(int type, HashMap<String, Object> map)
    {
        this.type = type;
        this.map = map;
    }
}

我們通過自定義一個listItem,即可將所有不同類型，不同數量的數據先組裝成統一類型listItem即可，然后用arrayList.add(listitem)即可。

 /**
     * 這里我們用三種不同的樣式進行測試
     **/
    private ArrayList<lIstViewItem> getDatas() {

        viewItemsArraylists = new ArrayList<lIstViewItem>();
        viewItemsArraylists.add(new lIstViewItem(2, getHashMapThreeType("汪星人", "汪星人喜歡吃骨頭", "2015-10-18")));
        viewItemsArraylists.add(new lIstViewItem(1, getHashMapSecondType("喵星人", "喵星喜歡吃魚")));
        viewItemsArraylists.add(new lIstViewItem(0, getHashMapFirstType("猴子")));
        viewItemsArraylists.add(new lIstViewItem(0, getHashMapFirstType("老虎")));
        viewItemsArraylists.add(new lIstViewItem(1, getHashMapSecondType("老母雞", "老母雞喜歡吃蟲子")));
        return viewItemsArraylists;
    }

    
    //第一種樣式，只傳輸一個數據
    private HashMap<String, Object> getHashMapFirstType(String firstTheme) {
        HashMap<String, Object> hashMap = new HashMap<String, Object>();
        hashMap.put("Theme", firstTheme);
        return hashMap;
    }


    //第二種樣式，傳輸兩個數據
    private HashMap<String, Object> getHashMapSecondType(String secondTheme, String secondContent) {
        HashMap<String, Object> hashMap = new HashMap<String, Object>();
        hashMap.put("Theme", secondTheme);
        hashMap.put("Content", secondContent);
        return hashMap;
    }

    //第三種樣式，傳輸三個數據
    private HashMap<String, Object> getHashMapThreeType(String threeTheme, String threeContent, String date) {
        HashMap<String, Object> hashMap = new HashMap<String, Object>();
        hashMap.put("Theme", threeTheme);
        hashMap.put("Content", threeContent);
        hashMap.put("Date", date);
        return hashMap;
    }

剩下的就是listViewAdapter的事情啦，和顯示一種樣式的listViewAdapter不同的一點是我們重寫實現父類baseAdapter的兩個方法。

  //返回當前布局的樣式type
    @Override
    public int getItemViewType(int position) {
        return listDatas.get(position).type;
    }

    //返回你有多少個不同的布局
    @Override
    public int getViewTypeCount() {
        return 3;
    }

然后在getView中根據需要進行判斷決定顯示那種樣式即可

package com.example.keranbin.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by keranbin on 2015/10/13.
 */
public class ListViewAdapter extends BaseAdapter {
    private LayoutInflater mLayoutInflater;
    private Context context;
    private ArrayList<lIstViewItem> listDatas;


    public ListViewAdapter(Context context, ArrayList<lIstViewItem> listDatas) {
        this.listDatas = listDatas;
        mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    //返回當前布局的樣式type
    @Override
    public int getItemViewType(int position) {
        return listDatas.get(position).type;
    }

    //返回你有多少個不同的布局
    @Override
    public int getViewTypeCount() {
        return 3;
    }

    @Override
    public int getCount() {
        return listDatas.size();
    }

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        lIstViewItem listItem = listDatas.get(position);
        int Type = getItemViewType(position);
        ViewHolderfirstType viewHolderfirstType = null;
        ViewHoldersecondType viewHoldersecondType = null;
        ViewHolderThreeType viewHolderThreeType = null;
        if (convertView == null) {
            switch (Type) {
                case 0:
                    viewHolderfirstType = new ViewHolderfirstType();
                    convertView = mLayoutInflater.inflate(R.layout.activity_first_type_item, null);
                    viewHolderfirstType.tv_first_theme = (TextView) convertView.findViewById(R.id.tv_first_theme);
                    viewHolderfirstType.tv_first_theme.setText(listItem.map.get("Theme").toString());
//                  convertView.setTag(viewHolderfirstType);  //如果要復用，不同於一種樣式的listView ,這樣的寫法是錯誤的,具體原因看下面第一個小哥評論的說法
                    convertView.setTag(R.id.viewHolderfirstType, viewHolderfirstType);
                    break;
                case 1:
                    viewHoldersecondType = new ViewHoldersecondType();
                    convertView = mLayoutInflater.inflate(R.layout.activity_second_type_item, null);
                    viewHoldersecondType.tv_second_content = (TextView) convertView.findViewById(R.id.tv_second_content);
                    viewHoldersecondType.btn_second_theme = (Button) convertView.findViewById(R.id.btn_second_theme);
                    viewHoldersecondType.tv_second_content.setText(listItem.map.get("Theme").toString());
                    viewHoldersecondType.btn_second_theme.setText(listItem.map.get("Content").toString());
//                    convertView.setTag(viewHoldersecondType);  //如果要復用，不同於一種樣式的listView ,這樣的寫法是錯誤的,具體原因看下面第一個小哥評論的說法
                    convertView.setTag(R.id.viewHoldersecondType, viewHoldersecondType);
                    break;
                case 2:

                    viewHolderThreeType = new ViewHolderThreeType();
                    convertView = mLayoutInflater.inflate(R.layout.activity_three_type_item, null);
                    viewHolderThreeType.tv_three_content = (TextView) convertView.findViewById(R.id.tv_three_content);
                    viewHolderThreeType.et_three_theme = (EditText) convertView.findViewById(R.id.et_three_theme);
                    viewHolderThreeType.tv_three_time = (TextView) convertView.findViewById(R.id.tv_three_time);
                    viewHolderThreeType.et_three_theme.setText(listItem.map.get("Theme").toString());
                    viewHolderThreeType.tv_three_content.setText(listItem.map.get("Content").toString());
                    viewHolderThreeType.tv_three_time.setText(listItem.map.get("Date").toString());
//                    convertView.setTag(viewHolderThreeType);//如果要復用，不同於一種樣式的listView ,這樣的寫法是錯誤的,具體原因看下面第一個小哥評論的說法
                    convertView.setTag(R.id.viewHolderthreeType, viewHolderThreeType);
                    break;
            }
        } else {
            switch (Type) {
                case 0:
                    viewHolderfirstType = (ViewHolderfirstType) convertView.getTag(R.id.viewHolderfirstType);
                    viewHolderfirstType.tv_first_theme.setText(listItem.map.get("Theme").toString());
                    break;
                case 1:
                    viewHoldersecondType = (ViewHoldersecondType) convertView.getTag(R.id.viewHoldersecondType);
                    viewHoldersecondType.tv_second_content = (TextView) convertView.findViewById(R.id.tv_second_content);
                    viewHoldersecondType.btn_second_theme = (Button) convertView.findViewById(R.id.btn_second_theme);
                    viewHoldersecondType.tv_second_content.setText(listItem.map.get("Theme").toString());
                    viewHoldersecondType.btn_second_theme.setText(listItem.map.get("Content").toString());
                    break;
                case 2:
                    viewHolderThreeType = (ViewHolderThreeType) convertView.getTag(R.id.viewHolderthreeType);
                    viewHolderThreeType.tv_three_content = (TextView) convertView.findViewById(R.id.tv_three_content);
                    viewHolderThreeType.et_three_theme = (EditText) convertView.findViewById(R.id.et_three_theme);
                    viewHolderThreeType.tv_three_time = (TextView) convertView.findViewById(R.id.tv_three_time);
                    viewHolderThreeType.et_three_theme.setText(listItem.map.get("Theme").toString());
                    viewHolderThreeType.tv_three_content.setText(listItem.map.get("Content").toString());
                    viewHolderThreeType.tv_three_time.setText(listItem.map.get("Date").toString());
                    break;
            }


        }
        return convertView;
    }


    class ViewHolderfirstType {
        TextView tv_first_theme;
    }

    class ViewHoldersecondType {
        TextView tv_second_content;
        Button btn_second_theme;
    }

    class ViewHolderThreeType {
        EditText et_three_theme;
        TextView tv_three_content;
        TextView tv_three_time;
    }
}

 

第一種樣式頁面組件主要是一個TextView.

<?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"
    >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:background="#454346">

        <TextView
            android:id="@+id/tv_first_theme"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textSize="30dp"
            android:textStyle="bold" />

    </RelativeLayout>
</RelativeLayout>

第二種樣式頁面組件主要是一個TextView和一個button.

<?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">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:background="#834385">

        <Button
            android:id="@+id/btn_second_theme"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30dp" />

        <TextView
            android:id="@+id/tv_second_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:textSize="30dp" />
    </RelativeLayout>
</RelativeLayout>

第三種樣式頁面組件主要是兩個TextView和一個EditText.

<?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">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:background="#6434ff">

        <EditText
            android:id="@+id/et_three_theme"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:textSize="30dp" />

        <TextView
            android:id="@+id/tv_three_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:textSize="30dp" />

        <TextView
            android:id="@+id/tv_three_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/et_three_theme"
            android:layout_alignParentBottom="true"
            android:layout_alignRight="@+id/et_three_theme"
            android:textSize="20dp" />


    </RelativeLayout>

</RelativeLayout>

activity_main.xml文件非常簡單，就一個listView。

<?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:background="#ffffff">

    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></ListView>
</RelativeLayout>

下面是MainActivity的代碼

package com.example.keranbin.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends Activity {
    private ListView listView;                               //頁面listview
    private ListViewAdapter listViewAdapter;                 //listview適配器
    private ArrayList<lIstViewItem> viewItemsArraylists;     //Arraylist主要裝載的是傳給適配器的數據集合

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化頁面組件及一些數據
        initView();
        //為listview設置適配器
        ListViewAdapter listViewAdapter = new ListViewAdapter(MainActivity.this, getDatas());
        listView.setAdapter(listViewAdapter);
    }

    //初始化頁面組件及一些數據
    private void initView() {
        listView = (ListView) this.findViewById(R.id.listView);
        listViewAdapter = new ListViewAdapter(MainActivity.this, getDatas());
    }


    /**
     * 這里我們用三種不同的樣式進行測試
     **/
    private ArrayList<lIstViewItem> getDatas() {

        viewItemsArraylists = new ArrayList<lIstViewItem>();
        viewItemsArraylists.add(new lIstViewItem(2, getHashMapThreeType("汪星人", "汪星人喜歡吃骨頭", "2015-10-18")));
        viewItemsArraylists.add(new lIstViewItem(1, getHashMapSecondType("喵星人", "喵星喜歡吃魚")));
        viewItemsArraylists.add(new lIstViewItem(0, getHashMapFirstType("猴子")));
        viewItemsArraylists.add(new lIstViewItem(0, getHashMapFirstType("老虎")));
        viewItemsArraylists.add(new lIstViewItem(1, getHashMapSecondType("老母雞", "老母雞喜歡吃蟲子")));
        return viewItemsArraylists;
    }


    //第一種樣式，只傳輸一個數據
    private HashMap<String, Object> getHashMapFirstType(String firstTheme) {
        HashMap<String, Object> hashMap = new HashMap<String, Object>();
        hashMap.put("Theme", firstTheme);
        return hashMap;
    }


    //第二種樣式，傳輸兩個數據
    private HashMap<String, Object> getHashMapSecondType(String secondTheme, String secondContent) {
        HashMap<String, Object> hashMap = new HashMap<String, Object>();
        hashMap.put("Theme", secondTheme);
        hashMap.put("Content", secondContent);
        return hashMap;
    }

    //第三種樣式，傳輸三個數據
    private HashMap<String, Object> getHashMapThreeType(String threeTheme, String threeContent, String date) {
        HashMap<String, Object> hashMap = new HashMap<String, Object>();
        hashMap.put("Theme", threeTheme);
        hashMap.put("Content", threeContent);
        hashMap.put("Date", date);
        return hashMap;
    }


}