:: เขียนแอพพลิเคชัน Android ฉบับเริ่มต้น การใช้ ListView

ListView Widget เป็นสิ่งที่หลาย แอพพลิเคชันในแพลตฟอร์มของ Android นั้นนิยมใช้กันในการแสดงแถวของข้อมูลให้ผู้ใช้งานได้เลือกตัดสินใจ

ในตัวอย่างนี้จะเป็นการสาธิตวิธีการพัฒนาแอพพลิเคชันบนระบบปฏิบัติการ Android หรือ แพลตฟอร์มของ Android จาก Google กับการใช้งาน ListView ซึ่งก่อนที่เราจะศึกษาบทเรียนนี้แม้จะเป็นแค่เริ่มต้นก็ตาม แนะนำให้ศึกษาบทความก่อนหน้านี้ก่อนครับ ประกอบไปด้วย

เปิด eClipse และ ADT ขึ้นมาครับ ทำการสร้าง Project ใหม่ในตัวอย่างผมตั้งชื่อว่า ListViewDemo
เลือก Empty Activity สำหรับคนที่พัฒนา Minimum Spec ที่เวอร์ชัน 4.2 อย่างผมครับ

สร้าง Project ใหม่

สร้าง Project ใหม่

create-android-project-listview-mainActivity
รอจนกว่า Project จะพร้อมใช้งาน เมื่อพร้อมแล้วให้ไปแก้ไข Layout ของเราที่ไฟล์ activity_main.xml ครับ โดยเราจะใช้ XML ของ ListView ดังนี้
create-android-project-listview-mainActivity3

<ListView
android:id=”@+id/listViewMovie”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:layout_centerVertical=”true” >
</ListView>

ผมใช้ id ของ ListView ด้วยชื่อ id ว่า “listViewMovie” ครับ คราวนี้การทำงานของ ListView คือการเอาข้อมูลที่อยู่ในูปแบบตัวแปร Array มาซ้อนทับแยกในแต่ละแถว เหมือน ตาราง ครับ สิ่งที่ต้องรู้คือการเก็บข้อมูลแบบ Array ครับ

เปิดไฟล์ MainActivity.java ขึ้นมาครับ ทำการ Import ส่วนของ Header ดังนี้

import android.widget.ListView;

ประกาศตัวแปร ListView ที่บรรทัดนี้

public class MainActivity extends Activity {
ListView listView ;

สร้างตัวแปร Array ขึ้นมาครับ ผมจะทำลิสของภาพยนตร์ซีรีย์ที่ผมดูอยู่ตอนนี้ มาเก็บไว้ในตัวแปร Movies

String[] Movies = new String[] {
“An American Horror Story Season 1”,
“An American Horror Story Season 1”,
“An American Horror Story Season 1”,
“Game of Thrones Season 1”,
“Game of Thrones Season 2”,
“Game of Thrones Season 3”,
“Game of Thrones Season 4”,
“True Detective Season 1”
};

หลังจากนั้นเราจะ ใช้ ArrayAdapter มาช่วยในเรื่องแสดงผลกับ ListViewทำการ Import ส่วน Header ต่อไปนี้ครับ

import android.widget.ArrayAdapter;

แล้วก็ใช้คำสั่งในการ Binding ListView กับ ArrayAdapter ก็เป็นอันเสร็จ

final ListView listViewMovie = (ListView)findViewById(R.id.listViewMovie);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, Movies);

listViewMovie.setAdapter(adapter);

ตรวจสอบ Source Code หน้า MainActivity.java ดูก่อนครับว่าเหมือนกันหรือเปล่า

package com.daydev.listviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ListView;
import android.widget.ArrayAdapter;

public class MainActivity extends Activity {
ListView listView ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

String[] Movies = new String[] {
“An American Horror Story Season 1”,
“An American Horror Story Season 1”,
“An American Horror Story Season 1”,
“Game of Thrones Season 1”,
“Game of Thrones Season 2”,
“Game of Thrones Season 3”,
“Game of Thrones Season 4”,
“True Detective Season 1”
};

final ListView listViewMovie = (ListView)findViewById(R.id.listViewMovie);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, Movies);

listViewMovie.setAdapter(adapter);
}
}

ลอง Run แอพพลิเคชันของเราผ่าน Emulator ครับ

android-emulator-listview

อยากจะจำภาพ Capture Screen ก็ให้ทำแบบนี้นะครับ

android-capture-screen

เรียบร้อยแล้วในบทเรียนนี้ สิ่งที่ได้คือ วิธีการใช้งาน ListView Widget สำหรับแอพพลิเคชัน Android แบบสบายๆ ครับ

โค้ดชุดนี้สามารถรันบน IDE ตัวอื่นได้เช่น Android Studio

ตัวอย่างการรันโค้ดบน Android Studio

ไฟล์ MainActivity.java

Listview Android Studio

Listview Android Studio

Listview Android Studio activity_main.xml

Listview Android Studio activity_main.xml

Listview Android Studio activity_main.xml

เทสต์บน Emu

Listview Android Studio

Listview Android Studio

ขอบคุณข้อมูลดีๆจาก http://www.daydev.com/2014/tutorial-android-listview.html

Tags :
- 2014-06-11 4:31:08 โพสต์โดย : hitech คนอ่าน 2,519 views คน