android - GridView

โดยปกติของการสร้าง Gridview เราจะทำตามลำดับดังนี้

- สร้าง Array ที่เป็นเนื้อหาให้ภายใน Gridview แต่ละช่อง
- นำ Array ที่ได้มาใส่ใน ArrayAdapter จะได้ adapter
- นำ adapter ที่ได้มา setAdapter ให้ GridView


String[] array = new String[] {"1","2", "3", "4"};
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, array);
     
GridView gridview = (GridView)findViewById(R.id.gridView);
gridview.setAdapter(adapter);

แค่นี้เราก็จะได้ Gridview ดังภาพด้านล่าง

แล้วเราจะรู้ได้อย่างไรว่า ผู้ใช้งาน คลิกที่ Position ไหนของ gridview ?

ก็ต้องทำการกำหนด setOnItemClickListener ให้ Gridview ก่อนดังนี้

พิม gridview.setOnItemClickListener(new O
แค่นี้ Android Studio ก็จะมีตัวเลือกขึ้นมา ให้เราเลือกที่ setOnItemClickListener ตามภาพ

แค่นี้ก็จะได้เมธอท onItemClick ขึ้นมาโดยอัตโนมัติ

โดยตัวแปรที่จะระบุได้ว่า ผู้ใช้คลิกที่กล่องไหนของ GridView ก็คือ  "position"

โดยเราจะใช้ใช้ Toast ให้เด้ง Popup แสดงเป็น Position ที่ถูกคลิกดังนี้
Toast.makeText(MainActivity.this, String.valueOf(position), Toast.LENGTH_LONG).show();

เมื่อคลิกที่ Item บน Gridview ก็จะได้ผลลัพธ์ดังภาพ

แค่นี้ก็ตรวจสอบได้แล้วว่าผู้ใช้คลิกที่ปุ่มใด  โดย Position จะมีค่าเริ่มต้นที่ 0 ดังภาพ
ต่อไปนักพัฒนาก็พอจะนำ position ไป switch() ได้ว่า ถ้าเป็น position นี้ให้ทำอะไรๆ ต่อไป..



โดยปกติของการสร้าง Gridview เราจะทำตามลำดับดังนี้

- สร้าง Array ที่เป็นเนื้อหาให้ภายใน Gridview แต่ละช่อง
- นำ Array ที่ได้มาใส่ใน ArrayAdapter จะได้ adapter
- นำ adapter ที่ได้มา setAdapter ให้ GridView

ซึ่ง Gridview โดยตามวิธีด้านบนนี้จะไม่สามารถแสดงรูปภาพ หรือ Textview ได้


ตัวอย่างการสร้าง GridView โดยใช้ CustomAdapter 
เพื่อให้เป็นรูปแบบที่เราต้องการเช่นใส่ Image and Text

การ SetAdapter ให้ GridView แบบ Customโดยการใส่ new CustomAdapter() ดังนี้
gridview.setAdapter(new CustomAdapter());


ต่อไปมาดูโค้ดของคลาส CustomAdapter กันครับ

public class GridviewCustom extends BaseAdapter {

String[] topics = new String[]{"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"}; 

int[] images = new int[]{R.drawable.img0, R.drawable.img1, R.drawable.img2, R.drawable.img3, 

                                       R.drawable.img4, R.drawable.img5, R.drawable.img6, R.drawable.img7, 

                                       R.drawable.img8, R.drawable.img9};

    Context icontext;    LayoutInflater inflater;
    public GridviewCustom(Context context) {
        icontext = context;        

        inflater = LayoutInflater.from(icontext);    

    }


    @Override    

    public int getCount() {
        return 10;    

    }

    @Override    

    public Object getItem(int position) {
        return null;    

    }

    @Override    

    public long getItemId(int position) {
        return 0;    

    }

    @Override    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;        

        if (convertView == null) {
            convertView = inflater.inflate(R.layout.gridview_main, null);            

            holder = new ViewHolder();            

            holder.imageView = (ImageView) convertView.findViewById(R.id.imageView);            

            holder.topic = (TextView) convertView.findViewById(R.id.txt_topic);            

            convertView.setTag(holder);        

         } else {
            holder = (ViewHolder) convertView.getTag();        

         }

        holder.topic.setText(topics[position]);        

        holder.imageView.setImageResource(images[position]);
        return convertView;    

    }


    private class ViewHolder {
        TextView topic;        

        ImageView imageView;    

    }

}