در این مقاله آموزشی می خواهیم نحوه کار با رابط گرافیکی اندروید استودیو را آموزش دهیم و برای این منظور، می خواهیم یه صفحه Login ساده در اندروید استودیو طراحی کنیم.

اندروید استودیو را اجرا کرده و فایل activity_main.xml را انتخاب کنید تا بخش Design اندروید استودیو نمایش داده شود. فایل XML مورد نظر را می توانید با طی مسیر مقابل ، پیدا کنید.(res->layouts->activity_main.xml)

در پایین صفحه، حالت نمایش را از Design به حالت ، Text تغییر دهید تا بتوانید با کدهای XML کار کنید. برای طراحی رابط گرافیکی در اندروید، استفاده از بخش کد(Text) توصیه می شود چرا که سرعت دسترسی به attribute ها بیشتر است و برای debugging زحمت کمتری بر دوش شما خواهد بود.

در حالت پیش فرض، Parent Layout شما بر روی Relative Layout تنظیم شده است که البته می توانید آن را تغییر دهید اما به دلیل انعطاف پذیری بیشتر Relative Layout نسبت به Linear Layout در جایگیری عناصر صفحه، حالت پیش فرض را تغییر نمی دهیم.

در داخل تگ Relative Layout، یک عنصر به نام TextView مشاهده می کنید. این عنصر برای نمایش متن بر روی صفحه به کار می رود؛ این تگ و محتویات آن را پاک کنید تا صفحه ای سفید و خالی در اختیار داشته باشیم.

برای طراحی صفحه Login، از تصویر پس زمینه شروع می کنیم. برای قرار دادن عکس در صفحه، از عنصری به نام ImageView استفاده می کنیم. تگ ImageView را درون تگ Relative Layout باز کنید. سپس دو attribute به نام های layout_width و layout_height برای شما نمایش داده می شود، البته در صورتی که از code completion اندروید استودیو استفاده کنید. این دو attribute برای تعیین طول و عرض عنصر به کار می رود و در تمامی عناصر XML، وجود و مقدار داشتن این دو attribute ضروری است. دو مقدار پیش فرض به نامهای wrap_content و match_parent وجود دارد تا بتوانید عرض و طول را با آن مشخص کنید که می توانید این دو مقدار را نذاشته و به صورت دستی، عدد وارد کنید. مقدار wrap_content به این معناست که عنصر مورد نظر به اندازه محتوای درونش، عرض یا طول اختیار کند و مقدار match_parent به این معناست که به اندازه Parent Layout خود، عرض یا طول اختیار کند. در اینجا، به دلیل این که عکس ما، پس زمینه صفحه خواهد بود، پس برای هر دو attribute عرض و طول، مقدار match_parent را وارد میکنیم. حال برای نمایش عکس، باید آن را درون پوشه drawable ذخیره نماییم. سپس، از خصوصیت(attribute)   مقابل استفاده می کنیم و برای مقدار آن نیز، آدرس پوشه ایی را که در آن عکس را ذخیره کرده ایم را اینگونه وارد می کنیم:

android:src=”@drawable/your_image_name”

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.sample.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/back_app "
        android:scaleType="fitXY"/>
    
</RelativeLayout>

همانطور که می بینید، در تگ ImageView، خصوصیتی به نام scaleType وجود دارد که مقادیر مختلفی می گیرد. مقدار fitXY به این منظور به کار می رود که اندازه عکس در بعد های X و Y کوچک یا بزرگ شود که به اندازه ImageView بستگی دارد.

حال برای username و password از عنصر EditText استفاده می کنیم، این عنصر برای وارد کردن متن توسط کاربر طراحی شده است. برای درست کردن EditText، تگ EditText را باز می کنیم و طول و عرض آن را تعیین می کنیم؛طول را برابر ۱۵۰dp و عرض را برابر wrap_content قرار می دهیم. EditText در گوشه صفحه ظاهر می شود اما بهتر است که در وسط صفحه باشد. بدین منظور از خصوصیت centerInParent استفاده می کنیم و مقدار آن را برابر true قرار می دهیم تا EditText در وسط صفحه قرار گیرد. حال به منظور این که کاربر بداند که در این EditText باید username خود را وارد کند، از خصوصیت hint استفاده می کنیم و کلمه username را برای آن وارد می کنیم.

در حالت پیش فرض، رنگ hint مشکی است اما می توانید رنگ آن را توسط خصوصیت textColorHint تغییر دهید. این خصوصیت سه نوع مقدار دریافت می کند:۱- کد decimal رنگ مورد نظر ۲- استفاده از رنگهای پیش فرض اندروید استودیو ۳- استفاده از رنگهای اعلام شده در پوشه colors

حال برای password، یک EditText جدید باز کنید و همان مقدارها و خصوصیت های username را وارد کنید با این تفاوت که hint را باید password وارد کنید. مشکلی که وجود دارد این است که password روی username قرار دارد؛ برای رفع این مشکل از خصوصیت layout_below استفاده می کنیم اما قبل از آن باید برای تگ username یک id اعلام شود. به تگ username رفته و از خصوصیت id استفاده کنید و id را اینگونه وارد کنید:

android:id=”@+id/your_id_name”

حال به تگ password رفته و دوباره یک id وارد کنید و سپس با استفاده از خصوصیت layput_below مشکل را حل کنید.

<EditText
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:hint="password"
        android:id="@+id/password"
        android:layout_below="@+id/username"/>
                                                                                           

مقدار خصوصیت layout_below را  باید id وارد کنید و در اینجا username را وارد کردیم چرا که قصد ما این بود تا password زیر username قرار بگیرد.

حال یک دکمه برای وارد شدن ایجاد می کنیم. بدین منظور از تگ Button برای ایجاد دکمه استفاده می کنیم و طول و عرض آن را تعیین می کنیم. سپس خصوصیت layout_centerInParent را برابر true قرار می دهیم. مشاهده می کنید که دوباره به مشکل قبلی برخوردیم پس با استفاده از خصوصیت layout_below و وارد کردن @+id/password این مشکل را حل می کنیم.حال باید یک کلمه با متن برای دکمه وارد کنیم که باید از خصوصیت text استفاده کنیم و متن خود را وارد می کنیم.

صفحه نهایی به این صورت است:

بدین ترتیب توانستیم یک رابط کاربری ساده در اندروید استودیو طراحی کنیم. در آموزش بعدی، به مفهوم Intent و نحوه استفاده از آن می پردازیم.