menusearch
javapro.ir

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

جستجو
جمعه ۲۳ آذر ۱۴۰۳ | ۰:۲۵:۱۸
۱۳۹۸/۱۱/۲۳ چهارشنبه
(6)
(0)
جلسه ششم:طراحی ui(بخش دوم)
جلسه ششم:طراحی ui(بخش دوم)

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

 

به نام خدا

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


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


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


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


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


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

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


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

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


لایه کلی:

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context="ir.javapro.instagramjavapro.MainActivity">


</LinearLayout>

 

نمونه کد 1


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


لایه 1:

 

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:orientation="vertical">

  <FrameLayout
      android:id="@+id/framelayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#ffffff"/>

</LinearLayout>


نمونه کد 2


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


لایه 2:

 

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="54dp"
  android:background="#ffffff"
  android:orientation="horizontal">

  <LinearLayout
      android:id="@+id/btnhome"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="?attr/ select ableItemBackground"
      android:gravity="center"
      android:orientation="vertical">

      <ImageView
          android:id="@+id/imghome"
          android:layout_width="54dp"
          android:layout_height="54dp"
          android:padding="8dp"
          app:srcCompat="@mipmap/btnhome" />
  </LinearLayout>

  <LinearLayout
      android:id="@+id/btnsearch"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="?attr/ select ableItemBackground"
      android:gravity="center"
      android:orientation="vertical">

      <ImageView
          android:id="@+id/imgsearch"
          android:layout_width="54dp"
          android:layout_height="54dp"
          android:padding="8dp"
          app:srcCompat="@mipmap/btnsearch" />
  </LinearLayout>

  <LinearLayout
      android:id="@+id/btnnewpost"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="?attr/ select ableItemBackground"
      android:gravity="center"
      android:orientation="vertical">

      <ImageView
          android:id="@+id/imgnewpost"
          android:layout_width="54dp"
          android:layout_height="54dp"
          android:padding="8dp"
          app:srcCompat="@mipmap/addpost" />
  </LinearLayout>

  <LinearLayout
      android:id="@+id/btnheart"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="?attr/ select ableItemBackground"
      android:gravity="center"
      android:orientation="vertical">

      <ImageView
          android:id="@+id/imgheart"
          android:layout_width="54dp"
          android:layout_height="54dp"
          android:padding="8dp"
          app:srcCompat="@mipmap/btnlike" />
  </LinearLayout>

  <LinearLayout
      android:id="@+id/btnuser"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="?attr/ select ableItemBackground"
      android:gravity="center"
      android:orientation="vertical">

      <ImageView
          android:id="@+id/imguser"
          android:layout_width="54dp"
          android:layout_height="54dp"
          android:padding="8dp"
          app:srcCompat="@mipmap/btnuser" />
  </LinearLayout>
</LinearLayout>


نمونه کد 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 شده) در لینک زیر دریافت کنید.
این جلسه آموزشی را بصورت کامل و مرتب شده در لینک زیر دانلود کنید:(در صورت خرابی لینک گزارش دهید)

 

 

 

 

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

لینک دانلود کتاب

 

 


نشر این مطلب با ذکر منبع (لینک سایت) بلامانع است.
برای با خبر شدن از جدیدترین مطالب آموزشی جاوا
عضو کانال تلگرام ما شوید.

نظرات کاربران
*نام و نام خانوادگی
* پست الکترونیک
* متن پیام

بستن
*نام و نام خانوادگی
* پست الکترونیک
* متن پیام

0 نظر
هدر سایت
مشاهده سرفصل ها و ثبت نام در دوره Spring Boot جاواپرو  [کلیک کنید]
آموزش پروژه محور اسپرینگ بوت(Spring Boot)-سیستم دانشگاه
ثبت نام در دوره آموزش Spring security
دوره معماری میکروسرویس ها (Microservices) با استفاده از Spring Boot و Spring Cloud
دوره پرتاب | آموزش پیش نیازهای برنامه نویسی
دوره آموزش مبانی زبان برنامه نویسی جاوا
دوره آموزش مفاهیم پیشرفته زبان برنامه نویسی جاوا
مقدمه ای از زبان برنامه نویسی جاوا(java)
آموزش زبان برنامه نویسی جاوا
آموزش گرافیک در زبان برنامه نویسی جاوا
آموزش مدیریت چیدمان گرافیکی در زبان جاوا
آموزش ساخت بازی دوبعدی در زبان جاوا
Collection ها در زبان برنامه نویسی جاوا
آموزش پروژه محور ساخت برنامه مدیریت بانک با JavaFX
نمونه پروژه های رایگان زبان جاوا
آموزش دیتابیس در زبان برنامه نویسی جاوا
نمونه مثال پایه ای زبان برنامه نویسی جاوا
نمونه مثال String در زبان برنامه نویسی جاوا
آموزش جامع برنامه نویسی JavaFX
آموزش ساخت برنامه آزمون تستی در JavaFX
آموزش برنامه نویسی سوکت در جاوا
آموزش ساخت برنامه دفترچه تلفن با JavaFX
آموزش ساخت ربات ساده تلگرام با زبان جاوا
آموزش ساخت برنامه ماشین حساب با JavaFX
آموزش ساخت برنامه ساده مدیریت ایمیل ها با JavaFX
دوره آموزش Spring Boot
سفارش انجام پروژه زبان برنامه نویسی جاوا(JAVA)
سفارش انجام پروژه برنامه نویسی متلب(MATLAB) با قیمت منصفانه و تحویل به موقع
سفارش انجام پروژه زبان برنامه نویسی سی شارپ (#C)
سفارش انجام پروژه زبان برنامه نویسی سی(C)
سفارش انجام پروژه زبان برنامه نویسی پایتون(Python)
سفارش انجام پروژه زبان برنامه نویسی PHP (پی اچ پی)
سفارش انجام پروژه زبان برنامه نویسی اسمبلی(Assembly)
سفارش انجام پروژه زبان برنامه نویسی جاوا اسکریپت (Javascript)
سفارش انجام پروژه هوش مصنوعی
سفارش انجام پروژه طراحی الگوریتم
سفارش انجام پروژه ساختمان داده ها
سفارش انجام پروژه مهندسی نرم افزار
سفارش انجام پروژه شبکه های کامپیوتری
سفارش انجام پروژه پایگاه داده: دیتابیس (database)
 سفارش انجام پروژه سیستم عامل
سفارش انجام پروژه پاورپوینت(PowerPoint)
سفارش انجام پروژه اکسل (Excel)
سفارش انجام تحقیق و تهیه مقاله
سوالات متداول برنامه نویسی
جدیدترین مطالب
گفتگو را شروع کنید
مشاوره ،تدریس خصوصی و سفارش انجام انواع پروژه های برنامه نویسی