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

در فصل قبل شکل کلی فرم مورد نظر را ساختیم. الان نوبت قسمت اصلی یا همان فرم صفحه است…

شکل کلی صفحه ما شبیه عکس زیر است. تا اینجا Header یا سربرگ که عکس لوگوی ما در آن قرار گرفته است و Footer یا ته برگ که دو دکمه License و Guest در آن قرار گرفته است را ساخته ایم:

ch9-form-full

حالا می رویم سراغ فرم اصلی صفحه!

ابتدا یک EditText برای نام کاربری (Username) به صفحه اضافه می کنیم:

android-ch11-add-edittext-to-form

حالا به پنجره Properties بروید و در قسمت Hint عبارت Username را بنویسید.

نکته: Hint یا اشاره، متنی است که با رنگ خاکستری در EditText نمایش داده می شود و وقتی کاربری وارد EditText می شود از بین می رود. در واقع همانطور که از اسمش معلوم است، به محتوایی که که کاربر قرار است در آن وارد کند «اشاره» می کند.

android-ch11-add-edittext-hint

حالا همین فرایند را مجدداً تکرار کنید. یک EditText از نوع password با «اشاره» Password به فرم اضافه کنید:

android-ch11-add-password-edittext-with-hint

حالا می خواهیم دو دکمه Sign Up و Login را به فرم اضافه کنیم. از آنجایی که جهت یا orientation این LinearLayout عمودی (vertical) است، اگر همینطور عادی دو دکمه به چیدمان اضافه کنیم، به صورت عمودی به فرم اضافه می شوند:

android-ch11-add-login-signup-buttons-vertically

برای حل این مشکل، قبل از اینکه دکمه ها را فرم اضافه کنیم، ابتدا یک LinearLayout با جهت یا Orientation افقی (horizontal) به فرم اضافه می کنیم و سپس این دو دکمه را به فرم اضافه می کنیم:

android-ch11-add-horizontal-linearlayout

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

android-ch11-add-login-signup-buttons-horizontally

البته هنوز این شکل فرم با شکل مطلوب ما فاصله دارد. در عکس ما، این دو دکمه عرض برابر داشتند و هر کدام نصف عرض صفحه را اشغال می کردند. از جلسه قبل چاره حل این مشکل را هم می دانید! کافی است عرض هر دو دکمه را ۰dip تعریف کنید و به هر کدام وزن ۱ بدهید:

android-ch11-add-login-signup-buttons-horizontally-with-weight

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

android-ch11-add-login-facebook-google-plus-buttons

حالا وقت آن است که رنگ دکمه ها را تغییر بدهیم. برای این کار به پنجره Properties بروید و Background دکمه ورود فیسبوک را مشابه عکس زیر به مقدار ۰e1f5b# تغییر دهید:

android-ch11-color-facebook-button-properties

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

android-ch11-color-facebook-button

همانطور که می بینید، نوشته سیاه در این رنگ آبی، نمایش خوبی ندارد. حالا می خواهیم رنگ متن Facebook Login را سفید کنیم. برای این کار از پنجره Properties ویژگی Text Color دکمه را به مقدار FFFFFF# تغییر دهید:

android-ch11-color-facebook-button-text-properties

ماحصل کار تا اینجا این شکلی است:

android-ch11-facebook-login-background-text-final

حالا Background دکمه Google+ Login را به مقدار DD1812 تغییر دهید. حاصل کار شبیه عکس زیر خواهد شد:

android-ch11-login-buttons-final

خب! تا حد زیادی شبیه کاری که ابتدا می خواستیم شد ولی هنوز یک نکته کوچک باقی مانده است: دکمه های ورود چرا به هم چسبیده اند؟ بهتر نیست کمی بین آنها فاصله باشد؟ بر می گردیم به پنجره Properties و برای هر دو دکمه Margin تعریف می کنیم:

android-ch11-login-buttons-margin-properties

این کار را برای هر دو دکمه ورود فیسبوک و ورود گوگل انجام می دهیم. حاصل کار را ببینید:

android-ch11-final

نکته: margin یا حاشیه، فاصله ای است که هر View در صفحه با سایر عناصر صفحه دارد. مثلاً وقتی برای یک دکمه، حاشیه یا margin به اندازه ۴dp تعریف می کنیم، یعنی هیچ View دیگری نمی تواند با این دکمه فاصله ای کمتر از ۴dp داشته باشد.

کد نهایی این صفحه:

<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"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Username" >

            <requestFocus />
        </EditText>

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword" />

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

            <Button
                android:id="@+id/button3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Login" />

            <Button
                android:id="@+id/button4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Register" />
        </LinearLayout>

        <Button
            android:id="@+id/button5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="#0e1f5b"
            android:text="Facebook Login"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="#DD1812"
            android:text="Google+ Login"
            android:textColor="#FFFFFF" />

    </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>

در فصل های بعدی با گرافیکها و RelativeLayout کار خواهیم کرد. با ما باشید!

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

  1. مجید

    ما با شماییم استادجان.یک سوالی که اینجا مطرح میشه اینه که به صورت گرافیکی خیلی راحت تر میشه کار کرد.ایا شما این رو پیشنهاد میکنید یا کد نویسی بهتره؟

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سلام
      اگه ندونی داری چی کار می‌کنی، هیچوقت نمی‌فهمی مشکل از کجا است و در نتیجه نمی‌تونی اصلاحش کنی. بنابراین اول باید تو کد بنویسی و بعد بری سراغ ابزار و امکانات دیگه.

      پاسخ
  2. رحمان

    استاد نمی دونم چطور باید از شما تشکر کنم … کارتون حرف نداشت خیلی عالی مطالب آموزش دادید.
    من تازه اندروید شروع کردم این مباحث برای کسی مثل من خیلی گیج کننده گنگ بود .. توی اینترنت خیلی سرچ زدم ولی هیچ کی نتونست به خوبی شما مطلب برسونه .. کارتون حرف نداره
    بسیار سپاسگزارم دعا گو شما هستم

    پاسخ
  3. مهرداد

    استاد یه دونه ای بخدا.خدا خیرت بده فرق آموزشتون با بقیه خوانا و قابل فهم بودنه.خیلی چاکریم.

    پاسخ

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

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