expandable listview

এই পর্বে আমরা দেখবো কিভাবে expandable listview তৈরি করা যায় । expandable listview হলো যখন কোন লিস্টভিউ এর কোন আইটেম এ ক্লিক করলে সেটি কিছু ডাটা দেখাবে কিংবা আরেকটি লিস্ট দেখাবে ।

এখানে আমরা একটি ডেমো প্রোজেক্ট দেখতে পাচ্ছি , চলুন একরকম একটি প্রোজেক্ট তৈরি করা যাক 😊

এখানে দেশের নামগুলোকে আমি প্যারেন্ট ডাটা ধরলাম , দেশ সম্পর্কে খানিক বিবরন কে চাইল্ড ডাটা । তো প্যারেন্ট ডাটা এবং চাইল্ড ডাটার জন্য আলাদা আলাদা লিস্ট তৈরি করতে হবে । তাদের আইটেম গুলোর জন্যও আমরা নিজেদের ইচ্ছামত লেআউট তৈরি করে দিবো ।

নতুন একটি প্রোজেক্ট খুললাম । এবার activity-main.xml এ expandable listview এর ভিউ তৈরি করবো ।
activity-main.xml -

 <?xml version="1.0" encoding="utf-8"?>  
 <android.support.constraint.ConstraintLayout   
   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.expandablelistview.MainActivity">  
   <ExpandableListView  
     android:id="@+id/expandableListview"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"></ExpandableListView>  
 </android.support.constraint.ConstraintLayout>  

শুধুমাত্র expandable listview এর ভিউ টা নিলাম । অন্য কোন কিছু দেখাবো নাহ এই লেআউট এ ।

এবার প্যারেন্ট ডাটা রাখার লেআউট ডিজাইন করার জন্য parentlayout নামে নতুন লেআউট রিসোর্স ফাইল খুললাম ।

parentlayout.xml -

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout   
   xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical" android:layout_width="match_parent"  
   android:layout_height="35dp"  
   android:background="@android:color/holo_green_dark">  
   <TextView  
     android:id="@+id/parentText"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:textSize="25sp"  
     android:text="Hello Mashiur"  
     android:gravity="center"  
     android:textStyle="bold"  
     android:textColor="@android:color/white"/>  
 </LinearLayout>  

parentlayout এ শুধুমাত্র একটি টেক্সভিউ থাকবে , যেটা দেখতে এরকম হবে -

ঠিক এভাবেই চাইল্ড লেআউট এর জন্যও childlayout নামে নতুন লেআউট রিসোর্স ফাইল খুললাম । এখানেও শুধু একটি টেক্সভিউ রাখবো ।

childlayout.xml -

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical" android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:background="@android:color/holo_green_light">  
   <TextView  
     android:id="@+id/childText"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:text="hjs sjsbsjnsjnksjbhs"  
     android:textSize="25sp"  
     android:padding="10dp"  
     android:textStyle="italic"/>  
 </LinearLayout>  

তো আমরা প্যারেন্ট এর ডাটাগুলো দেখানোর জন্য parentlayout এবং চাইল্ড এর ডাটাগুলো দেখানোর জন্য childlayout তৈরি করলাম । তো চলুন ডাটাগুলো নিয়ে আসা যাক । আমি উইকিপিডিয়া থেকে কিছু ডাটা সংগ্রহ করে strings.xml এ রাখলাম ।

strings.xml -

একটি string array তে দেশের নামগুলা এবং অন্য  string array তে সেই দেশ সম্পর্কে দু এক লাইন লিখে দিলাম । অ্যারে তে দেশের নাম অনুযায়ী বর্ণনা গুলা অবশ্যই সেই সিরিয়ালি লিখতে হবে ।

এবার MainActivity.java তে যাওয়া যাক ।

