การใช้ checkBox ใน listView ด้วย customAdapter

โดยปกติ ถ้าใช้ listView เราจะเรียกใช้ adapter ที่มากับ Android Studio คือ android.R.layout.simple_list_item_1 แต่ Adapter ตัวนี้ ใช้ได้เฉพาะกับ ข้อมูลใน listView ที่เป็นตัวอักษร เท่านั้น ถ้าต้องการให้มีภาพ หรือ อย่างอื่น ๆ เช่น checkBox หรือ RadioBox หรือ จัดรูปแบบให้หลากหลาย ก็ไม่สามารถทำได้ เราจึงต้องสร้างรูปแบบเอง และสร้าง Adapter ขึ้นเอง ซึ่งเรียกว่าเป็น customAdapter

ในตัวอย่างต่อไปนี้ จะเป็นการสร้าง listView ที่ประกอบด้วย checkBox และข้อความ ดังภาพ

มีขั้นตอนหลัก ๆ ดังนี้

1. สร้าง Project ใหม่
2. สร้าง Activity แรก และสร้าง Activity สำหรับหน้าเมนูหลักเพื่อเรียกใช้งาน listBox
3. สร้าง layout ที่จะใช้เป็นรูปแบบของ listView ในแต่ละรายการ หรือ item ที่ประกอบด้วย checkBox และ textBox หรือกล่องข้อความ ที่จะปรากฏใตแต่ละรายการ
4. สร้างไฟล์ java หรือ Class ใหม่ เพื่อให้เป็น customAdapter เพื่อ แปลง หรือปรับข้อมูลที่มีทั้ง checkBox และ  textBox พร้อมทั้งเรียกใช้งานใน Activity ที่ต้องการใช้ listView

วิธีการ

การสร้าง Project ใหม่

1. สร้าง Project ใหม่ ในตัวอย่างนี้ใช้ Android Studio 1.5.1 สร้าง Project ใหม่ ระบุ API 11 และใช้ Blank Activity ซึ่ง Android Studio จะสร้างไฟล์ต่าง ๆ ให้พร้อมใช้งาน ในตัวอย่างนี้ จะใช้งาน listView ใน Activity ที่ชื่อว่า Menu_Page ดังนี้ โดยคลิกปุ่มหน้าแรก แล้วให้มาที่หน้า Menu_Page
   
   ส่วนวิธีการที่จะสร้างหน้าแรกอย่างไร จะไม่พูดถึง แต่จะเริ่มที่หน้า Menu_Page ที่จะแสดง listView เท่านั้น

การสร้าง Activity เพื่อเรียกใช้งาน listView

1. สร้าง Activity หลัก โดยมีปุ่มสำหรับเมื่อกดแล้วจะมาที่ หน้าเมนูหลัก ซึ่งเรียกใช้งาน listView
2. สร้างหน้าหน้าเมนูหลัก เพื่อใช้งาน listView โดยคลิกขวาที่ห้อง jave สำหรับไฟล์ของ Project และเลือก New > Activity >BlankActivity
   
3. ตั้งชื่อว่า Menu_Page
4. ไปที่ res > layout จะเห็นมีไฟล์ layout สำหรับ Activity ที่สร้างใหม่ 
5. ลาก Large Text Widget และ ListView มาวาง พร้อมทั้งเปลี่ยนข้อความของ Large Text ตามต้องการ Layout นี้ จะเป็นหน้าจอหลักสำหรับเมนู 
   
6. กำหนด id ของ TextView ว่า textView และ ListView ว่า menuList
7. ไปที่ห้อง java เพื่อเขียนโค้ดในไฟล์ Menu_Page
8. ให้ extends  AppCompatActivity เพื่อให้ครอบคลุม API รุ่นเก่าได้ ถึง API 7  
9. กำหนดตัวแปร ListView, ArrayAdapter และตัวแปรที่เป็น Array ชื่อชุดข้อสอบ

   ListView listView;
   ArrayAdapter adapter;
   
   String[] mainMenuItems ={"Vocabulary","Vocab ชุดที่ 1","Vocab ชุดที่ 2","Vocab ชุดที่ 3","Grammar","Tense","Articles","Conversations","บทสนทนา ชุดที่ 1","บทสนทนา ชุดที่ 2","บทสนทนา ชุดที่ 3","Reading Passages","บทอ่าน ชุดที่ 1","บทอ่าน ชุดที่ 2","บทอ่าน ชุดที่ 3","รวมชุดข้อสอบ","ข้อสอบ ชุดที่ 1","ข้อสอบ ชุดที่ 2","ข้อสอบ ชุดที่ 3"};

   
   
10. ใน on Create method ให้กำหนดให้ใช้ Layout ที่สร้างขึ้น และสัมพันธ์ id กับตัวแปรที่กำหนดขึ้น

     protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_menu__page);
            listView = (ListView)findViewById(R.id.menuList );

    
    
11. ค้างไว้แค่นี้ก่อน เพื่อไปจัดการกับ CustomAdapter

การสร้าง layout ที่จะใช้เป็นรูปแบบของ listView ในแต่ละรายการ หรือ item

