در فصل قبل ساختار کلی یک اکتیویتی را ساختیم. در این جلسه وارد جزئیات خواهیم شد تا بقیه قسمت های فرم را کامل کنیم.

تا به حال ویژگی های زیادی از یک LinearLayout را آموختید:

android:layout_width="..."
android:layout_height="..."
android:layout_weight="..."
android:orientation="..."
android:background="..."

در این مطلب با ویژگیهایی بیشتری آشنا خواهید شد.

مقدمه:

شکل نهایی فرمی که ساخت آن را از فصل قبل شروع کرده ایم، در نهایت قرار است شبیه عکس زیر باشد:

از قسمت Header فرم که لوگو در آن قرار دارد شروع می کنیم. از آنجایی که هنوز کار کردن با عکسها و تصاویر را نگفته ایم و پروژه ما هنوز یک فایل عکس بیشتر ندارد (که همان آیکون برنامه است)، برای لوگو از همان آیکون برنامه استفاده خواهیم کرد.

حالا به حالت طراحی گرافیکی اکتیویتی بروید و از Palette قسمت Images and Media را باز کنید و یک ImageView را به Layout مربوط به لوگو (همان Header) بیاندازید:

در مرحله بعد از شما می خواهد که عکس مورد نظر خود را از میان عکسهای موجود (که در حال حاضر احتمالاً فقط یکی است انتخاب کنید. اگر تعداد بیشتری عکس برای انتخاب فهرست کرد، عکسی با نام ic_launcher را انتخاب کنید:

بعد از OK کردن فرم بالا، عکس مورد نظر، به فرم اضافه می شود:پ

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

ویژگی جاذبه (Gravity):

برای رفع این مشکل اندروید یک ویژگی دیگر برای LinearLayout در نظر گرفته است به نام android:gravity. مقدار پیش فرض گرویتی یا جاذبه top|left است. یعنی بالا سمت چپ. حالا اگر این مقدار را به center_horizontal تغییر دهیم، عناصر را در وسط محور افقی قرار خواهد داد. سایر مقادیر برای گرویتی یا جاذبه را در عکس زیر می بینید:

برای این که لوگوی ما در وسط قرار بگیرد کافی است جاذبه LinearLayout را center_horizontal تعریف کنید:

android:gravity="center_horizontal"

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

ویژگی جاذبه یکی از کاربردی ترین ویژگی های LinearLayout است و  در ادامه کار بسیار از آن استفاده خواهیم کرد.

کد کامل قسمت لوگوی ما بعد از اضافه کردن ImageView به آن و تعیین جاذبه:

    <!-- Logo -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

    </LinearLayout>

حالا به سراغ ساخت قسمت Footer صفحه خواهیم رفت. جایی که دو دکمه License و Guest قرار می گیرند.

Footer اکتیویتی

برای ساخت قسمت پایین صفحه یا Footer ابتدا به حالت طراحی گرافیکی بروید و از Palette قسمت Form Widgets یک Button بکشید و در LinearLayout پایین صفحه رها کنید:

بعد از اضافه کردن دکمه به LinearLayout، از پنجره Properties که در سمت راست صفحه قرار دارد، متن نمایش داده شده در دکمه را به License تغییر دهید. برای این کار از عکس زیر کمک بگیرید:

بعد از آن یک دکمه یا Button دیگر به فرم اضافه کنید و به همین شیوه متن آن را به Guest تغییر دهید. ماحصل کار شبیه عکس زیر خواهد شد:

iهمانطور که در عکس می بینید دکمه ها از سمت چپ به LinearLayout اضافه شده اند. البته انتظاری هم جز این نیست. زیرا جاذبه به صورت پیش فرض top|left است. برای این که دکمه ها را به وسط فرم بیاوریم، می توانیم به LinearLayout جاذبه center_horizontal بدهیم:

اگر به عکسی که جلسه قبل برای پیش نمایش صفحه کشیده بودیم برگردید، می بینید که در آن عکس هر دو دکمه عرض برابری داشتند و در ضمن کل صفحه را می گرفتند در حالی که در این عکس دکمه ها عرض برابر ندارند و همه عرض صفحه را هم پر نکرده اند! بنابراین باید راهی باشد تا بتوان این فرم را به شکل مطلوب درآورد. ویژگی وزن را از جلسه قبل به خاطر بیاورید. همانطور که در جلسه قبل گفتیم این ویژگی باعث می شود عرض یک یک Layout یا View به اندازه ای تغییر کند که با وزن آن مطابقت پیدا کند. حالا اگر بیاییم و برای این دو دکمه وزن ۱ تعریف کنیم چه اتفاقی می افتد؟ عرض هر دکمه به اندازه نصف عرض Layout والدشان می شود. ببینید:

خب، حالا به چیزی که می خواستیم سبیه شد!

کد قسمت Footer اکتیویتی:

<!-- Footer -->

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

        <Button
            android:id="@+id/button1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="License" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Guest" />
    </LinearLayout>

---

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

<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"
        android:gravity="center_horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </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" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="License" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Guest" />
    </LinearLayout>

</LinearLayout>

در فصل بعد، قسمت اصلی فرم را خواهیم ساخت!