23 ธันวาคม 2555

[Android Code] List View กับการใช้ Listener เบื้องต้นและข้ามไปยัง Activity อื่น


ในบทความนี้จะเป็นตัวอย่างการใช้งาน Listener กับ List View กันหน่อย
เพราะเห็นว่ายังมีหลายคนอยู่ ที่ยังไม่เข้าใจการเอา List View ไปใช้งานจริง
การใช้ Listener ก็คือส่วนหนึ่งเช่นกัน ตัวอย่างนี้จะให้เลือกตัวเลือกใน List View
แล้วข้ามไปยังหน้า Activity ต่างๆ โดยจะให้ List View แสดงตัวเลือก 3 แถว
เมื่อเลือกตัวเลือกใดๆก็จะข้ามไปยังหน้า Activity หน้านั้นๆตามที่เลือก


สำหรับ Listener ที่ใช้เพื่อกดเลือกตัวเลือกแล้วข้ามไปหน้าต่างๆ
จะใช้ onItemClickListener ที่จะทำงานเมื่อคลิกตัวเลือกใน List View
ถึงแม้ว่าอาจจะดูคล้ายๆกับ onClickListener ที่ใช้กับพวก Button
แต่ onItemClickListener จะสามารถระบุได้ว่าผู้ใช้เลือกตัวเลือกไหน
ซึ่ง onClickListener จะไม่สามารถระบุเจาะจงได้ว่าเลือกตัวเลือกไหน

การเรียงของแต่ละแถวใน List View แถวแรกสุดจะเป็น 0 
แถวต่อมาเป็น 1,  2, 3, ... ไปเรื่อยๆ ไม่ได้เริ่มนับจาก 1 นะ
ดังนั้นจากตัวอย่างที่มีตัวเลือกอยู่สามตัวเลือก
ค่าที่ได้ก็จะมีอยู่สามค่าคือ 0, 1 และ 2 นั่นเอง
โดยแถวแรกเจ้าของบล็อกจะให้เป็นหน้า Profile 
และหน้าต่อมาเป็น Data และหน้าสุดท้ายเป็น Config

การใช้ onItemClickListener เพื่อข้ามไปหน้า Activity ต่างๆ
ก็จะใช้ If เพื่อเช็คว่า Event ที่เกิดขึ้น เป็นแถวไหน
ถ้าเป็น 0 ก็จะให้ข้ามไปยัง Page_Profile.java
ถ้าเป็น 1 ก็จะให้ข้ามไปยัง Page_Data.java
และถ้าเป็น 2 ก็จะให้ข้ามไปยัง Page_Config.java
เห็นมั้ยล่ะ ไม่ยากอะไรเลย ทีนี้ก็มาดูโค๊ดตัวอย่างได้เลย



Main.java
package app.akexorcist.listviewsimplelistener;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.app.Activity;
import android.content.Intent;

public class Main extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        String[] str = { "Profile", "Data", "Config" };
        
        ListView listView1 = (ListView)findViewById(R.id.listView1);
        listView1.setAdapter(new ArrayAdapter(this
                , android.R.layout.simple_list_item_1, str));
        listView1.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> arg0
                    , View arg1, int arg2, long arg3) {
                Intent intent;
                switch(arg2) {
                case 0 : 
                    intent = new Intent(getApplicationContext()
                            , Page_Profile.class);
                    startActivity(intent);
                    break;
                case 1 : 
                    intent = new Intent(getApplicationContext()
                            , Page_Data.class);
                    startActivity(intent);
                    break;
                case 2 : 
                    intent = new Intent(getApplicationContext()
                            , Page_Config.class);
                    startActivity(intent);
                    break;
                }
            }
        });
    }
}

สำหรับโค๊ดใน Main.java ก็ไม่มีอะไรยากเลย น่าจะเข้าใจได้ง่าย
ก็จะทำการประกาศ List View แล้วกำหนดให้ List View แสดงตัวเลือก
ทั้งสามตัวเลือก ก็คือ "Profile", "Data" และ "Config" แล้วแสดงใน List View
จากนั้นก็ทำการสร้าง Event Listener ให้กับ List View โดยใช้ onItemClickListener
ทีนี้ให้ผู้ที่หลงเข้ามาอ่านสังเกตที่ int arg2 ที่เป็นค่าอินพุตของฟังก์ชันนี้
ซึ่งเจ้าตัวแปร arg2 นี่ล่ะ ที่เป็นตัวแปรระบุว่าผู้ใช้เลือกตัวเลือกแถวใด
เจ้าของบล็อกก็จะใช้ Switch เพื่อเช็คเลยว่า arg2 มีค่าเท่ากับเท่าไร
ถ้ามีค่าเท่ากับ 0 ก็จะใช้คำสั่ง Intent เพื่อไปยังหน้า Profile Page
ถ้ามีค่าเท่ากับ 1 ก็จะใช้คำสั่ง Intent เพื่อไปยังหน้า Data Page
และถ้ามีค่าเท่ากับ 2 ก็จะใช้คำสั่ง Intent เพื่อไปยังหน้า Config Page

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" >
    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_margin="30dp" >
    </ListView>
</RelativeLayout>


Page_Profile.java
package app.akexorcist.listviewsimplelistener;

import android.os.Bundle;
import android.app.Activity;

public class Page_Profile extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.page_profile);
    }
}

page_profile.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" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="20sp"
        android:text="Profile Page" />
</RelativeLayout>

Page_Data.java
package app.akexorcist.listviewsimplelistener;

import android.os.Bundle;
import android.app.Activity;

public class Page_Data extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.page_data);
    }
}

page_data.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" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="20sp"
        android:text="Data Page" />
</RelativeLayout>

Page_Config.java
package app.akexorcist.listviewsimplelistener;

import android.os.Bundle;
import android.app.Activity;

public class Page_Config extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.page_config);
    }
}

page_config.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" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="20sp"
        android:text="Config Page" />
</RelativeLayout>

สำหรับ Page_Profile.java, Page_Data.java และ Page_Config.java
ก็ไม่มีอะไร สร้าง Activity ให้พร้อม ส่วนหน้า Layout ใส่ข้อความบอกหน้า


AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app.akexorcist.listviewsimplelistener"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="Main"
            android:label="@string/app_name" 
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="Page_Profile" 
            android:screenOrientation="portrait" />
        <activity android:name="Page_Data" 
            android:screenOrientation="portrait" />
        <activity android:name="Page_Config" 
            android:screenOrientation="portrait" />
    </application>
</manifest>

พอเปิดแอปพลิเคชันขึ้นมาก็จะมี List View แสดงตัวเลือกให้เลือก
เมื่อกดก็จะข้ามไปแสดงหน้า Activity นั้นๆ แทน เท่านั้นเอง


สำหรับผู้ที่หลงเข้ามาอ่านผู้ใดที่ต้องการดาวน์โหลดไฟล์ตัวอย่าง
สามารถดาวน์โหลดได้จากที่นี่เลย List View Simple Listener[Google Drive]


จบแล้วกับบทความพื้นฐาน





เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium