جلسه ششم:طراحی ui(بخش دوم)

شنبه ۶ مرداد ۱۴۰۳ | ۱۱:۱۱:۴۶

آموزش برنامه نویسی » آموزش ساخت برنامه ای شبیه به اینستاگرام » آموزش برنامه نویسی اندروید »

۱۳۹۸/۱۱/۲۳ چهارشنبه

(6)

(0)

جلسه ششم:طراحی ui(بخش دوم)

دوره رایگان آموزش پروژه محور اندروید ساخت برنامه اینستاگرام

به نام خدا

عرض سلام و درود خدمت شما همراهان عزیز
امیدوام حالتون خوب باشه
جلسه قبل ما ui صفحات ورود و ثبت نام رو با همدیگر طراحی کردیم
این جلسه ما میخوایم ui صفحه اصلی اینستاگرام رو طراحی کنیم

بدون مقدمه میریم سر اصل مطلب

آموزش پروژه محور ساخت برنامه اندروید اینستاگرام
خب تصویر 1 همه اون چیزی هست که ما باید امروز طراحی کنیم

اینستاگرامتون رو باز کنید میبینید که لایه 1 فیکسه و تو همه صفحات هست و صفحات مختلف مثل صفحه سرچ،پروفایل و غیره توی لایه 2 جابجا میشن پس حواسمون باشه این مورد رو هم رعایت کنیم.
برای طراحی لایه 1 ما چندتا ایکون نیاز داریم

اگه با adobe XD کار کرده باشید که میتونید ایکون ها رو با استفاده از این نرم افزار بردارید

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

دانلود آیکون های مورد نیاز

بعد از دانلود آیکون ها را در آدرس زیر کپی کنید(res/mipmap).

خب من اینجا لایه 2 رو بزرگنمایی میکنم با جزییات آشنا بشید تا برسیم به پیاده سازی جزیی.

آموزش رایگان پروژه محور اندروید
خب ما توی تصویر 2 چی میبینیم
یه لایه خطی افقی(horizontal) هست که در درونش چندتا آیکون کنار هم به صورت افقی قرار گرفتن.
خب من اومدم واسه هر ایکون هم یک لایه خطی جدا گذاشتم (خطوط آبی توی تصویر 2)
خب تا اینجا چی شد پس
شد یه لایه خطی افقی کلی
که 5 تا لایه خطی دیگه داخلشه و درون هر کدوم از این لایه ها یه آیکون داریم.
خب حالا طبق روال همیشه مون میریم و طراحی رو مرحله به مرحله پیش میبریم.
برای طراحی لایه ها هم از اکتیویتی و لایه ای که اندروید استودیو به صورت پیش فرض موقع ساخت پروژه برامون ساخته استفاده میکنیم(MainActivity).

لایه کلی:

</LinearLayout>

نمونه کد 1

نمونه کد 1 فرم کلی لایه رو مشخص میکنه که خطی از نوع عمودی هست.
خب حالا تصویر 1 رو ببینید ما کلا 2 تا لایه داریم
لایه 1 یدونه framelayout میذاریم که صفحه های مختلف قراره درونش جابجا بشن
و لایه 2 هم که آیکون ها قرار دارن و مثل برنامه اینستاگرام با کلیک روی اونها به صفحه های مربوطه شون میریم.
خب حالا بریم برای طراحی جزیی لایه ها:

لایه 1:

</LinearLayout>

نمونه کد 2

نمونه کد 2 داره به لایه 1 اشاره میکنه و نکته خاصی هم دیده نمیشه درونش جز اینکه فراموش نکنیم برای framelayout یک آیدی تعریف کنیم تا بعد بتونیم توی کد نویسی از اون استفاده کنیم.

لایه 2:

نمونه کد 3

نمونه کد 3 داره به لایه 2 اشاره میکنه همونطورکه پیش تر توضیح دادم یک لایه خطی افقی هست که 5 تا لایه خطی دیگه درونش هست و درون هر یک از این لایه ها یک آیکون هست که تصویرش رو از فولدر mipmap که قبلا اضافه کردیم برمیداریم.
برای هر کدام از لایه ها و عکس ها نیز یک id تعریف می‌کنیم که در کد نویسی از اون استفاده کنیم.

توضیحات:

android:background="?attr/ select ableItemBackground"

• اگر اینستاگرامتون رو باز کنید و روی آیکون ها کلیک کنید یه هاله شناوری پشت آیکون ها میبینید.این ویژگی در نمونه کد 3 چنین امکانی را به ما میدهد.

