มาถึงตอนนี้เราก็มีรายการรูปภาพที่เปิดให้บริการแล้ว
สิ่งที่เราจะทำต่อไปคือ ส่งข้อมูลรูปเหล่านี้ไปให้ Adapter
ผู้เป็นพระเอกของเรานำไปจัดการแสดงผลต่อไป
กลับมาที่ไฟล์ MenuAdapter.java ค่ะ
เราต้องรับข้อมูลรายการรูปภาพเพิ่มเติม
ที่ Constructor เรารับตัวแปรประเภท ArrayList ของ Integer เข้ามา
เราจะส่งข้อมูลรูปภาพมาทางนี้ค่ะ
ประกาศตัวแปรชนิดนี้เอาไว้ระดับคลาสนะคะ
เดี๋ยวต้องเอาไปใช้หลายที่
กำหนดค่าเริ่มต้นให้เรียบร้อยค่ะ
จะได้ดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public class MenuAdapter extends BaseAdapter { private Context context; private LayoutInflater layoutInflater; private final ArrayList<Integer> image; public MenuAdapter(Context context, ArrayList<Integer> image) { this.context = context; this.image = image; layoutInflater = LayoutInflater.from(context); } //.... |
ที่เมธอด getCount() เปลี่ยนเป็นส่งขนาดของ image แทน
1 2 3 4 |
@Override public int getCount() { return image.size(); } |
ต่อไปเราต้องทำอะไร จำได้มั้ยคะ ?
เรายังไม่มี Holder ค่ะ 🙂
สร้าง คลาสภายใน ชื่อ ViewHolder ขึ้นมา
ประกาศตัวแปรจับคู่กับ layout เหมือนเดิมนะคะ
มีแค่ภาพเดียว ก็ประกาศไว้ตัวแปรเดียว
ที่จริง ViewHolder เราใช้แค่ในเมธอด getView() เมธอดเดียว
จะประกาศใช้งานในเมธอกก็ได้ค่ะ
แต่เราอยากเอาไว้ด้านบนมากกว่า
เวลาอ่านโค้ดจะได้รู้ว่า คลาสนี้ใช้ตัวแปรอะไรบ้าง
โดยไม่ต้องลงมาดูถึงในเมธอด
ตัดสินใจเองตามความต้องการนะคะ ไม่มีอะไรตายตัวอยู่แล้ว
แต่ต้องมีเหตุผลในการเขียนโค้ดลงไป
ขั้นตอนในเมธอด getView() ก็เหมือนเดิม
ตาม Project Custom View นะคะ
จะได้โค้ดทั้งหมดดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
package com.mystou.dynamicmenu.adapter; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import com.mystou.dynamicmenu.R; import java.util.ArrayList; public class MenuAdapter extends BaseAdapter { private ViewHolder holder; private Context context; private LayoutInflater layoutInflater; private final ArrayList<Integer> image; public MenuAdapter(Context context, ArrayList<Integer> image) { this.context = context; this.image = image; layoutInflater = LayoutInflater.from(context); } @Override public int getCount() { return image.size(); } @Override public Object getItem(int i) { return i; } @Override public long getItemId(int i) { return image.get(i); } @Override public View getView(int i, View view, ViewGroup viewGroup) { if(view == null) { view = layoutInflater.inflate(R.layout.custom_menu, null); holder = new ViewHolder(); holder.image = (ImageView) view.findViewById(R.id.image_main_menu); view.setTag(holder); } else { holder = (ViewHolder)view.getTag(); } holder.image.setImageResource(image.get(i)); return view; } private class ViewHolder { public ImageView image; } } |
มาที่ไฟล์ MainActivity.java จะพบเส้นสีแดงอยู่
ตอนเรียกใช้ Adapter ก็ส่งรายการรูปภาพไปให้ด้วย ตามที่เราไปเขียนโค้ดมา
จะได้โค้ดดังนี้ค่ะ
1 2 3 4 |
//... MenuAdapter adapter = new MenuAdapter(getApplicationContext(), imageMenus); gridViewMenu.setAdapter(adapter); //.. |
ลอง Run ดูนะคะ
ได้รายการรูปภาพเมนูตามต้องการแล้ว
จะลองลด เพิ่ม ข้อมูลที่จำลองรับค่าจาก API ก็ได้นะคะ
ลอง Run แล้วตรวจสอบผลลัพธ์ดูค่ะ
ในตอนต่อไปเราจะไปจัดการกับเหตุการเมื่อมีการคลิกภาพเกิดขึ้น
แล้วให้ไปเปิดหน้าตามเมนูต่าง ๆ แล้วพบกันค่ะ
เรื่องที่เกี่ยวข้อง : >> Dynamic Menu
ตอนที่ 1 : ภาพรวมของระบบ (Overview)
ตอนที่ 2 : ออกแบบหน้าจอ
ตอนที่ 3 : สร้าง Adapter
ตอนที่ 4 : จำลองข้อมูลที่จะได้รับจาก API
ตอนที่ 5 : ตรวจสอบสถานะของเมนู
ตอนที่ 6 : จัดการกับรูปภาพ
ตอนที่ 7 : ส่งข้อมูลให้ Adapter
ตอนที่ 8 : จัดการกับเหตุการณ์ เมื่อรูปภาพถูกสัมผัส
ตอนที่ 9 : สรุป Project Dynamic Menus