در فصل قیل با ویژگی های اساسی یک چیدمان خطی آشنا شدید. در این فصل می خواهیم با سایر ویژگی های مهم LinearLayout کار کنیم و در انتها یک صفحه برنامه واقعی را به کمک این چیدمان بسازیم.

۱- شروع کار:

یک برنامه اندروید به نام AdvancedLinearLayout بسازید. این برنامه یک اکتیویتی به نام MainActivity دارد که Layout آن با نام activity_main در شاخه layout از شاخه res قرار دارد. فایل Layout را باز کنید و به قسمت کد آن بروید و RelativeLayout را به LinearLayout تغییر دهید:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

</LinearLayout>

۲- چیدمان اصلی اکتیویتی(Activity)

قبل از این که وارد جزئیات بشوید، اول باید بدانید که در نهایت صفحه برنامه تان قرار است چه شکلی داشته باشد. مثلاً آیا می خواهید نوار دستورات برنامه در بالای صفحه باشد یا در پایین صفحه؟ آیا طراحی سه قسمتی (Header و Content و Footer) می خواهید یا اینکه دو قسمتی (Header و Content)؟ همانطور که در فصل قبل طرح هایی ساده کشیدیم تا عناصر اصلی را آموزش دهیم، حالا برای طراحی عناصر اصلی چیدمان از همان روش استفاده می کنیم.

فرض کنید می خواهیم یک اکتیویتی برای ورود (Login) و ثبت نام (Register) داشته باشیم که شامل دو قسمت برای ورود نام کاربری (Username) و رمزعبور (Password) و دو دکمه برای ثبت نام و ورود. در پایین این فرم می خواهیم دو دکمه برای ورود از طریق حساب کاربری گوگل و فیسبوک داشته باشیم. برای این کار ابتدا طرح اولیه ای برای این بخش از صفحه می کشیم. نیازی نیست سراغ ابزار خاصی بروید. Paint هم برای این کار کافی است:

حالا باید تصمیم بگیریم سایر اجزای صفحه چه اند و کجا قرار می گیرند. مثلاً آیا نمی خواهیم لوگوی برنامه را در صفحه قرار دهیم؟ آیا مثلاً موافقت نامه استفاده از خدمات برنامه را در صفحه قرار دهیم؟ آیا امکانی برای کاربر مهمان در نظر گرفته ایم؟ پاسخ به این سؤالات کمک می کند که سایر عناصر صفحه را در چیدمان قرار دهیم. فرض کنید لوگوی برنامه را در بالای فرم می گذاریم و در قسمت پایین صفحه یک نوار قرار می دهیم که شامل دکمه هایی برای دسترسی کاربر مهمان و مطالعه موافقت نامه استفاده از برنامه (و احتمالاً سایر چیزهایی است که می خواهیم در صفحه قرار دهیم). طرح نهایی چیزی شبیه این خواهد شد:

حالا می دانیم صفحه ما در نهایت قرار است چه شکلی باشد و چه عناصری داشته باشد. البته کشیدن طرح های اولیه محاسن دیگری هم دارد. مثلاً می توان آنها را به کارفرما نشان داد و نظر کارفرما را درباره آنها پرسید و آنها را در طرح ادغام کرد.

طبق این طرح، صفحه ما از سه قسمت اصلی ساخته خواهد شد: لوگو که در بالای صفحه قرار دارد، فرم که در قسمت میانی صفحه قرار دارد و دکمه های Guest User و License که همواره در پایین صفحه قرار دارند. در واقع قسمت های اصلی صفحه ما شبیه شکل زیر باید باشد:

چیدمان آبی رنگ، چیدمان اصلی است. ویژگی های عرض و ارتفاع آن همانطور که در عکس می بینید، match_parent است. یعنی این Layout به اندازه کل صفحه نمایش بزرگ خواهد بود و همه صفحه را در بر می گیرد. همانطور که در عکس می بینید، این Layout خود شامل سه Layout دیگر است که به صورت عمودی درونش قرار گرفته اند. پس حتماً چیدمان اصلی ما باید جهت عمودی داشته باشد. برای این کار باید orientation آن را عمودی (vertical) تعریف کنید.

کد نهایی این Layout این است:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

</LinearLayout>