تعریف ویو ها در کد نویسی:

برای اینکه بتونیم از ویوهامون استفاده کنیم باید اونها رو به وسیله همین id ها در سمت کدنویسی تعریف کنیم
خب با هم بریم اینکار رو انجام بدیم.

ImageView imghome,imgsearch,imgnewpost,imgheart,imguser;
LinearLayout btnhome,btnsearch,btnnewpost,btnheart,btnuser;

نمونه کد 4

ابتدا آیکون ها که از نوع ImageView و لایه های پدرشون که از نوع LinearLayout هستند رو تعریف میکنیم.

imghome=findViewById(R.id.imghome);
imgsearch=findViewById(R.id.imgsearch);
imgnewpost=findViewById(R.id.imgnewpost);
imgheart=findViewById(R.id.imgheart);
imguser=findViewById(R.id.imguser);

btnhome=findViewById(R.id.btnhome);
btnsearch=findViewById(R.id.btnsearch);
btnnewpost=findViewById(R.id.btnnewpost);
btnheart=findViewById(R.id.btnheart);
btnuser=findViewById(R.id.btnuser);

نمونه کد 5

بعد در متد onCreate اونها رو به ویوها ست میکنیم(مطابق نمونه کد5).
خب تا اینجا ما لایه مون رو طراحی کردیم و توی کد نویسی هم ویوها رو ست کردیم.
یکبار دیگه برید توی برنامه اینستاگرامتون و به این مواردی که عرض میکنم دقت کنید
شما با هر بار کلیک روی آیکون های پایین به یک صفحه میرید و آیکون متناظر با همون صحفه هم تغییر رنگ میده و پر رنگ میشه خب پس بریم اینکار رو هم انجام بدیم.
ما برای هر صفحه به جای اینکه ازActivity استفاده کنیم از Fragment استفاده میکنیم.
اگر دوره مقدماتی رو گذرونده باشید احتمالا میدونید فرگمنت چی هست اگر هم نه بنده توضیح مختصری میدم الان و ان شاالله به زودی در دوره مقدماتی به صورت جامع خدمت شما عزیزان عرض خواهیم کرد.
فرگمنت مشابه اکتیویتی هست اما به قول معروف جمع و جورتر و سبک تر هست نسبت به اکتیویتی.
از این جهت مشابه اکتیویتی هست که یک لایه برای خودش داره
ولی مثل اکتیویتی از خودش context نداره و برای اجرا به یک بستر نیاز داره.
تا همینقدر کافیه بدونید
بریم فرگمنت هامون رو بسازیم.
خب ما 4 فرگمنت نیاز داریم
1-برای صفحه اصلی
2-برای صفحه سرچ
3-برای صفحه هایلایت ها
4- برای صفحه پروفایل کاربر
برای اضافه کردن پست نیز میتونیم فرگمنت بذاریم اما ما اینجا میخوایم برای این صفحه از Activity استفاده کنیم پس 4 اکتیویتی کفایت میکنه.
برای ساخت فرگمنت هامون مثل جلسه پنجم ابتدا یک پکیج جدید میسازیم به اسم fragments.

آموزش رایگان پروژه محور اندروید
مطابق مراحل مشخص شده در تصویر 3 ابتدا روی پکیج جدیدمون به اسم fragments که ساختیم کلیک راست میکنیم و یک فرگمنت از نوع blank میسازیم.

آموزش پروژه محور اندروید ساخت برنامه اینستاگرام
اسم اون رو میذاریم HomeFragment و تیک create layout XML رو هم میزنیم که برامون یک لایه هم بسازه و روی finish کلیک میکنیم تا فرگمنت ما ساخته بشه.
آموزش رایگان پروژه محور اندروید
فرگمنت ما پس از ساخته شدن موارد اضافی زیادی رو داره که ما بهش نیازی نداریم پس اضافی ها رو پاک کنید تا فرگمنت ما ساده و قابل فهم مانند تصویر 5 شود.
مثل مراحل بالا 3 فرگمنت دیگر به نام های SearchFragment,HighlightFragment,UserFragment بسازید.
خب حالا بریم جابجا شدن بین فرگمنت ها و همچنین تغییر آیکون ها رو انجام بدیم با هم.
قراره ما اگر به عنوان مثال روی سرچ کلیک کردیم بره توی صفحه سرچ و آیکون سرچ به تنهایی رنگش عوض شه و بقیه هم به همون شکل پیش فرض باقی بمونن.
ابتدا ما میایم واسط کلیک رو برای کل کلاسمون implements میکنیم به این شکل:

