با یکی دیگر از سری آموزش های قدم به قدم با مونو اندروید در خدمت شما هستیم در جلسات قبل با نحوه عناصر چینش خطی (Linear Layout) و چینش نسبی (Relative Layout) آشنا شدیم در ادامه با عنصر نمایش گروهی یا همون ViewGroup آشنا خواهیم شد.

آشنایی با Grid Layout

GridLayout یکی از زیر شاخه های نمایش درستی(ViewGroup) است که ویوها را دریک گرید دو بعدی نمایش می دهد. در تصویر زیر این مطلب کاملآ گویاست .

کار GridLayout نمایش عناصر بصورت سلسه مراتبی هست و زمانی که شما نیاز دارید فرزندانش را در فضای خاص یا همدن  Location مورد نظر قرار بدید باید از دو خصوصیت rows و columns استفاده کنید مثال زیر نحوه استفاده از GridLayout را نشان خواهد داد.

<?xml version="1.0" encoding="utf-8" ?>
<gridlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowcount="2" android:columncount="2">
    <textview android:text="Cell 0" android:textsize="14dip" />
    <textview android:text="Cell 1" android:textsize="14dip" />
    <textview android:text="Cell 2" android:textsize="14dip" />
    <textview android:text="Cell 3" android:textsize="14dip" />
</gridlayout>

اگر به کدهای بالا دقت کرده باشد این عنصر شامل ۲ سطر و ستون هستش و بنابر این فرزندانش رو بصورت سلسله مراتبی در این سطر و ستون جای خواهد داد به تصویر زیر دقت کنید

پس از اجرای برنامه خروجی زیر ظاهر خواهد شد

خصوصیت Orientation در Grid Layout

نکته ای که در مثال زیر وجود دارد استفاده از خصوصیت Orientation در نحوه چینش فرزندانش است

<gridlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowcount="2" android:columncount="2" android:orientation="vertical">
</gridlayout>

به تصویر زیر در نحوه چینش فرزندان دقت کنید

خروجی مثال زیر

تعیین موقیت فرزندان بصورت صریح

اگر شما نیاز دارید تا موقیت کنترل را بصورت صریح یا اجباری مشخص کنید نیاز است تا دو خصوصیت layout_row و layout_column را برای آن مقدار دهی نمایید در مثال زیر این کاز انجام گرفته است در صورتی که نیاز داشته باشید بین فرزندان فاصله ای ایجاد نمایید کافیست از خصوصیت layout_margin برای فرزندان استفاده نمایید در کد زیر این خصوصیت مقدار دهی شده است.

<?xml version="1.0" encoding="utf-8" ?>
<gridlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowcount="2" android:columncount="2">
    <textview android:text="Cell 0" android:textsize="14dip" android:layout_row="0" android:layout_column="0" />
    <textview android:text="Cell 1" android:textsize="14dip" android:layout_row="0" android:layout_column="1" />
    <textview android:text="Cell 2" android:textsize="14dip" android:layout_row="1" android:layout_column="0" />
    <textview android:text="Cell 3" android:textsize="14dip" android:layout_row="1" android:layout_column="1" />
</gridlayout>

در اندروید ۴ خصوصیت جدیدی برای ایجاد فاصله بین فرزندان GridLayout ایجاد شد و آن Space است و بسادگی شما میتواند از آن استفاده نمایید . اگر نیاز داشتید تا تعداد ردیف ها را بطور شرطی مقدار دهی کنید از خصوصیت rowcount استفاده نمایید  که این کار در مثال زیر انجام گرفته و  تعداد ردیف ها به عدد ۳ مقدار دهی شده  و  بین کنترل های  TextViews از Space استفاده شده است .

<?xml version="1.0" encoding="utf-8" ?>
<gridlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowcount="3" android:columncount="2" android:orientation="vertical">
    <textview android:text="Cell 0" android:textsize="14dip" android:layout_row="0" android:layout_column="0" />
    <textview android:text="Cell 1" android:textsize="14dip" android:layout_row="0" android:layout_column="1" />
    <space android:layout_row="1" android:layout_column="0" android:layout_width="50dp" android:layout_height="50dp" />
    <textview android:text="Cell 2" android:textsize="14dip" android:layout_row="2" android:layout_column="0" />
    <textview android:text="Cell 3" android:textsize="14dip" android:layout_row="2" android:layout_column="1" />
