Android:自訂ListView

android提供的ListView在很多情況下滿足不了我們的展現需求,這裡我以一個圖書列表為例,實現自訂的ListView

先看下要實現的效果,左側顯示圖片,右邊顯示標題以及章節等資訊,實現步驟如下:

1. 建立一個用於控制每行顯示效果的layout,名稱為bookshelf

 

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <TableRow        android:layout_width="wrap_content"        android:layout_height="wrap_content" >        <ImageView            android:id="@+id/book_image"            android:layout_width="80dip"            android:layout_height="80dip"            android:padding="5dip"            android:paddingLeft="0dip" />        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <TextView                android:id="@+id/book_name"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginBottom="10dip"                android:layout_marginTop="2dip"                android:textIsSelectable="true" />            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:orientation="horizontal"                android:layout_marginBottom="5dip" >                <TextView                    android:id="@+id/book_no_read_num"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:textIsSelectable="true"                    android:textSize="12sp" />                <ImageView                    android:id="@+id/book_has_update"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="5dip"                    android:layout_marginTop="3dip"                    android:visibility="gone"                    android:contentDescription="@string/has_update"                    android:src="@drawable/ic_new" />            </LinearLayout>            <TextView                android:id="@+id/book_lasttitle"                android:layout_width="240dip"                android:layout_height="wrap_content"                android:ellipsize="end"                android:paddingRight="5dip"                android:singleLine="true"                android:textIsSelectable="true"                android:textSize="12sp" />        </LinearLayout>    </TableRow></TableLayout>

2. 建立一個新的ListViewAdapter,名稱為bookshelfListViewAdapter

 

 

