Android - 基礎筆記(三) ListView自定圖文

  • 27605
  • 0
  • 2014-01-06

摘要:Android - 基礎筆記(二) ListView自定圖文

先創出主要Layout(包含一個ListView),裡面的清單項目由另一個xml去部屬,來達到圖文的清單。而清單的容器使用SimpleAdapter 來自訂自己喜歡的樣式,點選後會顯示 ID 還有內容字串陣列


ListView2.java

private SimpleAdapter adapter;
	private ListView listView2;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.listview2);

		listView2 = (ListView) findViewById(R.id.listView2);

		// 清單面版
		adapter = new SimpleAdapter(this, getData(), 
				R.layout.view2content,
				new String[] { "title", "info", "img" },
				new int[] {	R.id.title, R.id.info, R.id.img });
		listView2.setAdapter(adapter);
		listView2.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView arg0, View arg1, int arg2,
					long arg3) {
				// TODO Auto-generated method stub
				ListView listView = (ListView) arg0;
				Toast.makeText(
						ListView2.this,
						"ID:" + arg3 + 
						"   選單文字:"+ listView.getItemAtPosition(arg2).toString(),
						Toast.LENGTH_LONG).show();
			}
		});
	}
	/**
	 * 設定清單資料
	 * */
	private List getData() {		
		List

list = new ArrayList(); Map map = new HashMap(); map.put("title", "G1"); map.put("info", "紅豆"); map.put("img", R.drawable.icon); list.add(map); map = new HashMap(); map.put("title", "G2"); map.put("info", "綠豆"); map.put("img", R.drawable.icon); list.add(map); map = new HashMap(); map.put("title", "G3"); map.put("info", "土豆"); map.put("img", R.drawable.icon); list.add(map); map = new HashMap(); map.put("title", "G4"); map.put("info", "毛豆"); map.put("img", R.drawable.icon); list.add(map); return list; }/map

 

 

主要的版面 裡面只有一個 ListView物件 listview2.xml

<?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="vertical">
	<ListView android:layout_height="wrap_content"
		android:layout_width="match_parent" android:id="@+id/listView2"></ListView>
</LinearLayout>

 

在 ListView 裡面自定顯示排版,在裡面放置了兩個TextView、一個 ImageView
view2content.xml

<?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:src="@drawable/icon"	
		android:layout_height="wrap_content" 
		android:layout_width="wrap_content"
		android:id="@+id/img"></ImageView>
	<LinearLayout 
	android:id="@+id/linearLayout1"
	android:layout_width="match_parent" 
	android:layout_height="wrap_content"
	android:orientation="vertical">
		<TextView 
			android:text="TextView" 
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" 
			android:id="@+id/title"></TextView>
		<TextView 
			android:layout_height="wrap_content"
			android:layout_width="wrap_content"
			android:text="TextView"
			android:id="@+id/info"></TextView>
	</LinearLayout>
</LinearLayout>

 

完整程式碼 Basis_ListView.zip