ตอนที่ 7 : ส่งข้อมูลให้ Adapter

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

กลับมาที่ไฟล์ MenuAdapter.java ค่ะ
เราต้องรับข้อมูลรายการรูปภาพเพิ่มเติม

ที่ Constructor เรารับตัวแปรประเภท ArrayList ของ Integer เข้ามา
เราจะส่งข้อมูลรูปภาพมาทางนี้ค่ะ

ประกาศตัวแปรชนิดนี้เอาไว้ระดับคลาสนะคะ
เดี๋ยวต้องเอาไปใช้หลายที่

กำหนดค่าเริ่มต้นให้เรียบร้อยค่ะ
จะได้ดังนี้

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);
    }

//....

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 แทน

 @Override
    public int getCount() {
        return image.size();
    }

@Override

public int getCount() {

return image.size();

}

ต่อไปเราต้องทำอะไร จำได้มั้ยคะ ?
เรายังไม่มี Holder ค่ะ 🙂

สร้าง คลาสภายใน ชื่อ ViewHolder ขึ้นมา
ประกาศตัวแปรจับคู่กับ layout เหมือนเดิมนะคะ
มีแค่ภาพเดียว ก็ประกาศไว้ตัวแปรเดียว

ที่จริง ViewHolder เราใช้แค่ในเมธอด getView() เมธอดเดียว
จะประกาศใช้งานในเมธอกก็ได้ค่ะ
แต่เราอยากเอาไว้ด้านบนมากกว่า
เวลาอ่านโค้ดจะได้รู้ว่า คลาสนี้ใช้ตัวแปรอะไรบ้าง
โดยไม่ต้องลงมาดูถึงในเมธอด
ตัดสินใจเองตามความต้องการนะคะ ไม่มีอะไรตายตัวอยู่แล้ว
แต่ต้องมีเหตุผลในการเขียนโค้ดลงไป

ขั้นตอนในเมธอด getView() ก็เหมือนเดิม
ตาม Project Custom View นะคะ
จะได้โค้ดทั้งหมดดังนี้

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;
    }
}

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 ก็ส่งรายการรูปภาพไปให้ด้วย ตามที่เราไปเขียนโค้ดมา
จะได้โค้ดดังนี้ค่ะ

//... 
MenuAdapter adapter = new MenuAdapter(getApplicationContext(), imageMenus);
gridViewMenu.setAdapter(adapter);
//..

//...

MenuAdapter adapter = new MenuAdapter(getApplicationContext(), imageMenus);

gridViewMenu.setAdapter(adapter);

//..

ลอง Run ดูนะคะ

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

ในตอนต่อไปเราจะไปจัดการกับเหตุการเมื่อมีการคลิกภาพเกิดขึ้น
แล้วให้ไปเปิดหน้าตามเมนูต่าง ๆ แล้วพบกันค่ะ

ธมนวรรณ มณีจันทร์

|:- เราเชื่อมั่นว่าการเสียสละและการแบ่งปันจะทำให้โลกใบนี้สวยงามมากขึ้น ทุกๆ จุดเริ่มต้นของการเรียนรู้ นำไปสู่การเรียนรู้ถัดไป เว็บไซต์แห่งนี้ขอเป็นส่วนหนึ่งของการแบ่งปันความรู้ที่ไม่มีที่สิ้นสุด มาร่วมกันผลักดันโลกของเราให้หมุนไปพร้อมกับพลังแห่งความรักด้วยกันนะคะ :) >>> |:- About Me! -:|

Share this:

Related

ธมนวรรณ มณีจันทร์