1. คลิกขวาที่ layout ในห้อง res และเลือก New > Layout resource file
   
2. ตั้งชื่อไฟล์ ว่า simplerow
3. กำหนดให้ใช้ Linear Layout กำหนดให้เป็นการเรียงแบบ Horizontal เพื่อให้ checkBox อยู่ทางซ้าย และ TextView อยู่ทางขวา โดยไปปรับ orientation ใน Code ของ Text ดังนี้
   

   xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal" android:layout_width="match_parent"

   android:layout_height="match_parent"> 
4. ลาก checkBox และ Text View มาวาง 
   
5. กำหนด id ของ checkBox ว่า chkBox และ กำหนด id  ของ TextView ว่า examName

การสร้างไฟล์ java  Class ใหม่ เพื่อให้เป็น customAdapter

ไฟล์ที่เป็น Adapter จะทำหน้าที่แปลงข้อมูล ในรูปแบบอื่น เช่น Array เพื่อให้เป็นข้อมูลใน listBox ในกรณีนี้ จะนำเอา checkBox และ TextView มาเป็นข้อมูลในรายการของ listView สำหรับ TextView จะให้รับค่ามาจาก Array ที่เป็นชื่อข้อสอบ ดังนั้น ในแต่ละรายการใน ListView จะประกอบไปด้วย checkBox และชื่อของข้อสอบ ที่ไม่ซ้ำกันในแต่ละรายการ

1. คลิกที่ห้องเก็บ Project file ในห้อง java เลือก New > Class
   
2. ตั้งชื่อไฟล์ java ว่า ClassAdapter
3. ให้ extends ArrayAdapter ที่เป็น String เพื่อรับค่าตัวแปร Array ที่เป็นชื่อวิชา ถ้าไม่กำหนดให้เป็น String จะได้เป็น Object ซึ่งจะมีปัญหาตอนกำหนดให้รับค่าตัวแปร Array ชื่อวิชา
   
   

   class CustomAdapter extends ArrayAdapter{
   
   

4. ใน Class นี้ กำหนด method ให้เลือกใช้ simplerow layout และให้สร้างหน้าจอ ListView โดยการ override onGetView() และกำหนดค่า โดยใช้ค่าที่เราได้กำหนดไว้แล้ว โดยสรุป คือ เขียนโค้ด ดังนี้
   
   

   import android.content.Context;
   import android.text.Layout;
   import android.view.LayoutInflater;
   import android.view.View;
   import android.view.ViewGroup;
   import android.widget.ArrayAdapter;
   import android.widget.CheckBox;
   import android.widget.TextView;
   
   class CustomAdapter extends ArrayAdapter{
   
       public CustomAdapter(Context context, String[] mainMenuItems) {
          super(context,R.layout.simplerow,mainMenuItems);
       }
   
       @Override    public View getView(int position, View convertView, ViewGroup parent) {
           LayoutInflater inflater = LayoutInflater.from(getContext());
           View customView = inflater.inflate(R.layout.simplerow, parent, false);
   
           String singleRow = getItem(position);
           TextView examName = (TextView)customView.findViewById(R.id.examName);
           CheckBox checkBox = (CheckBox)customView.findViewById(R.id.chkBox);
   
           examName.setText(singleRow);
           checkBox.isChecked();
   
           return customView;
   
       }
   }

5. กลับมาที่ Menu_Page.java เพื่อทำงานต่อ โดยสั่งให้ใช้ CustomAdapter พร้อมทั้งกำหนดว่า เมื่อคลิกที่ ListView แล้วจะให้ทำอะไร ในตัวอย่างนี้ เมื่อคลิกแล้วให้แสดงข้อความขึ้นหน้าจอ โดยใช้ Toast() โดยสรุป ใน onCreate method เขียนโค้ด ดังนี้
   
   

   @Overrideprotected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_menu__page);
       listView = (ListView)findViewById(R.id.menuList );
   
       adapter = new CustomAdapter(this,mainMenuItems);
       listView.setAdapter(adapter);
       listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
   
           @Override        public void onItemClick(AdapterView parent, View view, int position, long id) {
   
               switch (position) {
                   case 0:
                       Toast.makeText(Menu_Page.this, "คลิกรายการที่ " + position, Toast.LENGTH_LONG).show();
                       break;
                   case 1:
                       Toast.makeText(Menu_Page.this, "คลิกรายการที่ " + position, Toast.LENGTH_LONG).show();
                       break;
                   case 2:
                       Toast.makeText(Menu_Page.this, "คลิกรายการที่ " + position, Toast.LENGTH_LONG).show();
                       break;
                   case 3:
                       Toast.makeText(Menu_Page.this, "คลิกรายการที่ " + position, Toast.LENGTH_LONG).show();
                       break;
   
               }
           }
       });
   }
   

เป็นอันเสร็จการเรียกใช้งาน CustomAdapter ที่สร้าง ListView ซึ่งประกอบด้วย checkBox และข้อความในแต่ละรายการ เมื่อ Run ดูและคลิกเลือกที่รายการ จะได้ ดังนี้

ดาวน์โหลดไฟล์ตัวอย่าง คลิกที่นี่