public class MainActivity extends AppCompatActivity implements View.OnClickListener

نمونه کد 6

بعد alt+inter رو میزنیم و متد ()onClick برای ما اضافه میشه.
خب حالا توی این متد باید بهش بگیم که اگر فلان جا کلیک شد این کار رو انجام بده

به کمک switch این کار رو انجام میدیم به این شکل:

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btnhome:

break;

case R.id.btnsearch:

break;

case R.id.btnnewpost:

break;

case R.id.btnheart:

break;

case R.id.btnuser:

break;
}
}

نمونه کد 7

خب تا اینجا با کمک گرفتن از switch این کار رو انجام دادیم
حالا باید بگیم روی هرکدوم کلیک شد اون آیکون عوض شه و با کمک framelayout به همون صفحه هم بره
*نکته:ما برای راحت تر بودن کاربر برای کلیک روی آیکون ها از لایه پدر اون ها برای کلیک استفاده کردیم.

به این شکل:

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btnhome:
imghome.setImageResource(R.mipmap.btnhome1);
getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,new HomeFragment()).commit();

break;

case R.id.btnsearch:
imgsearch.setImageResource(R.mipmap.btnsearch1);
getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,new SearchFragment()).commit();
break;

case R.id.btnnewpost:

break;

case R.id.btnheart:
imgheart.setImageResource(R.mipmap.btnheart1);
getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,new HighlightFragment()).commit();
break;

case R.id.btnuser:
imguser.setImageResource(R.mipmap.btnuser1);
getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,new UserFragment()).commit();
break;
}
}

نمونه کد 8

توضیحات:

imgheart.setImageResource(R.mipmap.btnheart1);

نمونه کد 9

با استفاده از نمونه کد 9 ما شکل آیکون ها رو عوض می‌کنیم.

getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,new HomeFragment()).commit();

نمونه کد 10

با استفاده از نمونه کد 10 بین فرگمنت ها جابجا میشیم.
خب هنوز یه باگ وجود داره
خب فرض کنید ما توی صفحه سرچ بودیم
کلیک میکنیم روی صفحه پروفایل کاربر
آیکون پروفایل کاربر باید رنگ جدید به خودش بگیره و آیکون سرچ باید به حالت اولیه خودش برگرده اما برنمیگرده پس بریم این مشکل رو هم حل کنیم
برای اینکه جلوگیری کنیم از کد نویسی اضافه با استفاده از متد اینکار رو میکنیم به این صورت:

public void changeIcons(){
imghome.setImageResource(R.mipmap.btnhome);
imgsearch.setImageResource(R.mipmap.btnsearch);
imgheart.setImageResource(R.mipmap.btnlike);
imguser.setImageResource(R.mipmap.btnuser);
}

نمونه کد 11

توی این متد همه آیکون ها رو به رنگ پیش فرضشون در میان پس وقتی روی آیکون ها کلیک میکنیم اول از همه صداش میزنیم تا ایکون ها پیش فرض بشن و بعد همون ایکون که روش کلیک کردیم پر رنگ میشه.
فقط دو تا نکته هست یکیش اینکه فراموش نکنید در onCreate رویداد های کلیک روی لایه ها رو تعریف کنید به این شکل:

btnhome.setOnClickListener(this);
btnsearch.setOnClickListener(this);
btnnewpost.setOnClickListener(this);
btnheart.setOnClickListener(this);
btnuser.setOnClickListener(this);

نمونه کد 12

دومش هم اینکه وقتی اپلیکیشن اجرا میشه مطابق اینستاگرام باید به صورت پیش فرض در صفحه home باشیم پس باز هم در onCreate این باگ رو هندل میکنیم به این شکل:

imghome.setImageResource(R.mipmap.btnhome1);
getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,new HomeFragment()).commit();

نمونه کد 13

................ادامه این آموزش را به صورت پی دی اف شده دانلود کنید................

این جلسه آموزشی را می‌توانید بصورت کتاب الکترونیکی (PDF شده) در لینک زیر دریافت کنید.
این جلسه آموزشی را بصورت کامل و مرتب شده در لینک زیر دانلود کنید:(در صورت خرابی لینک گزارش دهید)