menusearch
javapro.ir

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

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

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

 

 

عرض سلام خدمت دوستان عزیز امیدوارم احوالتون خوب باشه


خب طبق قرارمون این جلسه با بخش اول طراحی ui خدمتتون هستیم.


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


این جلسه میخوایم 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 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:orientation="vertical"
  android:background="@drawable/bg_login"
  android:layout_height="match_parent"
  android:gravity="center"
  tools:context=".Login.LoginActivity">

 

</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
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:orientation="vertical"
  android:gravity="bottom|center"
  >
  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:layout_marginBottom="10dp"
      android:fontFamily="@font/stromcrow_regular"
      android:text="instagram"
      android:textColor="#ffffff"
      android:textSize="60dp"></TextView>

 

</LinearLayout>


نمونه کد 2


نمونه کد 2 داره به لایه 1 اشاره میکنه که قراره یک textview با عبارت Instagram بالای صفحه مون بسازه
برای فونت این عبارت هم میتونید فونت دلخواهتون رو دانلود کنید و به قسمت res برید و یه فولدر جدید به اسمfont بسازید و فونت مورد نظر رو درونش قرار بدید و ازش استفاده کنید.


توضیحات:


برای ساخت فولدر فونت روی res کلیک راست کنید و new و سپس android resource directory رو انتخاب کنید و resource type رو روی font بذارید.به این ترتیب فولدر font ساخت میشه و میتونید فونت های دلخواهتون رو درونش قرار بدید.

 

لایه2:

 


<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:orientation="vertical"
  android:gravity="center"
  android:layout_weight="2">

  <EditText
      android:id="@+id/edt_username_login"
      android:layout_width="match_parent"
      android:layout_height="54dp"
      android:layout_marginLeft="20dp"
      android:layout_marginRight="20dp"
      android:hint="Username"
      android:padding="10dp"
      android:background="@drawable/bg_edit_login"
      android:textColorHint="#ffffff"
      ></EditText>
  <EditText
      android:id="@+id/edt_password_login"
      android:layout_width="match_parent"
      android:layout_height="54dp"
      android:layout_marginLeft="20dp"
      android:layout_marg into p="10dp"
      android:layout_marginRight="20dp"
      android:hint="Password"
      android:padding="10dp"
      android:background="@drawable/bg_edit_login"
      android:textColorHint="#ffffff"
      ></EditText>
  <Button
      android:id="@+id/btn_login"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Login"
      android:layout_marginRight="30dp"
      android:layout_marginLeft="30dp"
      android:textColor="#CF5489"
      android:background="@drawable/btn_login"
      android:layout_marg into p="10dp"
      ></Button>

</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
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:orientation="horizontal"
  android:gravity="bottom|center"
  >

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="8dp"
      android:text="Don't have an account?"
      android:textColor="#ffffff"></TextView>

  <TextView
      android:id="@+id/btn_signup_login"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="8dp"
      android:text="Signup"
      android:textColor="#ffffff"
      android:textSize="16dp"
      android:textStyle="bold"></TextView>
</LinearLayout>


نمونه کد 4

 

توضیحات:


در اینجا برای textview که عبارت Signup رو درون خودش داره یه آیدی تعریف می‌کنیم به این دلیل که هرگاه روی اون کلیک کنیم از صفحه ورود به صفحه ثبت نام بره.

 

طراحی ui رو همونطور که ملاحظه کردید به 3 بخش تقسیم کردیم و به صورت جداگانه گذاشتیم کدها رو
اما در اینجا ابتدا کد کامل اون رو میذارم که به صورت زیر هست و سپس میریم برای تعریف ویوها توی بخش کدنویسی اپلیکیشن.

 

<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:orientation="vertical"
  android:background="@drawable/bg_login"
  android:layout_height="match_parent"
  android:gravity="center"
  tools:context=".Login.LoginActivity">
<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:orientation="vertical"
  android:gravity="bottom|center"
  >
  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:layout_marginBottom="10dp"
      android:fontFamily="@font/stromcrow_regular"
      android:text="instagram"
      android:textColor="#ffffff"
      android:textSize="60dp"></TextView>

</LinearLayout>

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:orientation="vertical"
      android:gravity="center"
      android:layout_weight="2">

      <EditText
          android:id="@+id/edt_username_login"
          android:layout_width="match_parent"
          android:layout_height="54dp"
          android:layout_marginLeft="20dp"
          android:layout_marginRight="20dp"
          android:hint="Username"
          android:padding="10dp"
          android:background="@drawable/bg_edit_login"
          android:textColorHint="#ffffff"
          ></EditText>
      <EditText
          android:id="@+id/edt_password_login"
          android:layout_width="match_parent"
          android:layout_height="54dp"
          android:layout_marginLeft="20dp"
          android:layout_marg into p="10dp"
          android:layout_marginRight="20dp"
          android:hint="Password"
          android:padding="10dp"
          android:background="@drawable/bg_edit_login"
          android:textColorHint="#ffffff"
          ></EditText>
      <Button
          android:id="@+id/btn_login"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="Login"
          android:layout_marginRight="30dp"
          android:layout_marginLeft="30dp"
          android:textColor="#CF5489"
          android:background="@drawable/btn_login"
          android:layout_marg into p="10dp"
          ></Button>

  </LinearLayout>


  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:orientation="horizontal"
      android:gravity="bottom|center"
      >

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginBottom="8dp"
          android:text="Don't have an account?"
          android:textColor="#ffffff"></TextView>

      <TextView
          android:id="@+id/btn_signup_login"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginBottom="8dp"
          android:text="Signup"
          android:textColor="#ffffff"
          android:textSize="16dp"
          android:textStyle="bold"></TextView>
  </LinearLayout>


</LinearLayout>


نمونه کد 5


خب بریم سراغ تعریف ویوها توی اکتویتی مون،میریم توی اکتیویتی مربوط به لایه ای که طراحی کردیم :
ابتدا ویو ها رو به این شکل تعریف می‌کنیم:

EditText username,password;
Button login;
TextView signup;


نمونه کد 6


سپس توی onCreate اونها رو با استفاده از آیدی که داشتند به ویوهاشون وصل می‌کنیم:

 

username=findViewById(R.id.edt_username_login);
password=findViewById(R.id.edt_password_login);
login=findViewById(R.id.btn_login);
signup=findViewById(R.id.btn_signup_login);


نمونه کد 6


و بعد برای signup رویداد کلیک تعریف میکنیم که هرگاه روی اون کلیک کنیم به صفحه ثبت نام بره
به این شکل(مطابق نمونه کد8):

 

signup.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
      startActivity(new Intent(LoginActivity.this,SignupActivity.class));
      finish();
  }
});


نمونه کد 7

 

 

و در اخر اکتیویتی ما به صورت زیر است(تصویر شماره9)

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

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


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

 


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

 

 

 

 

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

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

 

 


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

 

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

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

2 نظر
پوریا
جمعه دوازدهم اردیبهشت ۹۹
پاسخ
(1)
()
پوریا
سلام، اگه آموزش به صورت ويديويي بود خيلي بهتر بود.
علی
یکشنبه چهارم اسفند ۹۸
پاسخ
(0)
()
علی
سلام خسته نباشيد بسيار عالي
پاسخ مدیر سایت
سلام.مرسی از محبت شما علی جان
پاسخ مدیر سایت
هدر سایت
دوره برنامه نویسی Spring Core
مشاهده سرفصل ها و ثبت نام در دوره 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)
سفارش انجام تحقیق و تهیه مقاله
سوالات متداول برنامه نویسی
جدیدترین مطالب