عرض سلام خدمت دوستان عزیز امیدوارم احوالتون خوب باشه
خب طبق قرارمون این جلسه با بخش اول طراحی ui خدمتتون هستیم.
بدون مقدمه بریم سراغ اصل مطلب
این جلسه میخوایم ui صفحه های ورود و ثبت نام اینستاگرام رو طراحی کنیم
اما قبلش بریم اکتیویتی هایی که لازم داریم رو بسازیم:
در تصویر(1) ابتدا مطابق شکل رو اپ (app) کلیک میکنیم و به مرحله بعد میریم(تصویر شماره 2)
در تصویر(2) مطابق مرحله 2، روی پوشه جاوا کلیک میکنیم اینجا 3 تا پوشه میبینیم که هم نام اسم پکیجمون هست
2 تاش test هست یکیش نیست.
مطابق مرحله 3 روی اون که test نیست راست کلیک میکنیم و میریم به تصویر شماره 3:
بعد از مرحله 3 که روی فولدر کلیک راست کردیم مطابق مرحله 4 یک پکیج جدید میسازیم و اسمشو میذاریم Login.
مطابق تصویر شماره 4 و مرحله 5 روی پکیج Login که جدید ساختیم راست کلیک میکنیم و دوتا اکتیویتی با لایه های مربوطش از نوع Empty Activity میسازیم و اسمشون رو میذاریم LoginActivity و SignupActivity.
خب الان اکتیویتی ها رو ساختیم و الان باید بریم لایه ها رو طراحی کنیم
من ابتدا صورت کلی دو لایه صفحه ثبت نام و صفحه ورود رو میذارم که شما یه دید کلی ازش داشته باشید و بعد به سراغ پیاده سازی جزئی و تگ نویسی xml اون میریم.
تصویر شماره 5 مربوط به صفحه ورود کاربر هست
خب همونطور که میبینید کامپوننت ها به صورت خطی زیر یک دیگه قرار گرفتن
طبق شماره گذاری که که در تصویر شماره 5 کردم ما 3 تا لایه خطی داریم نیاز داریم به صورت کلی که کامپوننت هامون رو نگه داریم.
چیز دیگه ای که توی تصویر میبینیم پشت زمینه صفحه هست که به صورت gradient هست
بنده رنگهاشو با استفاده از ابزاری که روی فایرفاکس نصب کردم از اینترنت برداشتم شما هم میتونید همین کار رو انجام بدید و رنگ دلخواه به صورت gradient توی پشت زمینه تون بذارید.
خب حالا بریم سراغ طراحی مرحله به مرحله این صفحه مون:
</LinearLayout> |
نمونه کد 1
ابتدا حالت کلی لایه xml رو از constraintLayout به LinearLayout تغییر میدیم چون میخوایم لایه مون خطی باشه.
تصویر شماره 5 رو که ملاحظه کنید متوجه خواهید شد که لایه ها به صورت عمودی زیر هم قرار گرفتن پس orientation رو میذاریم vertical
بعدش میخواهیم که اون صفحه که به صورت gradient بود رو طراحی کنیم و بذاریم به عنوان پشت زمینه صفحه مون.
پس طبق تصویر شماره 6 عمل میکنیم:
مطابق مراحل شماره گذاری شده در تصویر شماره 6 به پوشه res میریم و سپس روی drawable کلیک راست میکنیم و از قسمت new گزینه drawable resource file رو انتخاب میکنیم
سپس اسم اون رو میذاریم bg_login و میریم پس زمینه مون رو طراحی میکنیم.
ابتدا چنین صفحه ای مطابق تصویر شماره 7 میبینیم
اولین کاری که میکنیم اینه select or رو به shape تغییر میدیم و میریم مرحله بعد:
اگه دوره مقدماتی اندروید رو گذرونده باشید که حتما میدونید و اگه هم نه ان شاالله توی دوره مقدماتی که در اینده ای نزدیک توی سایت خواهیم گذاشت مفصل توضیح خواهیم داد.
gradient از دوتا رنگ تشکیل شده و یه زاویه که هر 45 درجه تغییر میکنه و مطابق همون زاویه اون دوتا رنگ ها gradient میشن.
پس مطابق تصویر شماره 8 یه تگ gradient باز میکنیم.
من دوتا رنگ ها رو با استفاده از همون ابزاری که عرض کردم از اینترنت برداشتم شما هم میتونید از همینا استفاده کنید اگه هم مایلید رنگ های دیگه انتخاب کنید میتونید رنگ های دلخواه بذارید و با استفاده از زاویه 90 درجه gradient بشن.
خب تنها کار باقیمانده اینه که مطابق نمونه کد شماره 1 background رو بذاریم همین drawable/bg_login که ساختیم.
خب بریم سراغ ادامه طراحی
یک بار دیگه تصویر شماره 5 رو ببینید
ما 3 تا لایه خطی زیر هم نیاز داریم باز
که توی شماره1 یه Textview هست که نوشته Instagram
توش شماره2 دوتا edittext هست برای نام کاربری و رمز عبور و یک button برای لاگین شدن
و توی شماره 3 یک لایه خطی این بار از نوع افقی(Horizontal) هست که دوتا textview کنار هم اومدن
قبل از اینکه کد xml لایه ها رو بذارم یه نکته رو بگم اینکه اگه من به لایه ها اندازه بدم ممکنه توی تبلت که صفحه بزرگتری داره لایه ها فیکس نباشن واسه همین من ارتفاع همه لایه ها رو 0 گذاشتم و به اونا مطابق با فضایی که لازم دارن وزن دادم اینجوری این مشکل رو هم هندل کردیم.
کد های هر لایه جداگانه به صورت زیر هست:
لایه 1:
</LinearLayout> |
نمونه کد 2
نمونه کد 2 داره به لایه 1 اشاره میکنه که قراره یک textview با عبارت Instagram بالای صفحه مون بسازه
برای فونت این عبارت هم میتونید فونت دلخواهتون رو دانلود کنید و به قسمت res برید و یه فولدر جدید به اسمfont بسازید و فونت مورد نظر رو درونش قرار بدید و ازش استفاده کنید.
توضیحات:
برای ساخت فولدر فونت روی res کلیک راست کنید و new و سپس android resource directory رو انتخاب کنید و resource type رو روی font بذارید.به این ترتیب فولدر font ساخت میشه و میتونید فونت های دلخواهتون رو درونش قرار بدید.
لایه2:
<EditText </LinearLayout> |
نمونه کد 3
برای هر کدام یک id نیز تعریف میکنیم که بتونیم ازشون توی کد استفاده کنیم.
توضیحات:
برای Edittext ها و همچنین Button مطابق تصویر شماره 8 عمل میکنیم و یک لایه در پوشه drawableبرای بک گراند آنها میسازیم که کد اونها مطابق زیر است.
بک گراند Edittext:
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#C63A82"></solid> </shape> |
بک گراند button:
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent"></solid> <stroke android:color="#CF5489" android:width="3dp"></stroke> </shape> |
لایه3:
<LinearLayout <TextView <TextView |
نمونه کد 4
توضیحات:
در اینجا برای textview که عبارت Signup رو درون خودش داره یه آیدی تعریف میکنیم به این دلیل که هرگاه روی اون کلیک کنیم از صفحه ورود به صفحه ثبت نام بره.
طراحی ui رو همونطور که ملاحظه کردید به 3 بخش تقسیم کردیم و به صورت جداگانه گذاشتیم کدها رو
اما در اینجا ابتدا کد کامل اون رو میذارم که به صورت زیر هست و سپس میریم برای تعریف ویوها توی بخش کدنویسی اپلیکیشن.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" </LinearLayout> <LinearLayout <EditText </LinearLayout>
<TextView <TextView
|
نمونه کد 5
خب بریم سراغ تعریف ویوها توی اکتویتی مون،میریم توی اکتیویتی مربوط به لایه ای که طراحی کردیم :
ابتدا ویو ها رو به این شکل تعریف میکنیم:
EditText username,password; |
نمونه کد 6
سپس توی onCreate اونها رو با استفاده از آیدی که داشتند به ویوهاشون وصل میکنیم:
username=findViewById(R.id.edt_username_login); |
نمونه کد 6
و بعد برای signup رویداد کلیک تعریف میکنیم که هرگاه روی اون کلیک کنیم به صفحه ثبت نام بره
به این شکل(مطابق نمونه کد8):
signup.setOnClickListener(new View.OnClickListener() { |
نمونه کد 7
و در اخر اکتیویتی ما به صورت زیر است(تصویر شماره9)
طراحی صفحه ورود به این شکل به اتمام رسید.
................ادامه این آموزش را به صورت پی دی اف شده دانلود کنید................
این جلسه آموزشی را میتوانید بصورت کتاب الکترونیکی (PDF شده) در لینک زیر دریافت کنید.
این جلسه آموزشی را بصورت کامل و مرتب شده در لینک زیر دانلود کنید:(در صورت خرابی لینک گزارش دهید)
نشر این مطلب با ذکر منبع (لینک سایت) بلامانع است.
برای با خبر شدن از جدیدترین مطالب آموزشی جاوا عضو کانال تلگرام ما شوید.
بستن *نام و نام خانوادگی * پست الکترونیک * متن پیام |
دوره های آموزشی برنامه نویسی
انجام پروژه های برنامه نویسی
تدریس خصوصی برنامه نویسی
بیش از 7 سال از فعالیت جاواپرو میگذرد
جاواپرو دارای مجوز نشر دیجیتال از وزارت فرهنگ و ارشاد اسلامی است
جهت ارتباط مستقیم با جاواپرو در واتساپ و تلگرام :
09301904690
بستن دیگر باز نشو! |