[分享] BaseAdapter 自定ListView

[givemepass (〆)]

前一陣子在研究怎麼自訂ListView

現在分享給大家

想像一下 一個ListView可能長這樣


█████████
█              █
█              █
█              █
█████████
█              █
█              █
█              █
█████████
█              █
█              █
█              █
█████████
█              █
█              █
       █

       █

       █


然後如果用內建的ListView  SampleAdapter頂多讓你變成這樣

█████████
█title         █
█           □ █
█text          █
█████████
█title         █
█           □ █
█text          █
█████████
█title         █
█           □ █
█text          █
█████████
█              █
█              █
       █

       █

       █

那如果我們想塞圖、塞Button或者塞你想放進去的東西怎麼辦?

很簡單 利用BaseAdapter就可以輕鬆辦到

首先我們了解一下什麼是BaseAdapter

BaseAdapter是一個超好用的類別 它可以讓你自己定義許多種View

例如 Spinner,ListView,GridView

那我們要怎麼去定義一個屬於自己的ListView呢?

首先我們開啟一個新的Project叫做MyListView

讓MyListView去繼承ListActivity(注意!不是Activity喔)

增加一個新的類別叫做MyAdapter, 並且繼承BaseAdapter

你會發現需要覆寫四個方法,分別是

int getCount()
Object getItem(int position)
long getItemId(int position)
View getView(int position, View view, ViewGroup parent)

如果你是用eclipse應該會自動產生這四個方法

這四個方法我來稍微解釋一下

我們知道ListView是由一列一列所組成的

而每一個列 我們可以將它看成是一個View

所組合起來的就是一整個ListView

所以getCount()就是可以取得到底有多少列的方法

而如果我們要取得某一列的內容 就是使用getItem()這個方法

如果你想要取得某一列的id就使用getItemId()這個方法

接著是我們最重要的一個方法 要做修改某一列View的內容

就是利用getView()這個方法


首先先想好要將ListView改變成怎樣?

假設我們想要先塞一個Button 然後塞一張圖片 最後在加上文字說明好了

可能就會長的像這樣子

█████████
█╒╕┌—┐    █
█╘╛｜☆∣text█
█    └—┘    █
█████████
█╒╕┌—┐    █
█╘╛｜☆∣text█
█    └—┘    █
█████████
█╒╕┌—┐    █
█╘╛｜☆∣text█
█    └—┘    █
█████████
█              █
█              █
       █

       █

       █


那麼我們就開始吧!

首先在建立一個list.xml裡面加上一個<ListView ...></ListView>

這是我們點進去第一個看到的畫面

再來就是增加一個adapter.xml

裡面就是放每一列ListView的內容 根據我們想要的會放下

由於我的Layout設定為RelativeLayout 因此會多一個關聯的屬性
<Button
    android:id="@+id/AdapterButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5px">    <!--  位置要調整好 放在左邊-->
</Button>

<ImageView
    android:id="@+id/AdapterImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/AdapterButton"<!-- 設定在Button的右邊 -->
    android:layout_marginLeft="25px">
</ImageView>

<TextView
    android:id="@+id/AdapterText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/AdapterImage" <!-- 設定在ImageView的右邊 -->
    android:layout_marginLeft="45px">
</TextView>

接著我們在MyListView裡面指定main.xml為一開始的畫面

setContentView(R.layout.list);

然後設定MyAdapter為ListView的Adapter

setListAdapter(new MyAdapter(this));

接著換到MyAdapter.java

我們一開始就會定義幾個變數

private LayoutInflater adapterLayoutInflater;

然後在建構子裡面宣告讀取MyListView的Context

adapterLayoutInflater = LayoutInflater.from(c);

因為是範例 所以我們就簡單的用三列好了

因此我們將return設定為3

public int getCount() {
    // TODO Auto-generated method stub
    return 3;
}

再來就是要取得view的順序

先是Button 再來是ImageView 接著是 TextView

所以我們宣告成一個類別讓該列的setTag屬性去讀取

public class TagView{
    Button button;
    ImageView image;
    TextView text;

    public TagView(Button button,ImageView image, TextView text){
        this.button = button;
        this.image = image;
        this.text = text;

    }
}

接著我們在getView 方法裡面去讀取它

TagView tag;
tag = new TagView(
     (Button)view.findViewById(R.id.AdapterButton),
     (ImageView)view.findViewById(R.id.AdapterImage),
     (TextView)view.findViewById(R.id.AdapterText));
view.setTag(tag);


再來就是設定三個元件上面的圖或文字
tag.image.setBackgroundResource(R.drawable.icon);
tag.button.setText("button"+position);
tag.text.setText("text"+position);

這樣一來全部設定好了 可以將該列的view回傳了

return view;

如此一來我們自製的ListView就大功告成

如果你照上面的程序走 應該可以看到這樣的一個畫面

http://ppt.cc/J7H(

如果沒有成功 沒關係 下載這個檔案 慢慢參考研究一下 應該不會很難

http://rapidshare.com/files/455515390/MyListView.zip

如果哪邊有說錯 請千萬要指正我 避免誤導大家 謝謝


PS. 也可以亂改一下 http://ppt.cc/NDpt 順序隨便設定


PS2. 有人反映ListView點它沒反應 這是因為塞入了Button的關係
Focus的屬性被Button搶走了 所以你只要在xml檔案裡面
把Button的屬性加上這行
android:focusable="false"
就會發現可以點選ListView了

參考網頁
http://iamshiao.blogspot.com/2010/12/androidbaseadapterlistview.html
http://www.iteye.com/topic/540423
http://developer.android.com/reference/android/widget/ListView.html
http://developer.android.com/reference/android/widget/BaseAdapter.html
http://disanji.net/2010/11/25/android-baseadapter-spinner-listview-gridview/

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.64.84.230
※ 編輯: givemepass      來自: 61.64.84.230         (04/02 16:01)
推 nowar100:首推 晚點幫您收精華區
推 ericinttu:推一個
推 diousk:PUSH!
推 nvidia:http://tinyurl.com/3ffzols sonyericsson的開發者BLOG
→ nvidia:也有source code
推 tomap41017:大推!太強了
→ nowar100:已收錄
推 hrs113355:推
→ givemepass:sonyericsson 3D的那個太酷了 來學一下 感謝給資訊:)
推 tn1031:推
推 mickeychacha:推
推 sorrel20567:推!!!!!這非常實用
推 laiis:推！這招厲害
推 donnolove:推！  很受用
推 rize0528:感謝教學，另外請問如何在getView的時候得知row高?
推 indicate:推~
推 kokdog1204: 推