چیدمان سبز رنگ جایی است که قرار است لوگوی برنامه در آن قرار بگیرد. عرض آن را همانطور که می بینید، match_parent گرفته ایم. این بعنی عرض این Layout به اندازه عرض Layout والد (یا Parent) خود (Layout آبی رنگ) است. ارتفاع آن را wrap_content تعریف می کنیم تا ارتفاع این Layout به اندازه عکسی که داخل آن به عنوان لوگو قرار خواهیم داد بزرگ شود. این کار باعث می شود عکس لوگو کشیده یا فشرده نشود.

کد نهایی این Layout این است:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </LinearLayout>

چیدمان قرمز رنگ هم که Footer صفحه است، مشابه Layout سبز رنگ عرضش به اندازه عرض Layout آبی رنگ و در نتیجه اندازه عرض صفحه نمایش خواهد شد. ارتفاع آن هم به اندازه ارتقاع عناصری که درون ش قرار خواهند گرفت می شود.

کد نهایی این Layout این است:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
    </LinearLayout>

چیدمان خاکستری رنگ که شامل فرم اصلی صفحه است و  در وسط صفحه قرار می گیرد هم عرضی برابر با Layout آبی رنگ دارد. اما درباره ارتفاع آن چه می توان گفت؟ اگر ارتفاع آن را wrap_content بگذاریم، Layout قرمز رنگ یا می آید وسط صفحه یا اصلاً در صفحه جا نمی شود. اگر ارتفاع آن را match_parent بگذاریم، Layout قرمز رنگ با همان Footer اصلاً در صفحه دیده نخواهد شد. اگر بخواهیم مقدار ثابتی را به عنوان ارتفاع آن بر حسب dip تعریف کنیم، نمی دانیم که آیا محتوای آن به درستی نمایش داده خواهد شد یا نه و البته مشکل بزرگتر هم این است که هر گوشی و تبلت موجود در بازار اندازه متقاوتی دارد و آنگاه باید برای هر اندازه ای یک مقدار متفاوت برای این Layout طراحی کرد. مثلاً یک گوشی ۳ اینچ است و دیگری ۶ اینچ و تبلت ها هم ۷ تا ۱۲ اینچ هستند. برای رفع این مشکل نیاز به یک ویژگی جدید داریم: وزن!

اضافه کردن یک ویژگی جدید به اسم android:layout_weight با مقدار ۱ به این Layout باعث می شود، ابتدا ارتفاع مورد نیاز برای نمایش سایر Layout ها محاسبه شود و بعد همه فضای باقیمانده به این Layout اختصاص یابد. مثلاً اگر ارتفاع Layout سبز رنگ و لوگوی داخل آن ۱۰۰ dip و ارتفاع Layout قرمز رنگ ۵۰ dip باشد و ارتفاع Layout آبی رنگ (ارتفاع صفحه نمایش) ۳۵۰ dip باشد آنگاه ارتفاع Layout خاکستری رنگ این گونه محاسبه می شود:

height = 350 – (100 + 50) = 200 dip

کد نهایی این Layout این است:

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >
    </LinearLayout>

نکته ۱: ویژگی وزن فقط برای اجزایی است که داخل چیدمان خطی قرار دارند.

نکته ۲: اگر جهت Layout والد (در این مثال Layout آبی رنگ) عمودی باشد، وزن بر روی ارتفاع و اگر افقی باشد، وزن بر روی عرض اعمال می شود. در مثال ما از آنجایی که جهت Layout والد، عمودی است، وزن بر روی ارتفاع اعمال می شود.

نکته ۳: برای کارآیی بیشتر، اکیداً توصیه می شود ارتفاع یا عرض View یی که برای آن وزن تعریف می شود، را صفر بگذارید. در مثال ما از آنجایی که جهت Layout والد عمودی است، وزن Layout خاکستری رنگ را ۱ تعریف کرده و ارتفاع آن را صفر نعریف می کنیم.

با ویژگی وزن یا همان android:layout_weight هنوز کار داریم و در بخش های بعدی همین فصل باز به سراغش خواهیم آمد.

کد اصلی چیدمان این اکتیویتی تا این جای کار به شکل زیر خواهد یود:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<!-- Logo -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </LinearLayout>

<!-- Form -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >
    </LinearLayout>

<!-- Footer -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
    </LinearLayout>

</LinearLayout>

در فصل بعد این فرم را کامل می کنیم.