Android實現帶圖標的ListView

Android實現帶圖標的ListView已經成為每一個android應用開發初學者的必學知識，熟練掌握此知識點，對我們以後的開發工作會大有好處，今天我們就來一步一步實現一個Android帶圖標的ListView。

(1)首先我們要准備一些必須的資源文件，先隨便找8張圖片，分別取名叫img01,img02,img03,img04,img05,img06,img07,img08

(2)在layout下面的activity_main.xml中添加一個ListView控件，代碼如下：

在layout下面添加一個名字叫做items.xml的文件，其內容如下：

這個布局文件裡面包括一個ImageView和一個TextView，實際上我們可以在這裡自定義各種ListView Item的樣式

(3)Java代碼部分，我們最主要的工作就是重新定義類MainListViewAdapter，這個類就是向ListView視圖提供數據的。代碼有一點點長，是因為我都加了很詳細的注釋，具體如下：

public class MainActivity extends Activity {

	// 聲明ListView控件
	private ListView mListView;

	// 聲明數組鏈表，其裝載的類型是ListItem(封裝了一個Drawable和一個String的類)
	private ArrayList 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();

		// 初始化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;
		}

	}
}

右鍵運行一下android project，效果圖如下：

源碼下載鏈接：

Android實現帶圖標的ListView