หลังจากตัวอย่างในตัวอย่างที่แล้ว ที่เราสร้าง ListActivity โดยแต่ละรายการมีรูปที่แตกต่างกันโดยใช้ SimpleAdapter วันนี้เราจะมาใช้ Adapter อีกตัวหนึ่งคือ BaseAdapter โดยวิธีการนี้เราต้องสร้าง class ขึ้นมาโดยสืบทอด BaseAdapter วิธีนี้เราสามารถควบคุมการแสดงผลได้มากกว่าที่ผ่านมา ตัวอย่างที่เราจะทำวันนี้ดัดแปลงมาจากตัวอย่างที่แล้ว โดยในแต่ละรายการจะมีจำนวน และให้ highlight แถวที่มีจำนวนน้อยกว่าหรือเท่ากับเกณฑ์ต่ำ โดยแต่ละรายการมีเกณฑ์ไม่เท่ากัน ลองดูผลลัพธ์ครับ

activity_main.xml

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    >
 <TextView 
     android:id="@+id/name"
     android:layout_width="0dp"
     android:layout_height="match_parent"
     android:layout_weight="1"
     android:gravity="center_vertical"
     android:drawableLeft="@drawable/ico_apple"
     android:drawablePadding="10dp"
     />
 <TextView 
     android:id="@+id/num"
     android:layout_width="wrap_content"
     android:layout_height="match_parent"
     android:gravity="center_vertical"
     android:paddingRight="20dp"
     />    
</LinearLayout>

จากตัวอย่างที่แล้วเราได้ใส่รูปลงใน ListActivity ของเราแล้วแต่ว่าทุกๆรายการเป็นรูปเดียวกันหมด วันนี้เราจะมาสร้าง ListActivity ที่แต่ละรายการสามารถใช้รูปที่แตกต่างกันได้ โดยใช้ SimpleAdapter (ชื่อ Simple แต่ไม่แน่ใจว่า Simple จริงหรือป่าว 555) ก่อนอื่นดูผลลัพธ์โปรแกรมก่อนครับ

activity_main.xml

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    >
    <ImageView 
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        />
 <TextView 
     android:id="@+id/name"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center_vertical"
     />    
</LinearLayout>

MainActivity.java

package com.simplelist;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class MainActivity extends ListActivity {

 final String[] fruit = {"Apple", "Banana", "Coconut", "Durian", "Guava", "Mango", "Mangosteen", "Rambutant"};
 final int[] img = {R.drawable.ico_apple, 
   R.drawable.ico_banana,
   R.drawable.ico_coconut,
   R.drawable.ico_durian,
   R.drawable.ico_guava,
   R.drawable.ico_mango,
   R.drawable.ico_mangosteen,
   R.drawable.ico_rambutant
  };
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  ArrayList<HashMap<String, Object>> listArg = new ArrayList<HashMap<String, Object>>();
  HashMap<String, Object> map = null;
  int i = 0;
  for(String f : fruit){
   map = new HashMap<String, Object>();
   map.put("name", f);
   map.put("img", img[i]);
   listArg.add(map);
   i++;
  }
  SimpleAdapter adapter = new SimpleAdapter(this, listArg, R.layout.row, new String[]{"name", "img"}, new int[]{R.id.name, R.id.img});
  this.setListAdapter(adapter);
 }
 
 @Override
 public void onListItemClick(ListView lv, View v, int position, long id){
  Toast.makeText(this, "You click " + fruit[position], Toast.LENGTH_SHORT).show();
 }

}

จากตัวอย่าง การใช้งาน ListActivity เบื้องต้น เราสามารถสร้าง List รายการขึ้นมาได้แต่ List รายการดังกล่าว ยังดูไม่ค่อยน่าสนใจเท่าไหร่ วันนี้เราจะมาลองใส่รูปดูครับ ก่อนอื่นดูหน้าตาโปรแกรมที่เสร็จแล้วก่อนครับ
ทีนี้มาดูโค้ดกันบ้าง activity_main.xml

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

row.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:drawableLeft="@drawable/ico_gear"
    android:drawablePadding="10dp"
    android:gravity="center_vertical"
    />

การใช้งาน ListActivity เบื้องต้น 1

    วันนี้จะมาลองทำ ListActivity แบบเบื้องต้นกันครับ

1. ขั้นแรกสร้างโปรเจ็คขึ้นมาก่อนครับ ในที่นี้ขอตั้งชื่อโปรเจ็คว่า SimpleListview นะครับ วิธีการสร้างโปรเจ็คสามารถดูได้จากในโพสต์ก่อนหน้านะครับ
2. ขั้นตอนต่อไปเปิดไฟล์ res/layout/activity_main.xml ขึ้นมาครับ ชื่อไฟล์ใครจะต่างจากนี้ก็ได้ครับ แล้วแก้ไขดังนี้

   <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"
       tools:context=".MainActivity" >
   
    <ListView 
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
   </RelativeLayout>
   

   ในโค้ด xml ด้านบนก็ทำการเพิ่ม ListView เข้าไปนะครับ โดยกำหนด id เป็น @android:id/list เราจำเป็นต้องกำหนดแบบนี้ ถ้าเราต้องการใช้ activity ของเรา extends class ListActivity ถ้าไม่กำหนดจะเกิด error ครับ จริงๆแล้วเราสามารถย่อเหลือแค่นี้ก็ได้ครับ

   <ListView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@android:id/list"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       />
   

   เพราะในหน้ัานี้เรามี view แค่อันเดียวคือ ListView นั่นเอง หน้าตาแบบ graphic ก็จะประมาณนี้ครับ