ListView

Project : ListViewDemo

สําหรับโปรเจ็กนี้ จะแนะนําให้รู้จักกับ ListView สําหรับการแสดงข้อมูลในรูปแบบ รายการ

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<TextView
android:id = "@+id/select"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:background = "#353535" >
</TextView>

<ListView
android:id = "@android:id/list"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent" >
</ListView>
</LinearLayout>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

Code XML ในการจัด Layout ของ LinearLayout

orientation : อะไรก็ตามที่ใส่เข้าไปใน linear จะเรียงต่อกันตามแนวดิ่ง
width : กว้าง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
height : สูง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
 <TextView
android:id = "@+id/select"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:background = "#353535" >
</TextView>

Code XML ในการจัด Layout ของ TextView

id : มีชื่อตัวแปรว่า select
width : กว้าง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ LinearLayout
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ขนาดตัวอักษรปกติของ TextView
background : กําหนดพื้นหลัง ในที่นี้คือ #353535 สีเทา

<ListView
android:id = "@android:id/list"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent" >
</ListView>

Code XML ในการจัด Layout ของ ListView

id : มีชื่อตัวแปรว่า list
width : กว้าง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ LinearLayout
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ขนาดตัวอักษรปกติของ TextView
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class ListViewDemo extends ListActivity {

TextView select;
String[] list = {"Tao","Oat","Bom","Bank","Arm",
"Beer","Yot","Ju","Bass","Kik",
"Peech","Friend"};

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

select = (TextView)findViewById(R.id.select);

setListAdapter(new ArrayAdapter<String>(
this,
android.R.layout.simple_list_item_1,
list));
}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
// TODO Auto-generated method stub
super.onListItemClick(l, v, position, id);
select.setText(list[position]);
}
}

โปรเจ็กก่อนๆที่เราได้ทํามา จะเป็น Class สืบทอดมาจาก Activity แต่

สําหรับโปรเจ็กนี้ จะเป็น Class ที่สืบทอดมาจาก ListActivity จะได้ว่า

public class ListViewDemo extends ListActivity {

 TextView select;

Code Java ในการประกาศตัวแปร TextView

String[] list = {"Tao","Oat","Bom","Bank","Arm",

"Beer","Yot","Ju","Bass","Kik",
"Peech","Friend"};

Code Java ในการประกาศตัวแปร String แบบ Array เพื่อเก็บ รายชื่อ

select = (TextView)findViewById(R.id.select);

Code Java ในการการเชื่อม ตัวแปร EditText กับ Layout ( XML )

จากนั้นเราก็ทําการกําหนด List ด้วย setListAdapter

โดยที่ฟังก์ชัน setListAdapter รับพารามิเตอร์เป็น ArrayAdapter
ArrayAdapter ที่เราจะใช้เป็นชนิดข้อมูลแบบ String

setListAdapter(new ArrayAdapter<String>(
this,
android.R.layout.simple_list_item_1,
list));

ในพรารามิเตอร์ที่ 2 ของ
ArrayAdapter<T>(context, textViewResourceId, objects)
เป็นการกําหนด Layout ของ TextView ที่อยู่ภายใน ListView ซึ่งมีอยู่หลายแบบ
ในนี้นี้เราจะใช้แบบ android.R.layout.simple_list_item_1
 จากนั้นเราก็มาสร้างฟังก์ชัน สําหรับการตรวจดูว่า list มีการ Click ที่ item ตัวไหนใน list
ด้วยฟังก์ชัน OnListItemClick จะได้ว่า

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
// TODO Auto-generated method stub
super.onListItemClick(l, v, position, id);
select.setText(list[position]);
}

เมื่อเรา ทําการเลือก item แล้ว จะให้แสดง item ที่ถูกคลิก บน TextView

android.R.layout. android.R.layout.
simple_list_item_single_choice simple_list_item_checked

android.R.layout.simple_list_item_1

สําหรับการใช้ ListView แบบ ทางด้านซ้ายและขวา จะต้อง ใช้ฟังก์กัน setChoiceMode

ของ ListView โดยที่เราจะเรียก ListView จากฟังก์ชัน getListView จะได้ว่า
getListView().setChoiceMode(MODE_APPEND);

drbomkung@gmail.com