طراحی و ساخت صفحه Login Screen + سورس

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

 

برای شروع کار یک پروژه جدید ایجاد می کنیم و اسمش رو LoginScreenUI قرار میدیم،در داخل لایه اصلی برنامه (activity_main.xml) از یک لایه جدید استفاده می کنیم این لایه از نوع RelativeLayout خواهد بود.به این دلیل از RelativeLayout استفاده کردیم که حرکت دادن عناصر و مرتب سازی اون خیلی راحت تره،بعد از اینکه لایه رو طراحی کردیم ،برروی اون از دو تا Edittext یکی برای نام کاربری و دیگری برای رمز عبور استفاده کرده ایم و سپس در قسمت اخر از یک دکمه برای ورود به برنامه استفاده کردیم با عنوان LOG In.(کدهای کامل لایه برنامه activity_main.xml).

 <!-- آموزش رایگان برنامه نویسی اندروید -->
<!-- Appinapps.com -->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/back_ic"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<RelativeLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:background="@drawable/layout_shape"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="77dp"
android:hint="User Name"
android:ems="10" />

<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/editText1"
android:layout_below="@+id/editText1"
android:layout_marginTop="2dp"
android:hint="Password"
android:ems="10" />

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="17dp"
android:textColor="#fff"
android:textSize="21sp"
android:textStyle="bold|italic"
android:text="LOGIN" />

<Button
android:id="@+id/button1"
android:layout_width="160dp"
android:layout_height="40dp"
android:layout_below="@+id/editText2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="@drawable/btn_shape"
android:textColor="#fff"
android:textSize="18sp"
android:textStyle="bold"
android:text="LOG IN" />

</RelativeLayout>

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:textColor="#fff"
android:textSize="24sp"
android:textStyle="bold|italic"
android:text="Appinapps" />

</RelativeLayout>

بعد از اینکه کارمون بالایه تموم شد میریم سراغ نوشتن کدهای شیپ(Shape).در طراحی لایه ای که Edittext ها بر روی اون قرار داشتم از یک رنگ تیره استفاده کرده بودیم این طرح و رنگ رو در یک فایل xml به نام layout_shape.xml ایجاد کردیم.در داخل این فایل از خاصیت corners برای گرد کردن گوشه های لایه استفاده کردیم،از خاصیت padding برای جمع کردن عناصر از گوشه های لایه به داخل لایه استفاده کردیم،از خاصیت solid یک رنگ برای پس زمینه لایه بهره بردیم و در آخر هم از خاصیت stroke برای شیشه ای کردن لایه استفاده کردیم.(کدهای فایل layout_shape.xml).

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle" >

<corners 
android:radius="5dp"
/>
<padding 
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp"
/>
<solid 
android:color="#88898888"
/>
<stroke 
android:width="1dp"
android:color="@android:color/transparent"
/>


</shape>

بعد از تموم کردن فایل Shape لایه برنامه.میریم سراغ طراحی دکمه و فایل طراحی btn_shape.xml که برای زیبا سازی Button از استفاده کرده ایم.در داخل این فایل از بیشتر خاصیت های که در بالا توضیح دادیم استفاده شده است پس نیازی به توضی نیست.بیشتر خاصیت ها در این آموزش ها توضی داده شده اند.(کدهای فایلbtn_shape.xml ).

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle" >

<corners 
android:radius="5dp"
/>
<solid 
android:color="#16B24D"
/>
<stroke 
android:width="1dp"
android:color="#fff"
/>



</shape>

تمامی تصاویر و فایل های xml که طراحی کردیم در سورس برنامه جهت دانلود آماده شده است.موفق باشید.


فایلهای ضمیمه
توجه! برای مشاهده فایلهای ضمیمه با ید وارد سایت شوید

نظرات شما نظر جدید
سایر مقالات این دسته