ListView + create layout ( Android Bangla Tutorial ) - 13

আমরা যদি আমাদের লিস্টভিউ এর জন্য আমাদের তৈরি লেআউট ব্যাবহার করতে চাই তাহলে তা কিভাবে করবো , সেটাই এই পর্বে দেখানো হবে -

প্রথমেই আমরা 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.cybertron.MainActivity"  
   android:orientation="vertical">  
   <ListView  
     android:id="@+id/list_view"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content">  
   </ListView>  
 </LinearLayout>  

এরপর লেআউট এর প্রতিটি লিস্ট আইটেম এর জন্য ডিজাইন করা যাক , এজন্য অন্য আরেকটি লেআউট ফাইল খুলতে হবে । অন্য আরেকটি লেআউট ফাইল খুলতে-
app -> res -> layout এ রাইট ক্লিক করুন । তারপর new -> Layout resource file এ ক্লিক করুন ।

 নতুন উইন্ডো তে প্রথমে ফাইল নাম দিন ( সবগুলো ছোট হাতের লিখতে হবে ) (আমি নাম দিলাম designfordata ), এরপর Root element এ শুধু LinearLayout লিখে দিন । আমরা LinearLayout  নিয়ে কাজ করবো । এরপর  OK প্রেস করুন । নতুন একটি লেআউট ফাইল খুলে গেল । প্রথমত আমরা নরমাল ডিজাইন দিয়ে শুরু করি । লেআউটের ডিজাইন টি হবে আমাদের ডাঁটাগুলো মাঝ বরাবর শুধু নাম দেখাবে ।

 <?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="60dp">  
   <TextView  
     android:id="@+id/list_view_name_item"  
     android:layout_width="match_parent"  
     android:layout_height="60dp"  
     android:textSize="30sp"  
     android:gravity="center"  
     android:textColor="@color/colorAccent"/>  
 </LinearLayout>  

এখানে আমরা 1 টা টেক্সভিউ নিলাম যেখানে নাম দেখাবে । অন্য ট্যাগগুলোর কাজ নিশ্চয়ই বুঝতে পারছেন ।
 রুট লেআউট এ height = 60dp নিলাম । আমরা চাই আমাদের প্রতিটি লেআউট এর height 60dp হবে , height ইচ্ছা করলে wrap_content ও রাখতে পারেন । এখন আমরা শুধু একটি ফন্ট নিয়ে কাজ করছি  যদি আমরা বিভিন্ন ফন্ট নিয়ে কাজ করি তখন কিন্তু প্রতিটি ফন্ট অনুযায়ী জায়গা নিবে , তাতে  ডিজাইন টা অসুন্দর হয়ে যেতে পারে ।
আবার যদি আমাদের ডাঁটার ভিতর কোন ডাটা যদি খুব বড় হয়ে যায় তখন যদি আমরা চাই পুরো ডাটা টা দেখাতে তখন কিন্তু সাইজ 60dp ঠিক করে দিলে ওই সাইজের ভিতর যতটুকু ডাটা দেখানো যায় ততটুকুই দেখাবে , আর wrap_content দিলে ওই ডাঁটার লেআউট সাইজ বড় হয়ে পুরো ডাটা ই দেখাবে । এটা তো গেল রুট লেআউট  এর সাইজ, এরপরে TextView এর ভিতরেও height = 60dp দিয়ে দিলাম । আপনি যদি চান আপনার বড় ডাঁটা দেখাতে তখন কিন্তু ২ জায়গা তে হাইটের সাইজ wrap_content দিতে হবে । আর যদি চান সাইজ ঠিক করে দিতে তাহলে রুট লেআউট এ  height = 60dp দিয়ে দিন । একটা ডাঁটা খুব বড় থাকবে আরেকটা ছোট থাকবে এমন কিন্তু সাধারণত হয় নাহ । সকল ডাটা সাইজ কিন্তু অনেকটা সমান-ই হয় । আপনার ডাটা যদি সবগুলো অনেক বড় থাকে তাহলে 60dp এর জায়গায় ডাঁটার সাইজ অনুযায়ী ইচ্ছামত _dp সেট করে নিন ।

আবার আমি রুট লেআউট এ height = 60dp রেখে TextView এর ভিতর height = wrap_content দিলাম , তাহলে কিন্তু ডাঁটা টা মাঝ বরাবর একটু উপরে দেখাবে কারন height = wrap_content হওয়ায় ফন্ট এর সাইজ অনুযায়ী ও মাঝে চলে আসলো । পুরো লেআউট এর মাঝ বরাবর কিন্তু আসলো নাহ । তাই ডাটা কে পুরো লেআউট এর মাঝ বরাবর নিয়ে আসতে TextView এর ভিতর height ও রুট লেআউট এড় সমান দিয়ে দিতে হবে 😊

এবার জাভাতে আসা যাক -

public class MainActivity extends AppCompatActivity {

    ListView listView;

    String[] names = {"Mashiur","Rahman","Sajib","Arif","Alaa","Dulal"};    

