Android實現帶表徵圖的ListView

Android實現帶表徵圖的ListView已經成為每一個android應用開發初學者的必學知識，熟練掌握此知識點，對我們以後的開發工作會大有好處，今天我們就來一步一步實現一個Android帶表徵圖的ListView。 (1)首先我們要準備一些必須的資源檔，先隨便找8張圖片，分別取名叫img01,img02,img03,img04,img05,img06,img07,img08 (2)在layout下面的activity_main.xml中添加一個ListView控制項，代碼如下： [html]  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent" >        <ListView          android:id="@+id/listView1"          android:layout_width="match_parent"          android:layout_height="wrap_content" />    </RelativeLayout>   在layout下面添加一個名字叫做items.xml的檔案，其內容如下： [html] view plaincopy在CODE上查看代碼片派生到My Code片<?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="horizontal" >        <ImageView          android:id="@+id/image"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:adjustViewBounds="true"          android:maxHeight="72px"          android:maxWidth="72px"          android:paddingBottom="20px"          android:paddingRight="10px"          android:paddingTop="20px" />        <TextView          android:id="@+id/title"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center"          android:padding="10px" />    </LinearLayout>   這個布局檔案裡麵包括一個ImageView和一個TextView，實際上我們可以在這裡自訂各種ListView Item的樣式(3)Java代碼部分，我們最主要的工作就是重新定義類MainListViewAdapter，這個類就是向ListView視圖提供資料的。代碼有一點點長，是因為我都加了很詳細的注釋，具體如下：  [java]  public class MainActivity extends Activity {        // 聲明ListView控制項      private ListView mListView;        // 聲明數組鏈表，其裝載的類型是ListItem(封裝了一個Drawable和一個String的類)      private ArrayList<ListItem> mList;        /**      * Acitivity的入口方法      */      @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);            // 指定Activity的布局使用activity_main.xml          setContentView(R.layout.activity_main);            // 通過findviewByID擷取到ListView對象          mListView = (ListView) findViewById(R.id.listView1);            // 擷取Resources對象          Resources res = this.getResources();            mList = new ArrayList<MainActivity.ListItem>();            // 初始化data，裝載八組資料到數組鏈表mList中          ListItem item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img01));          item.setTitle("項目一");          mList.add(item);            item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img02));          item.setTitle("項目二");          mList.add(item);            item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img03));          item.setTitle("項目三");          mList.add(item);            item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img04));          item.setTitle("項目四");          mList.add(item);            item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img05));          item.setTitle("項目五");          mList.add(item);            item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img06));          item.setTitle("項目六");          mList.add(item);            item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img07));          item.setTitle("項目七");          mList.add(item);            item = new ListItem();          item.setImage(res.getDrawable(R.drawable.img08));          item.setTitle("項目八");          mList.add(item);            // 擷取MainListAdapter對象          MainListViewAdapter adapter = new MainListViewAdapter();            // 將MainListAdapter對象傳遞給ListView視圖          mListView.setAdapter(adapter);      }        @Override      public boolean onCreateOptionsMenu(Menu menu) {          getMenuInflater().inflate(R.menu.activity_main, menu);          return true;      }        /**      * 定義ListView適配器MainListViewAdapter      */      class MainListViewAdapter extends BaseAdapter {            /**          * 返回item的個數          */          @Override          public int getCount() {              // TODO Auto-generated method stub              return mList.size();          }            /**          * 返回item的內容          */          @Override          public Object getItem(int position) {              // TODO Auto-generated method stub              return mList.get(position);          }            /**          * 返回item的id          */          @Override          public long getItemId(int position) {              // TODO Auto-generated method stub              return position;          }            /**          * 返回item的視圖          */          @Override          public View getView(int position, View convertView, ViewGroup parent) {              ListItemView listItemView;                // 初始化item view              if (convertView == null) {                  // 通過LayoutInflater將xml中定義的視圖執行個體化到一個View中                  convertView = LayoutInflater.from(MainActivity.this).inflate(                          R.layout.items, null);                    // 執行個體化一個封裝類ListItemView，並執行個體化它的兩個域                  listItemView = new ListItemView();                  listItemView.imageView = (ImageView) convertView                          .findViewById(R.id.image);                  listItemView.textView = (TextView) convertView                          .findViewById(R.id.title);                    // 將ListItemView對象傳遞給convertView                  convertView.setTag(listItemView);              } else {                  // 從converView中擷取ListItemView對象                  listItemView = (ListItemView) convertView.getTag();              }                // 擷取到mList中指定索引位置的資源              Drawable img = mList.get(position).getImage();              String title = mList.get(position).getTitle();                // 將資源傳遞給ListItemView的兩個域對象              listItemView.imageView.setImageDrawable(img);              listItemView.textView.setText(title);                // 返回convertView對象              return convertView;          }        }        /**      * 封裝兩個視圖組件的類      */      class ListItemView {          ImageView imageView;          TextView textView;      }            /**      * 封裝了兩個資源的類      */      class ListItem {          private Drawable image;          private String title;            public Drawable getImage() {              return image;          }            public void setImage(Drawable image) {              this.image = image;          }            public String getTitle() {              return title;          }            public void setTitle(String title) {              this.title = title;          }        }  }