1113 نیروی متخصص آماده کـار برای شمـا هستند
حالا پروژه خود را ایجاد کنید
تعداد طراحان اندروید 1017
تعداد نرم افزار های اندروید 0
تعداد طراحان آی او اس 1002
تعداد نرم افزارهای آی او اس 0
آخرین اخبار سایت
ایجاد صفحه ی Login

ایجاد صفحه ی Login 

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

برای شروع یک پروژه جدید ایجاد کرده و نام آن را LoginScreen بگذارید، درلایه اصلی برنامه main.xml ، از یک لای اوت جدید از نوع RelativeLayout  استفاده کنید چون حرکت دادن عناصر و مرتب سازی آنها خیلی راحت تر است. بعد از ایجاد لایه ، در آن از دو  Edittext یکی برای نام کاربری و دیگری برای رمز عبور استفاده میکنید و در انتها یک دکمه برای ورود به برنامه با عنوان LogIn قرار خواهید داد. 

  

"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="#ef34ee
"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/shape_layout
"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="80dp
"android:hint="UserName
< /"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="5dp
"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="20dp
"android:textColor="#fff
"android:textSize="20sp
"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/buttonshape
"android:textColor="#fff
"android:textSize="16sp
"android:textStyle="bold
 </ "android:text="LogIN 

<RelativeLayout/>


<RelativeLayout/>

 

بعد از انجام این کار نوبت نوشتن کدهای شیپ (Shape) است. ابتدا باید یک shape برای دکمه ی Login طراحی شود. یک فایل xml در پوشه ی drawable ایجاد کرده و نام آن را buttonshape بگذارید:

<?"xml version="1.0" encoding="utf-8?>

<" shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle>

corners>

"android:radius="18dp

</

gradient>

"android:angle="45

"android:centerX="35%

"android:centerColor="#887BA8

"android:startColor="#E8E8E8

"android:endColor="#000000

"android:type="linear

</

padding>

"android:left="0dp

"android:top="0dp

"android:right="0dp

"android:bottom="0dp

</

size>

"android:width="250dp

"android:height="60dp

</

stroke>

"android:width="2dp

"android:color="#878787

</

<shape/>

 

اگر پوشه ی drawable در زیر مجموعه ی res نباشد ،باید روی res کلیک راست کرده و گزینه ی NEW را بزنید و به folder بروید و نام آن را drawable بگذارید.

 

در این فایل از خاصیت corners برای گرد کردن گوشه های دکمه استفاده شده است و از خاصیت padding برای جمع کردن عناصر از گوشه های دکمه به داخل و در آخر هم از خاصیت stroke برای شیشه ای کردن دکمه.

در کدهای فایل main.xml که در اول این آموزش قرار داده شده بود ملاحظه کردید که در قسمت Button تنظیمات backgrand ، آدرس فایل buttonshape قرار داده شده بود یعنی backgrand را برابر با همان فایل xml قرار بدهد که خودمان به صورت shape ایجاد کردیم.

در مرحله ی بعد با استفاده از یک فایل shape ظاهر لای اوت ایجاد شده را اصلاح خواهیم کرد که در این مورد در پوشه ی drawable یک فایل xml جدید ایجاد کرده و نام آن را shape_layout  بگذارید. بعد ازایجاد فایل shape آدرسش را مانند قسمت قبل در backgrand قسمت RelatevLayout قرار میدهیم:

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

corners>
"android:radius="20dp
</
solid>
"android:color="#1da24D
</
stroke>
"android:width="20dp
"android:color="#f001ff
</
 

<shape/>

 

در این فایل از خاصیت corners برای گرد کردن گوشه های دکمه استفاده شده است و از خاصیت padding برای جمع کردن عناصر از گوشه های دکمه به داخل و در آخر هم از خاصیت stroke برای شیشه ای کردن دکمه که هر چقدر مقدار آن بیشتر باشد لایه ی سبز رنگ کوچک تر شده و در نهایت محو می شود.

این کار را میتوان برای تمام عناصر موجود در صفحه ای که ایجاد می شود انجام داد. تصویرزیر خروجی این آموزش است:

 

 

"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="#ef34ee
"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/shape_layout
"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="80dp
"android:hint="UserName
</ "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="5dp
"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="20dp
"android:textColor="#fff
"android:textSize="20sp
"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/buttonshape
"android:textColor="#fff
"android:textSize="16sp
"android:textStyle="bold
</ "android:text="LogIN

<RelativeLayout/>


<RelativeLayout/>

  • دسته بندی :
  • تاریخ انتشار : 18 اردیبهشت 1396
  • بازدید : 416

برچسب ها :