table layout

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

আরেকটি ব্যাপার শুরুতেই বলে রাখি , টেবিল লেয়াউট এর ক্ষেত্রে -

১ - Table Layout এর ভিতরে কোন ভিউয়ের জন্যই layout_width এবং layout_height দেয়ার দরকার নেই । কেননা বাই ডিফল্ট width = match_parent এবং height = wrap_content ।
২ -  TableRow এর কোন ভিউয়ের জন্য layout_width এবং layout_height দেয়ার দরকার নেই কারন এগুলো Table Layout দ্বারা অটোমেটিক ক্যাল্কুলেট হয় । যে row তে সবচেয়ে বেশী আইটেম থাকে ওই অনুসারে বাকি  row গুলোও column তৈরি করে ।

activity_main.xml -

 <?xml version="1.0" encoding="utf-8"?>  
 <TableLayout  
   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"  
   android:shrinkColumns="1"  
   android:stretchColumns="1"  
   tools:context=".MainActivity">  
   <TableRow  
     android:id="@+id/firstRow">  
     <TextView  
       android:text="Name"  
       android:textSize="20sp"  
       android:textStyle="bold"  
       android:padding="7dp"  
       android:layout_height="40dp"  
       android:background="@android:color/holo_orange_dark"  
       android:gravity="center"/>  
   </TableRow>  
 </TableLayout>  

TableLayout ট্যাগের ভিতরে সর্বদা shrinkColumns ও stretchColumns এর মান ১ দিয়ে রাখবো, এটি আমাদের প্যারেন্ট লেয়াউট এর ফুল width জুড়ে column বসাতে সাহায্য করে ।

এরপর আমরা আগেই জেনে আসছি টেবিল লেয়াউট এর ক্ষেত্রে কোন column তৈরি করতে হবে নাহ । তাই row তৈরির জন্য TableRow ট্যাগ নিলাম । আমরা আগে এটাও জেনে আসছি যে TableLayout এর কোন ভিউয়ের জন্য layout_width এবং layout_height দেয়ার দরকার নেই । তাই এটা নিয়ে জাভা ক্লাসে কাজের জন্য শুধু আইডি দিয়ে রাখলাম।

এখন TableRow ট্যাগের ভিতরে আমরা ভিউ নিবো । আমি একটি টেক্সভিউ নিলাম । এই সকল ভিউগুলোরও  layout_width এবং layout_height দেয়ার দরকার নেই । আমার ইচ্ছামত ভিউটি ডিজাইন করলাম । একইভাবে TableRow ট্যাগের ভিতরে আরো ২টি ভিউ নিলাম । একটি নাম দিলাম Email অন্যটি PhoneNumber ।

এরপর অন্য আরেকটি TableRow নিয়ে সেখানেও TextView নিয়ে ডাটাগুলো এড করে দিলাম । আমি এখানে ডাটার ১টি Row এড করলাম । আপনারা আপনাদের ইচ্ছেমত যত খুশি এড করে নিবেন ।

শেষে আমরা আরেকটি Row তে শুধুমাত্র একটি ভিউ (বাটন) ইউজ করেছি । মনে রাখবেন আমাদের column নাম্বার শুরু হবে ০ থেকে । বাটন ভিউতে layout_column এর সাহায্যে আমরা নির্দেশনা দিয়ে দিলাম সেটি কত নাম্বার column এ গিয়ে বসবে ।

এবার এপটি রান করুন 😊😊😊

activity_main.xml এর ফুল কোড -

 <?xml version="1.0" encoding="utf-8"?>  
 <TableLayout  
   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"  
   android:shrinkColumns="1"  
   android:stretchColumns="1"  
   tools:context=".MainActivity">  
   <TableRow  
     android:id="@+id/firstRow">  
     <TextView  
       android:text="Name"  
       android:textSize="20sp"  
       android:textStyle="bold"  
       android:padding="7dp"  
       android:layout_height="40dp"  
       android:background="@android:color/holo_orange_dark"  
       android:gravity="center"/>  
     <TextView  
       android:text="Email"  
       android:textSize="20sp"  
       android:textStyle="bold"  
       android:padding="7dp"  
       android:layout_height="40dp"  
       android:background="@android:color/holo_green_light"  
       android:gravity="center"/>  
     <TextView  
       android:text="Phone Number"  
       android:textSize="20sp"  
       android:textStyle="bold"  
       android:padding="7dp"  
       android:layout_height="40dp"  
       android:background="@android:color/holo_red_light"  
       android:gravity="center"/>  
   </TableRow>  
   <TableRow  
     android:id="@+id/secondRow"  
     android:background="@android:color/holo_orange_light">  
     <TextView  
       android:text="Mashiur"  
       android:textSize="15sp"  
       android:padding="5dp"  
       android:layout_height="40dp"  
       android:gravity="center"/>  
     <TextView  
       android:text="rmashiur15"  
       android:textSize="15sp"  
       android:padding="5dp"  
       android:layout_height="40dp"  
       android:gravity="center"/>  
     <TextView  
       android:text="0162482622"  
       android:textSize="15sp"  
       android:padding="5dp"  
       android:layout_height="40dp"  
       android:gravity="center"/>  
   </TableRow>  
   <TableRow  
     android:id="@+id/forthRow">  
     <Button  
       android:layout_column="1"  
       android:text="Done"  
       android:textAllCaps="false"  
       android:textSize="23sp"  
       android:background="@color/colorPrimary"  
       android:layout_margin="8dp"  
       android:textColor="@android:color/white"/>  
   </TableRow>  
 </TableLayout>