gridview

আজকের পর্বে আমরা দেখবো কিভাবে GridView নিয়ে কাজ করতে হয় । GridView দেখতে লিস্টভিউ এর মত কিন্তু একটু ডায়নামিক । পাশপাশি এবং উপর নিচ ২ ভাবেই সেট হয়ে থাকে । যেমন আমাদের ফটো গ্যালারি -

এখন আমরা যদি এমন একটি লিস্টভিউ তৈরি করতে চাই সেক্ষেত্রে GridView ইউজ করতে হবে । তো চলুন শুরু করা যাক ।

প্রথমেই আমরা লেআউট ডিজাইন টা করে ফেলি ।

activity_main.xml  -

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout  
   xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   tools:context="com.example.user.gridview.MainActivity">  
   <GridView  
     android:id="@+id/gridView"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:numColumns="3"  
     android:listSelector="@color/colorPrimary">  
   </GridView>  
 </LinearLayout>  

লিনিয়ার লেআউট এর ভিতর GridView এর ভিউ নিলাম । এর ভিতর  numColumns এর মাধ্যমে পাশাপাশি কতটি লিস্টভিউ হবে তা নির্ধারণ করে দিলাম । আপনি যদি চান row কতটি হবে তাও সিলেক্ট করে দিতে তবে rowCount ট্যাগটি ইউজ করবেন । listSelector  এর মাধ্যমে যে ভিউটি সিলেক্ট করবো সেটির ব্যাকগ্রাউন্ড কোন কালার এর হবে তা নির্ধারণ করে দিলাম ।

যে ডায়নামিক লিস্টভিউটি আমরা দেখাবো তার প্রতিটি ভিউ দেখতে কি রকম হবে তা নির্ধারণ করার জন্য নতুন একটি লেআউট রিসোর্স ফাইল খুললাম । আপনারা নিশ্চয়ই জানেন কিভাবে লেআউট রিসোর্স ফাইল খুলতে হয় । নাম দিলাম  image ।

image.xml -

 <?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"  
   >  
   <ImageView  
     android:id="@+id/imageView"  
     android:layout_width="match_parent"  
     android:layout_height="120dp"  
     android:scaleType="fitXY"  
     android:padding="5dp"/>  
 </LinearLayout>  

ভিউগুলো পাশাপাশি ৩ ভাগে বিভক্ত হবে তা numColumns এর মাধ্যমে আমরা আগেই বলে দিয়েছি তাই width = match_parent ই রাখলাম । আর height কত হবে সেটি আমরাই নির্ধারণ করে দিবো । আমি 100dp দিয়ে দিলাম । প্রতি ভিউয়ের জন্য 5dp padding ও দিয়ে দিলাম ।

এবার MainActivity..java -

 package com.example.user.gridview;  
 import android.support.v7.app.AppCompatActivity;  
 import android.os.Bundle;  
 import android.widget.GridView;  
 public class MainActivity extends AppCompatActivity {  
   GridView gridView;  
   int[] picture = {R.drawable.facebook,R.drawable.googleplus,R.drawable.instagram,R.drawable.line,R.drawable.linkedin,  
       R.drawable.pinterest, R.drawable.rss,R.drawable.skype,R.drawable.telegram,R.drawable.viber,R.drawable.vk,  
       R.drawable.whatsapp, R.drawable.youtube};  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     gridView = findViewById(R.id.gridView);  
     CustomerAdapter adapter = new CustomerAdapter(this,picture);  
     gridView.setAdapter(adapter);  
   }  
 }  

ListView এর মতই প্রথমে GridView এর অব্জেক্ট তৈরি করলাম । এর পর একটি Integer অ্যারের ভিতর সকল পিকচার গুলা নিলাম ।

onCreate এর ভিতরে  GridView লেআউট এর আইডির সাথে সংযোগ দিলাম । এরপর CustomerAdapter নামে একটি জাভা ক্লাস তৈরি করলাম যেটির ভিতরে কনটেক্সট ও পিকচারগুলো পাঠিয়ে দিলাম । ওই ক্লাসের ভিতরে গিয়ে এক একটি ভিউ তৈরি করে এখানে নিয়ে আসবে এবং setAdapter এর মাধ্যমে ভিউগুলো সেট হয়ে যাবে ।