</gridlayout>

لیست دیگر خصوصیات GridLayout

1. rowCount : مشخص کننده تعداد ردیفه ها در GridLayout .
2. columnCount : مشخص کننده تعداد ستونها در GridLayout .
3. layout_row : موقعیت ردیف ویو را GridLayout مشخص می کند.
4. layout_column :موقعیت ستون ویو را در GridLayout  مشخص می کند.

مزیت استفاده از Space این است که دیگه شما نیازی ندارید که برای هر کنترل خصوصیت فاصله را مقدار دهی نمایید

خصوصیت RowSpan و ColumnSpan در GridLayout

همانطور که انتظار میرود در هر سیستم سلولی یا گریدی مثل GridLayout گزینه ای برای مشخص کردن طول (span) هر سلول وجود داردکه با دو خصوصیت امکان پیاده سازی آن وجود دارد و این دو خصوصیت در زیر آمده است

• android:rowSpan : به اندازه تعداد ردیف های سلول گرید تغییر خواهد کرد
• android:columnSpan : به اندازه تعداد ستون های سلول گرید تغییر خواهد کرد

به مثال زیر توجه کنید

<?xml version="1.0" encoding="utf-8" ?>
<gridlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowcount="4" android:columncount="2" android:orientation="vertical">
    <textview android:text="Cell 0" android:textsize="14dip" android:layout_row="0" android:layout_column="0" />
    <textview android:text="Cell 1" android:textsize="14dip" android:layout_row="0" android:layout_column="1" />
    <space android:layout_row="1" android:layout_column="0" android:layout_width="50dp" android:layout_height="50dp" />
    <textview android:text="Cell 2" android:textsize="14dip" android:layout_row="2" android:layout_column="0" />
    <textview android:text="Cell 3" android:textsize="14dip" android:layout_row="2" android:layout_column="1" />
    <button android:id="@+id/myButton" android:text="@string/hello" android:layout_row="3" android:layout_column="0" />
</gridlayout>

در مثال زیر طول ستون اول بر اساس مقدار طول دکمه تغییر کرده و شاید شما نخواهید همچین اتفاقی رخ دهد اگر نخواهیم سایز این دکمه که از طول ستون اول گرید بزرگتر است باعث تغییر سایز کل این ستون شود کافیست مقدار columnSpan را برابر مقدار ستونی میخواهیم شود می گزاریم به کد زیر توجه کنید

<button android:id="@+id/myButton" android:text="@string/hello" android:layout_row="3" android:layout_column="0" android:layout_columnspan="2" />

و در اجرا

مثال زیر یک مثال کاملی از GridLayout است

<?xml version="1.0" encoding="utf-8" ?>
<gridlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowcount="3" android:columncount="3">
    <textview android:text="Cell 0,0" android:layout_row="0" android:layout_column="0" android:layout_margin="10dp" />
    <textview android:text="Cell 0,1" android:layout_row="0" android:layout_column="1" android:layout_margin="10dp" />
    <textview android:text="Cell 0,2" android:layout_row="0" android:layout_column="2" android:layout_margin="10dp" />
    <textview android:text="Cell 1,0 and Cell 2,0" android:background="#a30000" android:layout_height="50dp" android:layout_row="1" android:layout_column="0" android:layout_rowspan="2" android:layout_margin="10dp" />
    <textview android:text="Cell 1,1 and Cell 1,2" android:background="#00a313" android:layout_row="1" android:layout_column="1" android:layout_columnspan="2" android:layout_margin="10dp" />
    <textview android:text="Cell 2,1" android:layout_row="2" android:layout_column="1" android:layout_margin="10dp" />
    <textview android:text="Cell 2,2" android:layout_row="2" android:layout_column="2" android:layout_margin="10dp" />
</gridlayout>

25 پست

محمدزاده

سابقه 10 ساله برنامه نویسی مایکروسافت شامل C# , WPF , ASP.Net , Asp.Net Mvc و چند سال اندروید کار کردم تا اینکه زامارین دست به کار شد الان 3 ساله برنامه های اندرویدم رو با ویژوال استادیو مینویسم و لذت میبرم و دوست دارم این لذت رو با دیگران شریک باشم