package com.brook.freenovelread.service;import java.util.ArrayList;import android.content.Context;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.brook.freenovelread.R;import com.brook.freenovelread.object.BookData;import com.brook.freenovelread.utility.HttpUtility;public class bookshelfListViewAdapter extends BaseAdapter {    private ArrayList<BookData> bookshelfList = null;    private Context             context       = null;    /**     * 建構函式,初始化Adapter,將資料傳入     * @param bookshelfList     * @param context     */    public bookshelfListViewAdapter(ArrayList<BookData> bookshelfList, Context context) {        this.bookshelfList = bookshelfList;        this.context = context;    }    @Override    public int getCount() {        return bookshelfList == null ? 0 : bookshelfList.size();    }    @Override    public Object getItem(int position) {        return bookshelfList == null ? null : bookshelfList.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        //裝載view        LayoutInflater layoutInflater = LayoutInflater.from(this.context);        View view = layoutInflater.inflate(R.layout.bookshelf, null);        //擷取控制項        ImageView bookImageView = (ImageView) view.findViewById(R.id.book_image);        TextView bookNameTextView = (TextView) view.findViewById(R.id.book_name);        TextView bookNoReadNumTextView = (TextView) view.findViewById(R.id.book_no_read_num);        TextView bookLastTitleView = (TextView) view.findViewById(R.id.book_lasttitle);        ImageView bookHasUpdateImageView = (ImageView) view.findViewById(R.id.book_has_update);        //對控制項賦值        BookData bookData = (BookData) getItem(position);        if (bookData != null) {            bookImageView.setImageBitmap(HttpUtility.getHttpBitmap(bookData.getImageUrl()));            bookNameTextView.setText(bookData.getName());            Integer noReadNum = bookData.getTotalNum() - bookData.getCurrentNum();            if (noReadNum > 0) {                bookNoReadNumTextView.setText(noReadNum + "章節未讀");                //顯示更新小表徵圖                bookHasUpdateImageView.setVisibility(View.VISIBLE);            } else {                bookNoReadNumTextView.setText("無未讀章節");                //隱藏更新小表徵圖                bookHasUpdateImageView.setVisibility(View.GONE);            }            bookLastTitleView.setText("更新至:" + bookData.getLastTitle());        }        return view;    }}

主要是對getView方法的重寫,將資料插入到R.layout.bookshelf的各控制項中,這裡還用到了一個將網狀圖片下載的工具類HttpUtility,以下是工具類的代碼

 

 

package com.brook.freenovelread.utility;import java.io.InputStream;import java.net.HttpURLConnection;import java.net.URL;import java.util.HashMap;import java.util.Map;import android.graphics.Bitmap;import android.graphics.BitmapFactory;public class HttpUtility {        /**     * 圖片資源緩衝     */    private static Map<String, Bitmap> bitmapCache = new HashMap<String, Bitmap>();        /**     * 擷取網落圖片資源     * @param url     * @return     */    public static Bitmap getHttpBitmap(String url) {        //先從緩衝裡找        Bitmap bitmap = bitmapCache.get(url);        if (bitmap != null) {            return bitmap;        }                //從網路上下載        URL myFileURL;              try {            myFileURL = new URL(url);            //獲得串連            HttpURLConnection conn = (HttpURLConnection) myFileURL.openConnection();            //設定逾時時間為6000毫秒，conn.setConnectionTiem(0);表示沒有時間限制            conn.setConnectTimeout(6000);            //串連設定獲得資料流            conn.setDoInput(true);            //不使用緩衝            conn.setUseCaches(false);            //這句可有可無，沒有影響            //conn.connect();            //得到資料流            InputStream is = conn.getInputStream();            //解析得到圖片            bitmap = BitmapFactory.decodeStream(is);            //關閉資料流            is.close();        }        catch (Exception e) {            e.printStackTrace();        }                if (bitmap != null) {            bitmapCache.put(url, bitmap);        }        return bitmap;    }}

3.在activity的layout檔案中加上一個ListView控制項

 

 

<ListView        android:id="@+id/listview_bookshelf"        android:layout_width="fill_parent"        android:layout_height="0dip"        android:layout_weight="1" />

4.在activity中調用我們寫的ListViewAdapter

 

 

@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //設定首頁面的標題列        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);        setContentView(R.layout.activity_main);        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title_bar);                //更新標題列中按鈕的字型大小        Button btnManage = (Button) findViewById(R.id.btn_manage);        btnManage.setTextSize(10);                //擷取書架列表資料        ArrayList<BookData> bookshelf = new ArrayList<BookData>();        BookData bookData = new BookData();        bookData.setAuthor("天蠶馬鈴薯");        bookData.setCurrentNum(1);        bookData.setDescription("修鍊一途，乃竊陰陽，奪造化，轉涅盤，握生死，掌輪迴。武之極，破蒼穹，動乾坤！");        bookData.setId(1);        bookData.setImageUrl("http://www.easou.org/files/article/image/0/308/308s.jpg");        bookData.setLastTitle("第一千兩百九十四章 魔皇之手");        bookData.setName("武動乾坤");        bookData.setTotalNum(1294);                BookData bookData2 = new BookData();        bookData2.setAuthor("忘語");        bookData2.setCurrentNum(2343);        bookData2.setDescription("一個普通的山村窮小子，偶然之下，進入到當地的江湖小門派，成了一名記名弟子。他以這樣的身份，如何在門派中立足？又如何以平庸的資質，進入到修仙者的行列？和其他巨梟魔頭，仙宗仙師並列于山海內外？希望書友們喜歡本書！");        bookData2.setId(2342);        bookData2.setImageUrl("http://www.easou.org/files/article/image/0/289/289s.jpg");        bookData2.setLastTitle("第十一卷 真仙降世 第兩千三百四十三章 九目血蟾");        bookData2.setName("凡人修仙傳");        bookData2.setTotalNum(2343);                bookshelf.add(bookData);        bookshelf.add(bookData2);        bookshelf.add(bookData);        bookshelf.add(bookData2);        bookshelf.add(bookData);        bookshelf.add(bookData2);                bookshelfListViewAdapter bookshelfListViewAdapter = new bookshelfListViewAdapter(bookshelf, this);        ListView listView = (ListView) findViewById(R.id.listview_bookshelf);        listView.setAdapter(bookshelfListViewAdapter);    }

這樣就ok了