صفحه بندی TableLayout

به نام خدا

در آموزش طراحی رابط کاربری به معرفی دو نوع ViewGroup با نام های RelativeLayout و LinearLayout پرداختیم. در این مقاله TableLayout را بررسی می کنیم.

صفحه بندی TableLayout

اگر با زبان طراحی صفحات وب Html آشنایی داشته باشید، مبحثی با عنوان Table وجود دارد که عناصر مدنظر طراح را به صورت افقی و عمودی در سطرها و ستون های مختلف در کنار یکدیگر قرار می دهد. در اندروید نیز مشابه جدول بندی در صفحات وب عمل می کنیم.مطابق آنچه قبلا توضیح دادیم، اندروید استودیو را باز نموده و در پوشه layout یک TableLayout با نام دلخواه می سازیم.

صفحه بندی TableLayout

که پس از تایید، تگ TableLayout با دو ویژگی layout_width و layout_height ایجاد می شود. اینکه اندروید استودیو به صورت پیش فرض این دو ویژگی را اضافه می کند نشان از اهمیت وجود این موارد می باشد. همیشه باید عرض و ارتفاع لایه مشخص باشد.

صفحه بندی TableLayout

جدول از سطر (Row) و ستون (Column) تشکیل شده است. در اندروید سطرها توسط تگ باز و بسته

<TableRow>

</TableRow>

تعریف می شوند. ستون ها داخل سطرها قرار گرفته و توسط خود اندروید به ترتیب در کنار یکدیگر قرار می گیرند. برای مثال می خواهیم سه Button را در یک سطر در کنار یکدیگر به صورت افقی قرار دهیم. یک TableRow ساخته و عرض و ارتفاع را تعیین می کنیم :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:layout_width="match_parent" 
	android:layout_height="match_parent">

    <TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

    </TableRow>

</TableLayout>

سپس سه دکمه داخل TableRow تعریف می کنیم :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:layout_width="match_parent" 
	android:layout_height="match_parent">

    <TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

        <Button 
		android:text="Button One" />

        <Button 
		android:text="Button Two" />

        <Button 
		android:text="Button Three" />
        
    </TableRow>

</TableLayout>

مشاهده می کنیم که سه دکمه در سه ستون و به صورت افقی در کنار یکدیگر قرار گرفته اند :

TableRow

بر خلاف Html در اندروید نیاز به تعریف ستون ها نیست بلکه هر عنصر به عنوان یک ستون درنظر گرفته می شود.حالا ما سه ستون داریم. ستون ها به ترتیب قرار گیری دارای شماره هستند که مقداردهی از عدد صفر شروع می شود. در مثال بالا، دکمه اول دارای مقدار ۰ ، دکمه دوم مقدار ۱ و دکمه سوم مقدار ۲ را به خود اختصاص داده اند.این مقداردهی کاربردهایی دارد.فرض کنیم می خواهیم در سطر بعدی، دو دکمه داشته باشیم که دکمه اول به اندازه یک ستون از ابتدای صفحه فاصله داشته باشد. این خاصیت با ویژگی layout_column تعریف می شود. وقتی برای دکمه اول، مقدار layout_column را برابر با عدد ۱ قرار دهیم به این معنی است که باید در ستون دوم قرار گیرد :

<!-- Column One -->
<TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

	<Button 
		android:text="Button One" />

	<Button 
		android:text="Button Two" />

	<Button 
		android:text="Button Three" />

</TableRow>

<!-- Column Two -->
<TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

    	<Button 
		android:text="Button One" 
		android:layout_column="1" />

    	<Button 
		android:text="Button Two" />

</TableRow>

TableRow columns

دکمه Button One سطر دوم در زیر Button Two سطر اول قرار گرفته و اگر مجدد مقدار ۲ را قرار دهیم، در زیر دکمه Button Three سطر اول قرار خواهد گرفت.
ویژگی دیگری داریم تحت عنوان layout_span که به واسطه آن میزان پوشش یک عنصر را به نسبت ستون ها مشخص می کند. می خواهیم در مثال بالا، به جای آنکه دکمه اول ستون دوم از ابتدای صفحه به اندازه یک ستون فاصله بگیرد، به اندازه دو ستون فضا اشغال کند. بنابراین مقدار ۲ را برای این ویژگی درنظر می گیریم (این عدد تعداد ستون را تعیین می کند و با شماره ستون ها متفاوت است).

<!-- Column One -->
<TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

	<Button 
		android:text="Button One" />

	<Button 
		android:text="Button Two" />

	<Button 
		android:text="Button Three" />

</TableRow>

