آموزش اندروید، فصل ۱۰: آشنایی با LinearLayout (بخش ۳)

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

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

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

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

مقدمه:

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

ch9-form-full

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

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

ch10-add-imageview-to-form

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

ch10-add-imageview-to-form-2

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

ch10-add-imageview-to-form-3

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

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

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

ch10-android-gravity-valid-values

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

android:gravity="center_horizontal"

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

ch10-center-imageview-with-gravity

ویژگی جاذبه یکی از کاربردی ترین ویژگی های 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 پایین صفحه رها کنید:

ch10-add-button-to-footer-1

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

ch10-change-button-text

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

ch10-footer-before-layout-weight

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

ch10-footer-after-layout-gravity

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

ch10-add-weight-to-footer-buttons

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

کد قسمت 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>

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

2 فکر می‌کنند “آموزش اندروید، فصل ۱۰: آشنایی با LinearLayout (بخش ۳)

  1. saeed

    من دقیقا همین کار رو انجام دادم ولی داخل فوتر تکست الاینمنت رو گوشه سمت چپ نشون میده(متن باتون)
    ویژگی الایمنت رو هم برابر سنتر قرار دادم باز همونه
    ممنون اگ کمک کنید

    پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.