一起Talk Android吧（第七十四回：Android中UI控件之ListView擴充）

各位看官們，大家好，上一回中咱們說的是Android中UI控件之

ListView

基礎的例子，這一回咱們說的UI控件之

ListView

擴充。閑話休提，言歸正轉。讓我們一起Talk Android吧！

看官們，掌握了ListView的基本用法後，我們要對它進行擴充，因為在實際的項目中幾乎都對它進行了擴充，擴充的地方有三個：資料，擴充卡和布局。接下來我們分别介紹它們。

1.資料：

可以是數組或者List。資料的類型可以是内置類型也可以是自己定義的類型，常用的是自己定義的類型，因為這樣做擴充性高。

2.擴充卡：

可以繼承擴充卡的類，進而擴充擴充卡。繼承後通常是重寫擴充卡構造方法和getView方法。

3.布局：

這裡的布局指ListView中每一項内容的布局。基本用法中使用的是系統提供的布局，我們可以自己定義一個布局檔案。在例子中我們定義了一個布局， 布局中有兩個内容：前面是一個圖示，後面是一行文字。(類似微信界面)

接下來我們通過代碼結合文本的方式來示範如何擴充這種元件，擴充用法是在基本用法的基礎上進行的, 是以擴充用法中與基本用法相同的代碼，不在列出來。

• 1.在布局中添加ListView。通常是在Activity或者Fragment的布局檔案中添加。
• 2.在代碼中擷取布局檔案中的ListView。通常位于Activity或者Fragment的onCreate方法中。

• 3.在代碼中為ListView添加需要顯示的資料。該步驟是主要進行擴充的地方。

  擴充資料：

public class DataType {  //建立資料類型
        private int mImageId;
        private String mTitle;

        public DataType(int imageId,String title){
            this.mImageId = imageId;
            this.mTitle = title;
        }

        public int getImageId() {
            return mImageId;
        }

        public void setImageId(int imageId) {
            mImageId = imageId;
        }

        public String getTitle() {
            return mTitle;
        }

        public void setTitle(String title) {
            mTitle = title;
        }
    }

    private List<DataType> mDataTypeList = new ArrayList<>();

    for(int i=;i <; i++){  //初始化List
        DataType data1 = new DataType(R.drawable.icon1," This is Chome");
        mDataTypeList.add(data1);

        DataType data2 = new DataType(R.drawable.icon2," This is Google");
        mDataTypeList.add(data2);
    }
           

在該步驟中主要是自定義了資料類型

DataType

，并且建立和初始化了

DataType

類型的

List

。資料類型中的資料成員可以依據項目的需要來定義，這裡隻定義了一個圖檔id和文本，它們分别用來顯示圖檔和相應和文字内容。另外，在初始化List的時候，我們隻寫了兩種不同内容的資料，其它的資料是這兩種資料的重複。資料中使用了兩個圖檔資源，需要提前把它們放到

drawable

目錄下面，在代碼中我們放的是名為icon1和icon2的兩張圖檔。

擴充布局：

這裡的布局是指在ListView中每一項内容如何顯示的布局，我們在ListView的基本用法中使用了系統提供的布局，哪個布局隻能用來顯示一行文本内容，這顯然不能滿足項目需求。下面是我們擴充的布局檔案，該布局檔案可以使ListView中每一項内容顯示一個圖檔和一行文字。

在layout目錄下自己建立一個名叫list_item.xml的布局檔案，代碼如下：

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

    <ImageView
        android:id="@+id/list_item_image"
        android:layout_width="40dp"
        android:layout_height="40dp" />
    <TextView
        android:id="@+id/list_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>
           

該布局檔案中包含一個

ImageView

和一個

TextView

，顯示出來的效果就是一個圖檔和一行文字。大家可以依據自己的需要來定義布局檔案中的内容，不過這些内容要和資料類型比對。比如該布局檔案中的ImageView和TextView就和自定義資料類型的中兩個資料成員相比對。

擴充擴充卡：

public class DIYAdapter extends ArrayAdapter<DataType>{
        private int itemId;
        public DIYAdapter(Context context, int textViewId, List<DataType> dataTypeList){
            super(context,textViewId,dataTypeList);
            itemId = textViewId; //這是布局檔案的id，R.layout.id_xxx
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            DataType itemData = getItem(position);  //擷取位置處的資料
            //擷取擴充的布局檔案，以及布局檔案中的控件
            View view = LayoutInflater.from(getContext()).inflate(itemId,parent,false);
            ImageView imageView = (ImageView)view.findViewById(R.id.list_item_image);
            TextView textView = (TextView)view.findViewById(R.id.list_item_text);
            imageView.setImageResource(itemData.getImageId());
            textView.setText(itemData.getTitle());

            return  view;
        }
    }
           

在該步驟中自定義了擴充卡類，該類繼承自

ArrayAdapter

，我們重寫了類的構造方法和getView方法。構造方法中主要是傳入了布局檔案的id，和存放資料的List。其中布局檔案的id就是上一個步驟中擴充布局的id。存放資料的List需要定義，不過它的類型也是我們擴充資料中建立的類型，具體的代碼如下：

　　private List<DataType> mDataTypeList = new ArrayList<>();
    DIYAdapter diyAdapter = new DIYAdapter(Activity2.this,R.layout.list_item,mDataTypeList);
           

我們重點介紹一下

getView

方法，它是一個回調方法，當

ListView

中某一項内容被顯示到螢幕中時就會調用它。它的第一個參數傳遞來的就是

ListView

中剛剛顯示到螢幕中某項内容的具體位置，通過該位置我們可以擷取到該位置中的資料。接下來就是擷取擴充的布局檔案，并且通過它來擷取布局檔案中的控件。這樣我們可以把資料傳遞給布局檔案中的控件，讓這些控件來把資料顯示到螢幕上。

• 4.給ListView添加事件監聽器，當ListView中的某個内容被點選時就會觸發該監聽器。

  監聽器中的代碼擴充起來沒有具體的原則，大家可以依據項目需求自行擴充，下面的代碼中擷取了被點選清單項的内容，并且通過Toast顯示出來。

mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                DataType item = mDataTypeList.get(i);
                String str = "Item: "+i+" content: "+item.getTitle();
                Toast.makeText(Activity2.this,str,Toast.LENGTH_LONG).show();
            }
        });
           

下面是程式的運作結果，請大家參考：

各位看官，關于Android中UI控件之ListView擴充的例子咱們就介紹到這裡，欲知後面還有什麼例子，且聽下回分解！