<!-- Column Two -->
<TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

    	<Button 
		android:text="Button One" 
		android:layout_span="2" />

    	<Button 
		android:text="Button Two" />

</TableRow>

TableRow span

اگر دقت کنید در انتهای سمت راست صفحه، فضای خالی مشاهده می شود.علت این است که سه دکمه ما نتوانسته تمام عرض صفحه را پوشش دهد. برای اینکه عناصر تمام عرض صفحه را پوشش دهند، از ویژگی stretchColumns در TableLayout استفاده می کنیم. اگر مقدار این ویژگی برابر “*” قرار گیرد، تمامی ستون ها به یک اندازه کشیده می شوند تا فضای خالی از بین برود و اگر مقدار را برابر شماره هر یک از ستون ها قرار دهیم، فقط همان ستون به نحوی از دو طرف کشیده می شود تا فضای خالی از بین برود :
حالت اول :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:layout_width="match_parent" 
	android:layout_height="match_parent" 
	android:stretchColumns="*">

    <!-- Column One -->
    <TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

	<Button 
		android:text="Button One" />

	<Button 
		android:text="Button Two" />

	<Button 
		android:text="Button Three" />

    </TableRow>

    <!-- Column Two -->
    <TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

        <Button 
		android:text="Button One" 
		android:layout_span="2" />

        <Button 
		android:text="Button Two" />

    </TableRow>


</TableLayout>

خروجی :

TableRow stretch

مشاهده می کنیم همه عناصر به نحوه فضا را اشغال کردند که فضای خالی باقی نماند.
در حالت دوم مقدار صفر یعنی ستون اول را به stretchColumns می دهیم :

android:stretchColumns="0"

TableRow stretch

فقط ستون اول (Button One) فضای خالی را از بین برد و اندازه سایر ستون ها دست نخورده باقی ماند. اگر هم بخواهیم این ویژگی به عنوان مثال برای ستون های اول و سوم اعمال شود، مقدار دو ستون را به این صورت در ویژگی قرار می دهیم :

android:stretchColumns="0,2">

توسط ویژگی collapseColumns نیز می توان ستون یا ستون هایی را از دید کاربر مخفی نمود :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:layout_width="match_parent" 
	android:layout_height="match_parent" 
	android:stretchColumns="0,2" android:collapseColumns="0">

    <!-- Column One -->
    <TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

	<Button 
		android:text="Button One" />

	<Button 
		android:text="Button Two" />

	<Button 
		android:text="Button Three" />

    </TableRow>

    <!-- Column Two -->
    <TableRow 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content">

        <Button 
		android:text="Button One" 
		android:layout_span="2" />

        <Button 
		android:text="Button Two" />

    </TableRow>

</TableLayout>

TableRow Collapse

با قرار دادن مقدار صفر برای این ویژگی، ستون یک که شامل دکمه های Button One بود از دید کاربر حذف گردید.

دانلود فایل این آموزش با فرمت PDF
تعداد صفحات : ۱۲
حجم : ۷۰۰ کیلوبایت
قیمت : رایگان
دانلود رایگان با حجم ۷۰۰ کیلوبایت لینک کمکی
برچسب ها :
این مطلب چقدر برایتان مفید بود؟ لطفا امتیاز دهید
4.5/5 - (6 امتیاز)
پرسش‌ها و دیدگاه‌های کاربران
دوره آموزش برنامه نویسی اندروید
دوره آموزش برنامه نویسی اندروید

با دریافت این دوره به تمامی آموزش‌های غیر رایگان و رایگان موجود در وب سایت دسترسی دارید که تخفیفی برای آموزش‌های غیر رایگان نیز درنظر گرفته شده. این پکیج به دو صورت دانلودی و ارسال پستی ارائه می‌گردد.
آموزش‌های اندروید استودیو در دو دسته «پایه» و «تکمیلی» منتشر می‌شوند.
آموزش‌های پایه شامل مباحث اصلی و ضروری و آموزش‌های تکمیلی مطالبی است که می‌بایست در کنار مطالب اصلی بررسی شود.
با خرید این دوره، به تمامی آموزش‌های غیر رایگانی که در آینده منتشر می‌شود نیز به صورت رایگان دسترسی خواهید داشت!

یک دیدگاه بنویسید

پرسش‌های زیر تایید و پاسخ داده نـــخواهند شد:
۱: جزء موارد مطرح شده در صفحات مشکلات و پرسش‌های رایج و بروزرسانی‌های محتوای آموزشی باشد
۲: سوال قبلا توسط کاربران در دیدگاه‌ها مطرح و پاسخ داده شده باشد
۳: پرسش خارج از مبحث آموزشی موجود در این صفحه باشد