MainActivity.java -

 public class MainActivity extends AppCompatActivity {  
   ExpandableListView expandableListView;  
   ArrayList<String> parent_data;  
   HashMap<String,ArrayList<String>> child_data;  
   CustomAdapter customAdapter;  

প্রথমত expandable listview এর ইন্সট্যান্স তৈরি করলাম । এরপর প্যারেন্ট লিস্ট এর ডাটাগুলো রাখার জন্য একটি অ্যারেলিস্ট ডিক্লার করলাম । চাইল্ড এর ডাটাগুলো রাখার জন্য আরেকটি অ্যারে লিস্ট । তবে এখানে যেহেতু একটি প্যারেন্ট ডাটার ভিতরে চাইল্ড এর একটি ডাটা ক্রমানুযায়ী থাকবে তাই আমাদের HashMap ইউজ করতে হবে । HashMap জাভার প্রোপার্টি । কেউ HashMap সম্পর্কে নাম জানলে নেট ঘেটে জেনে নিন । HashMap এ কি-ভ্যালু পেয়ারে ডাটা রাখা হয় । চাইল্ড এর ডাটাগুলা যেহেতু প্যারেন্ট এর ডাটার ভিতরে থাকবে মানে এখানে প্যারেন্ট ডাটা কি হিসেবে থাকবে তাই HashMap এর মাধ্যমে প্যারেন্ট এর ডাটার সাথে চাইল্ড এর ডাটা গুলো এড করে আমরা লিস্টভিউ তৈরি করবো । এবং সর্বশেষ আমরা আগেই শিখে আসছি লেআউট এর সাথে ডাটার সংযোগ ঘটানোর জন্য আমরা এডাপ্টর ইউজ করবো । এখানে কাস্টম এডাপ্টর নামে একটি জাভা ক্লাস নিলাম যার মাধ্যমে আমরা ডাটাগুলো সেট করবো ।

   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     expandableListView = findViewById(R.id.expandableListview);  
     String[] country_names = getResources().getStringArray(R.array.country_names);  
     String[] country_details = getResources().getStringArray(R.array.country_details);  
     parent_data = new ArrayList<>();  
     child_data = new HashMap<>();  

রিসোর্স থেকে ডাটাগুলো নিয়ে এসে স্ট্রিং অ্যারে তে রাখলাম । ডায়রেক্ট অ্যারেলিস্টে ঢুকানো যায় নাহ । এরপর প্যারেন্ট ডাটার জন্য অ্যারেলিস্ট এবং চাইল্ড ডাটার জন্য হ্যাশম্যাপ তৈরি করলাম । আগে ইন্সট্যন্স তৈরি করেছিলাম এবার  new দ্বারা অব্জেক্ট তৈরি করে ফেললাম ।

এখন প্যারেন্ট এর ডাটাগুলো অ্যারেলিস্ট এ এবং চাইল্ড এর ডাটা গুলো হ্যাশম্যাপে ঢুকাতে হবে ।

     for(int i=0;i<country_names.length;i++){  
       parent_data.add(country_names[i]);  
       ArrayList<String> cdata = new ArrayList<>();  
       cdata.add(country_details[i]);  
       child_data.put(parent_data.get(i),cdata);  
     }  

ফরলুপ নিলাম যেটি যতগুলো দেশের নামা আছে তত বার ঘুরবে এবং প্রতিবার ঘুরার সময় একটি করে ডাটা country_names থেকে নিয়ে প্যারেন্ট ডাটায় এড করবে । তবে এখানে চাইল্ড ডাটা এড করাটা একটু ঝামেলার কাজ । এজন্য প্রথমে আমাদের আর একটি অ্যারেলিস্ট তৈরি করতে হবে ।

কারন হ্যাশম্যাপের ভিতর ডায়রেক্টলি ডাটা ঢুকানো যায় নাহ , পুট করতে হয় কি ভ্যালু আকারে । তাই নতুন একটি অ্যারেলিস্ট তৈরি করে সেই অ্যারেলিস্ট এর ভিতরে প্রথমে ডাটাগুলা নিয়ে নিলাম । এরপর হ্যাশম্যাপের নিয়ম অনুযায়ী পুট ম্যাথড ইউজ করার মাধ্যমে প্রতি প্যারেন্ট ডাটা কে Key ধরে একটি করে ডাটা হ্যাশম্যাপের ভিতরে ঢুকিয়ে দিলাম । মনে রাখতে হবে লুপের মান অনুযায়ী প্রতিবার ডাটা চেঞ্জ হয়ে নতুন ডাটা ঢুকবে ।

ডাটাও পেলাম ,ভিউও তৈরি করা শেষ এবার এডাপ্টর এর মাধ্যমে ডাটাগুলা লেআউট এ বসাবো ।

     customAdapter = new CustomAdapter(this,parent_data,child_data);  
     expandableListView.setAdapter(customAdapter);  

কাস্টম এডাপ্টর এর মধ্যে কন্সট্রাকটর হিসেবে কন্টেক্স প্যারেন্ট ডাটা, চাইল্ড ডাটা পাঠিয়ে দিলাম । একটি করে ডাটা ভিউ এর সাথে সেট হবে এবং রিটার্ন করবে , সেটি setAdapter এর মাধ্যমে সেট করে দিবো ।

আজকে এ পর্যন্তই থাক । আগামী পর্বে আমরা দেখবো কিভাবে কাস্টম এডাপ্টর এর মাধ্যমে ভিউগুলো সেট করবো ।