23 ธันวาคม 2555

[Android Code] การใช้ List View ให้แสดงตัวเลือกเป็น Dialog


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

คราวนี้เจ้าของบล็อกจะให้เลือกตัวเลือกใดๆแล้วแสดง Dialog ขึ้นมา
ที่แสดงข้อความว่าผู้ใช้ได้เลือกแถวใดไป และมีปุ่ม OK เพื่อปิด Dialog


สำหรับ Dialog เจ้าของบล็อกจะขอใช้เป็น Custom Dialog นะ
เพราะในตอนหลังเจ้าของบล็อกจะประยุกต์ใช้กับอย่างอื่นด้วย
ดังนั้นการใช้แค่ Alert Dialog จะไม่ยืดหยุ่นนัก เลยใช้ Custom Dialog
สำหรับเรื่อง Custom Dialog เจ้าของบล็อกเคยอธิบายไปแล้ว ตามอ่านได้ที่





Main.java
package com.example.listviewsimpledialog;

import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;

public class Main extends Activity {
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        String[] str = { "Row 0", "Row 1", "Row 2"
                , "Row 3", "Row 4", "Row 5" };
        
        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) {
                final Dialog dialog = new Dialog(Main.this);
                dialog.requestWindowFeature
                        (dialog.getWindow().FEATURE_NO_TITLE);
                dialog.setContentView(R.layout.dialog_data);
                TextView textData = 
                        (TextView)dialog.findViewById(R.id.textData);
                textData.setText("Select row " + arg2);
                
                Button buttonOK = 
                        (Button)dialog.findViewById(R.id.buttonOK);
                buttonOK.setOnClickListener(new OnClickListener() {
                    public void onClick(View v) {
                        dialog.cancel();
                    }
                });
                
                dialog.show();
            }
        });
    }
}


สำหรับ List View เจ้าของบล็อกก็จะสร้าง String[] สำหรับ List View
โดยจะให้ List View แสดงตัวเลือกเป็น Row 0 จนถึง Row 5
จากนั้นก็สร้าง Listener เป็น onItemClickListener ให้กับ List View
แล้วก็ใช้คำสั่งสร้าง Custom Dialog ใน onItemClickListener
โดยให้แสดงข้อความว่าผู้ใช้เลือกตัวเลือกแถวใด
และประกาศให้ปุ่ม Go ของ Custom Dialog เป็นปุ่มปิด Dialog


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"
    android:background="#38b7ce" >
    <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"
        android:scrollingCache="false" />
</RelativeLayout>


dialog_data.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#38b7ce"
    android:orientation="vertical"
    android:gravity="center" >
    <TextView
        android:id="@+id/textData"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:text="TextView"
        android:textColor="#000000"
        android:textSize="20sp" />
    <Button
        android:id="@+id/buttonOK"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="OK" />
</LinearLayout>

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.listviewsimpledialog"
    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>
    </application>
</manifest>

เพียงเท่านี้ก็จะได้อีกตัวอย่างหนึ่งสำหรับการใช้งาน onItemClickListener
ที่เหมาะกับการใช้แสดงข้อมูลต่างๆ เช่นรายชื่อสินค้า เมื่อกดแล้วแสดง Dialog ขึ้นมา
โดยไม่ต้องมาใช้ Intent ไปกลับก็ได้ ผู้ที่หลงเข้ามาอ่านลองเอาไปประยุกต์ดูละกัน

สำหรับผู้ที่หลงเข้ามาอ่านผู้ใดที่ต้องการดาวน์โหลดไฟล์ตัวอย่าง
สามารถดาวน์โหลดได้จากที่นี่เลย List View Simple Dialog [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