صفحه بندی 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 بود از دید کاربر حذف گردید.

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چگونه آموزش های اندروید استودیو را مطالعه کنم؟

مشکلات و پرسش های رایج

معرفی
با انتشار نسخه ۱ اندروید استودیو، گوگل، توسعه دهندگان را به مهاجرت از ایکلیپس به این محیط برنامه نویسی تشویق می کند.
با توجه به اینکه اکثر آموزشهای موجود (به خصوص آموزشهای فارسی) بر پایه محیط Eclipse هستند، تصمیم گرفتیم آموزشهای ویژه برنامه نویسی در محیط Android Studio را به زبان فارسی منتشر نماییم.
آموزشهای پایه در حال تکمیل بوده و در کنار آموزش پایه، مباحث تکمیلی به صورت رایگان منتشر خواهد شد.