CustomerAdapter .java -

 package com.example.user.gridview;  
 import android.content.Context;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.ViewGroup;  
 import android.widget.BaseAdapter;  
 import android.widget.ImageView;  
 public class CustomerAdapter extends BaseAdapter {  
   int[] picture;  
   Context context;  
   LayoutInflater inflater;  
   public CustomerAdapter(Context context, int[] picture){  
     this.context = context;  
     this.picture = picture;  
   }  
   @Override  
   public int getCount() {  
     return picture.length;  
   }  
   @Override  
   public Object getItem(int i) {  
     return null;  
   }  
   @Override  
   public long getItemId(int i) {  
     return 0;  
   }  
   @Override  
   public View getView(int i, View view, ViewGroup viewGroup) {  
       inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
       view= inflater.inflate(R.layout.image,viewGroup,false);  
     ImageView imageView = view.findViewById(R.id.imageView);  
     imageView.setImageResource(picture[i]);  
     return view;  
   }  
 }  

CustomerAdapter এ extends করলাম BaseAdapter ।  BaseAdapter হল ArrayAdapter এর মত । ArrayAdapter এ আমরা এক বা একাধিক ভ্যালু নিয়ে কাজ করেছি আগে । তবে একাধিক ভ্যালু নিয়ে লিস্ট তৈরি করতে BaseAdapter আরো বেশী সুবিধা দেয় । বলা যায় ArrayAdapter এর আপডেট হলো BaseAdapter । BaseAdapter এর ভিতর ৪ টি ম্যাথড থাকে যেগুলো ইমপ্লিমেন্ট করতে হয় । সেই ম্যাথড গুলো আমরা ইমপ্লিমেন্ট করে নিলাম ।

সেই সাথে MainActivity তে CustomerAdapter এর অব্জেক্ট তৈরি করে যে ভ্যালু দুইটা দিয়েছিলাম সেই ভ্যালুগুলো রিসিভ করার জন্য এখানে কন্সট্রাক্টর তৈরি করলাম । কন্সট্রাক্টর এর মাধ্যমে ভ্যালু গুলো রিসিভ হবে কিন্তু সেগুলো তো কোথাও রাখতে হবে । তাই picture এবং context নামে দুইটা ভ্যারিয়েবল নিলাম যেখানে ভ্যালুগুলো সেট করে দিয়েছি ।

এছাড়াও যে ক্লাসের হেল্প নিতে হবে সেটি হল LayoutInflater । আমরা যখন কোন ভিউ এর ভিতর আরেকটি ভিউ সেট করতে যাবো তখন LayoutInflater এর প্রয়োজন হয় । তাই LayoutInflater এর একটি অব্জেক্ট তৈরি করলাম ।

BaseAdapter এর যে ৪টি ম্যাথড সেগুলো বর্ণনা করা যাক -

getCount() ম্যাথডের ভিতরে অবশ্যই কতটি ভিউ তৈরি হবে তা বলে দিতে হবে । যে কয়টি পিকচার আছে তত সংখ্যক ভিউ তৈরি হবে তাই picture.length দিয়ে দিলাম ।

এরপর getItem এবং getItemId তে আপাতত কোন কাজ নেই ।

এরপর getView টা হল সবচেয়ে গুরুত্তপূর্ণ কারন এখানে আমরা ভিউগুলো তৈরি করবো । BaseAdapter এ LayoutInflater ব্যাবহার করার জন্য অনুমতি নিতে হয় । getView এর ভিতর প্রথম লাইন দ্বারা আমরা সেই অনুমতি নিলাম । ২য় লাইনে যে ভিউটা তৈরি করেছিলাম অন্য একটি লেআউট ফাইল দ্বারা সেই ভিউটা বসালাম View ক্লাসের অব্জেক্ট view এর ভিতরে । এবার এই view এর ভিতরে image.xml এ থাকা সকল ভিউগুলো চলে আসছে । যেহেতু এখানে শুধুমাত্র একটি ভিউ মানে  image.xml এর ভিতর শুধুমাত্র ইমেজভিউ আছে, তাই ImageView এর একটি অব্জেক্ট তৈরি করে view এর ভিতরের সেই ভিউটি খুজে নিলাম । এরপর সেই ভিউয়ের ভিতর ইমেজগুলো এক এক করে সিরিয়াল অনুযায়ী বসিয়ে দিলাম । সিরিয়াল ম্যাইন্টেইন করা হইছে  i  নামক ভ্যারিয়েবল টির দ্বারা । এরপরে সেই ভিউটাকে আমরা  MainActicvity তে পাঠিয়ে দিলাম ।

এভাবে একটি একটি করে ভিউ তৈরি হবে এবং সেখান থেকে ভিউটি GridView এর ভিতরে যেয়ে অবস্থান নিবে ।

আমাদের এবারের প্রোজেক্ট এ যে রকম ভিউ তৈরি হল -

ধন্যবাদ সবাইকে 😊😊😊