ListView With BaseAdapter

如果想要自定義 ListView 中 Item 的樣式。
就不能再使用 ListAdapter 來綁定資料。
要改使用 BaseAdapter 來自定義 Item View 與資料的關聯。
效果圖如下。

跟其他 ListView 範例一樣先在主畫面的 layout.xml 中放入一個 ListView 。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.demo.listviewdemo.BaseAdapterListView">

    <ListView
        android:id="@+id/lv_BaseAdapterListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

接下來新增一個 item xml 來自己設計 item 要呈現的樣式。

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

    <ImageView
        tools:src="@mipmap/ic_launcher"
        android:id="@+id/iv_BaseItem"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <TextView
        android:layout_marginLeft="15dp"
        android:textSize="24sp"
        tools:text="Android"
        android:layout_gravity="center"
        android:id="@+id/tv_BaseItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

我們給 item 總高度為 120dp 然後放入一個 ImageView 與 TextView 。
接下來新增一個 Class 然後繼承 BaseAdapter 。
繼承 BaseAdapter 需要 Override 以下四種方法。

• getCount：決定 Item 的總數量。
• getItem(int position)：取得 Item 對應的資料。
• getItemId(int position)：取得 Item ID 通常回傳 position 就可以了。
• getView：取得 Item 的 View 也是最重要的方法。

getCount 沒什麼好說的就是回傳的數量會決定你 ListView 呈現的 Item 數量。
getItem   追蹤 BaseAdapter 的  Source 後可以看到說明是要找相對應的資料。

    /**
     * Get the data item associated with the specified position in the data set.
     * 
     * @param position Position of the item whose data we want within the adapter's 
     * data set.
     * @return The data at the specified position.
     */
    Object getItem(int position);

getItemID 追蹤 Source 看到說明後是要找相對應資料的 ID 但回傳 position 也可以。

   /**
     * Get the row id associated with the specified position in the list.
     * 
     * @param position The position of the item within the adapter's data set whose row id we want.
     * @return The id of the item at the specified position.
     */
    long getItemId(int position);

getView 是最重要的一環用來綁定資料與你設計的 item 樣式。
再搭配上 ViewHolder 可以增加一點效能。
看看完整的 BaseAdapter code。

public class MyBaseAdapter extends BaseAdapter {
    private List<String> mList;
    private LayoutInflater mLayoutInflater;

    public MyBaseAdapter(Context context, String[] list) {
        this.mLayoutInflater = LayoutInflater.from(context);
        mList = Arrays.asList(list);
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if (null == convertView) {
            convertView = mLayoutInflater.inflate(R.layout.base_adapter_item, parent, false);

            viewHolder = new ViewHolder();
            viewHolder.ivItem = (ImageView) convertView.findViewById(R.id.iv_BaseItem);
            viewHolder.tvItem = (TextView) convertView.findViewById(R.id.tv_BaseItem);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.tvItem.setText(mList.get(position));
        if (position % 2 == 0) {
            viewHolder.ivItem.setImageResource(R.mipmap.ic_car);
        } else {
            viewHolder.ivItem.setImageResource(R.mipmap.ic_launcher);
        }
        return convertView;
    }

    class ViewHolder {
        TextView tvItem;
        ImageView ivItem;
    }
}

我們傳入 Context 進去是為了要使用 LayoutInflater 來把 item.xml 與 View 做關聯。
且在傳入我們想要呈現的資料陣列進去來綁定資料。
準備了一張圖片在 getView 中幫 ImageView 更換圖片。
接下來就只要把 ListView 與 BaseAdapter 做綁定就完成了。

        String[] strs = getResources().getStringArray(R.array.list);
        ListView listView = (ListView) findViewById(R.id.lv_BaseAdapterListView);
        MyBaseAdapter adapter = new MyBaseAdapter(this,strs);
        listView.setAdapter(adapter);

效果圖如下。

程式碼下載: GitHub
相關連結:

• ListView
• ExpandableListView
• ListView 增加頁頭、頁尾