    ArrayAdapter<String> adapter;

   // এখানে MainActivity ক্লাসের ভিতরে প্রথমে লিস্টভিউ এর অব্জেক্ট তৈরি করলাম, , এরপর 

       আমরা যে ডাটা দেখাতে চাই সে ডাটা গুলো নিলাম এবং শেষে লিস্টভিউ 

       এর সাথে ডাটা এড করতে এডাপ্টর এর অব্জেক্ট তৈরি করলাম । 

 @Override
        protected void onCreate ( Bundle savedInstanceState){

                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);

               listview = (ListView)findViewById(R.id.list_view);
এতটুকু আসা করি বুঝতেই পারছেন কেননা আগের ব্লগ গুলো পড়ে আসলে নতুন করে বুঝার কিছু নাই 😊
               adapter = new ArrayAdapter<String>
                                       (this,R.layout.designfordata,R.id.list_view_name_item,names);

       //এখানে ২য় প্যারামিটারে আমাদের তৈরি লেআউট এর আইডি বসিয়ে দিলাম এবং 

        ৩য় প্যারামিটারে সেই টেক্সভিউ এর আইডি বসিয়ে দিলাম যেখানে ডাটাগুলো 

        বসবে, এখানে মোট প্যারামিটার হল ৪টি বাকি সবকিছুই আগের মতই 

                            listview.setAdapter(adapter);

       

       listview.setOnItemClickListener( new AdapterView.OnItemClickListener(){

        @Override
        public void onItemClick ( AdapterView<?> parent , View view , int position , long id) {
       

                         Toast.makeText(MainActivity.this, parent.getItemAtPosition(position)+"",
                                                                                                          Toast.LENGTH_SHORT).show();
                       }
          });

    }

}

তাহলে আমার ফুল কোড হল -

 package com.example.user.cybertron;  
 import ...
 public class MainActivity extends AppCompatActivity {  
   ListView listview;  
   String[] names = {"Mashiur","Rahman","Sajib","Arif","Alaa","Dulal"};  
   ArrayAdapter<String> adapter;  
   @Override  
   protected void onCreate ( Bundle savedInstanceState){  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     listview = (ListView)findViewById(R.id.list_view);  
     adapter = new ArrayAdapter<String>  
         (this,R.layout.designfordata,R.id.list_view_name_item,names);  
     listview.setAdapter(adapter);  
     listview.setOnItemClickListener( new AdapterView.OnItemClickListener(){  
       @Override  
       public void onItemClick ( AdapterView<?> parent , View view , int position , long id) {  
         Toast.makeText(MainActivity.this, parent.getItemAtPosition(position)+"",  
             Toast.LENGTH_SHORT).show();  
       }  
     });  
   }  
 }  

 এবার প্রোজেক্ট রান করুন 😊😊😊

আর একটা বিষয় দেখানো যাক 😊
এখন যদি আমরা চাই আমরা যে আইটেম এ ক্লিক করবো সেটির ব্যাকগ্রাউন্ড অন্য কালার হয়ে যাবে যাতে ইউজার এর বুঝতে সুবিধা হয় তবে -

এজন্য আমাদের একটি সিলেক্টর এর সাহায্য নিতে হবে  -
সিলেক্টর তৈরি করতে   res -> drawable এ রাইট ক্লিক করে New -> drawable resource file এ ক্লিক করুন। ফাইল নাম দিয়ে OK বাটনে চাপুন (আমি নাম দিলাম designforitem ) , এখন সিলেক্টর ট্যাগের ভিতর আইটেম ট্যাগ নিন-

এখানে  state_select = true মানে যখন আমরা কোন ডাটা সিলেক্ট করবো সেটার উপর পরিবর্তন ঘটাবে । আর তার কালার কি হবে সেটা drawable এর মাধ্যমে ডিফাইন করে দিলাম ।

এবার প্রতি লেআউট এর জন্য যে ডিজাইন করেছিলেন designfordata.xml এ সেখানে TextView এর background হিসেবে এই ফাইলের নাম বসিয়ে দিন

   <TextView  
     android:id="@+id/list_view_name_item"  
     android:layout_width="match_parent"  
     android:layout_height="60dp"  
     android:textSize="30sp"  
     android:gravity="center"  
     android:textColor="@color/colorAccent"  
     android:background="@drawable/designforitem"/>  

এবার আর একটি কাজ করতে হবে এক্টিভিটি ক্লাস অর্থাৎ জাভা ক্লাসে গিয়ে  onItemClickListener ম্যাথডের ভিতরে লিখে দিন view.setSelected(true);

     listview.setOnItemClickListener( new AdapterView.OnItemClickListener(){  
       @Override  
       public void onItemClick ( AdapterView<?> parent , View view , int position , long id) {  
         view.setSelected(true);  
         Toast.makeText(MainActivity.this, parent.getItemAtPosition(position)+"",  
             Toast.LENGTH_SHORT).show();  
       }  
     });  

কাজ শেষ , এবার রান করুন 😊