menusearch
javapro.ir

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

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

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

 

به نام خدا

 

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

 

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

خب کل لایه مون مشابه تصویر 1 هست
ما 3 تا لایه خطی داریم
ک به طراحی بخش به بخش اون میپردازیم
توی لایه 1 ما یه لایه افقی داریم که یه عکس و 6 تا textview هست که دو به دو زیر هم قرار گرفتن برای نشون دادن اطلاعات کاربرمون.
قبل از طراحی دقیق این لایه دقت کرده باشید تصویر ما دایره ای شکل است که خود اندروید استودیو این قابلیت رو به ما نمیده پس میریم با هم دیگه کتابخونه اش رو اضافه میکنیم که بتونیم از این ویژگی توی طراحیمون استفاده کنیم.

 

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

مثل تصویر 2 عمل میکنیم ابتدا به Gradle script s میریم و بعد از تون به build.gradle(Module:app) میریم

 

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

 

implementation 'com.github.abdularis:circularimageview:+'    


کتابخانه 1


مطابق تصویر 3 کتابخانه 1 رو اضافه میکنیم،تحریم شکن برای شکستن تحریم ها رو روشن میکنیم و sync رو میزنیم تا کتابخانه به پروژه اضافه بشه.
خب میریم برای طراحی جزیی

 

<FrameLayout 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="#ffffff"
  tools:context=".fragments.HomeFragment">

</FrameLayout>


نمونه کد 1


روت کلی لایه مون که یک frameLayout هست چون قراره فرگمنت هامون توش جابجا بشن.
پس ما برای اینکه 3 تا لایه مون خطی زیر هم قرار بگیرن از یک لایه خطی عمودی استفاده میکنیم به این شکل.

 


<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

</LinearLayout>


نمونه کد 2


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

 


<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marg into p="12dp"
  android:gravity="center"
  android:orientation="horizontal"
  android:padding="10dp">

</LinearLayout>

 


نمونه کد 3


یه سری ویژگی دیگه مثل margin و padding رو هم میدیم بهش که لایه مون دقیقا سرجای خودش قرار بگیره
و بعد موارد رو توی این لایه اضافه میکنیم.
ابتدا باید عکس رو اضافه کنیم ولی نه عکس مربع شکل پیش فرض اندروید استودیو
بلکه از عکس دایره ای شکلی استفاده میکنیم که کتابخونه اش رو قبل تر اضافه کردیم.

 


<com.github.abdularis.civ.CircleImageView
  android:id="@+id/circle_user_image"
  android:layout_width="80dp"
  android:layout_height="80dp"
  android:src="@mipmap/userimage"></com.github.abdularis.civ.CircleImageView>

 


نمونه کد 4


خب عکس رو اضافه میکنم و بهش ایدی هم میدیم که بعد بتونیم توی کد ازش استفاده کنیم.
بعدش ما 6 تا تکست ویو داریم که دو به دو زیر هم قرار گرفتن
لایه ما که افقی هست
پس چجوری این کار رو انجام بدیم؟؟!!
خب ساده هست
از 3 تا لایه خطی عمودی کنار عکس استفاده میکنیم و توی هر کدومش 2 تا تکست ویو میذاریم
به همین سادگی

 


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

  <TextView
      android:id="@+id/numofposts"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:hint="0"
      android:text="TextView"
      android:textColor="#000000"
      android:textColorHint="#000000"
      tools:text="0" />

  <TextView
      android:id="@+id/textView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="Posts"
      android:textColor="#000000"
      android:textSize="18sp"
      android:textStyle="bold" />

</LinearLayout>

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

  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="TextView"
      android:textColor="#000000"
      tools:text="0" />

  <TextView
      android:id="@+id/textView4"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="Followers"
      android:textColor="#000000"
      android:textSize="18sp"
      android:textStyle="bold" />

</LinearLayout>

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

  <TextView
       
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="TextView"
      android:textColor="#000000"
      tools:text="0" />

  <TextView
      android:id="@+id/textView5"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="Following"
      android:textColor="#000000"
      android:textSize="18sp"
      android:textStyle="bold" />

</LinearLayout>

 


نمونه کد 4


فراموش نکنید برای textview که قراره تعداد پست ها رو نشون بده یه id بذارید که بعد ازش میخوایم استفاده کنیم.خب طراحی این لایه هم تموم شد.
میریم با هم دیگه لایه 2 رو طراحی میکنیم.

 

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


</LinearLayout>


نمونه کد 5


لایه 2 خیلی سادست
توی این لایه 2 تا textview داریم که قراره یکیش اسم کاربر و اون یکی رو bio رو نگه داره توی خودش و یه button برای اینکه وقتی روش کلیک کردیم بره توی صفحه ویرایش اطلاعات کاربرمون.
من سه تاشو یجا میذارم چون کار خاصی نداره.

 

<TextView
  android:id="@+id/txtname"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:gravity="left"
  android:text="TextView"
  android:textColor="#000000"
  android:textStyle="bold" />

<TextView
  android:id="@+id/txtbio"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="2"
  android:text="TextView"
  android:textColor="#000000" />

<Button
  android:id="@+id/btneditprofile"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:background="@drawable/btneditbg"
  android:text="Edit Profile" />


نمونه کد 6


فقط تنها نکته ای که وجود داره بک گراند button هست که جلسات پیش روش ساختنش در پوشه drawable رو کاملا توضیح دادیم.ابتدا توی drawable یک drawable recourse file جدید ایجاد میکنیم به اسم btneditprofile که کد اون به این صورت است:

 

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

  <solid android:color="@color/Blue"></solid>
  <corners android:radius="8dp"></corners>
  <stroke android:color="#33000000">
  </stroke>
  <stroke android:width="3dp"></stroke>

</shape>


نمونه کد 7


در خصوص رنگ اون شما میتونید یک رنگ جدید در res/values/colors به همین اسم Blue اضافه کنید و در همه جای پروژه از اون استفاده کنید که کد hex این رنگ هم 007ff7 # هست و یا میتونید از همین کد و یا حتی رنگ دلخواه خودتون استفاده کنید.
لایه 2 هم به این شکل به اتمام رسید.
لایه 3 هم لازم نیست کاری رو انجام بدیم و فعلا یه لایه خطی میذاریم تا بعد در صورت لزوم از اون استفاده کنیم.
به این شکل:

 

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

</LinearLayout>


نمونه کد 8


طبق عادت هر جلسه کد کامل لایه رو میذاریم و بد میریم سراغ تعریف لایه ها در سمت کد نویسی.

 

 

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

 


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

 

 

 

 

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

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

 

 


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

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

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

2 نظر
محسن بذرافشان
دوشنبه هشتم شهریور ۰۰
پاسخ
()
()
محسن بذرافشان
دوباره ممنون از آموزشاي خوبتون دوستاني که مثل من مشکل داشتن با لايبرري ميتونن از آموزش زير استفاده کننhttps://www.youtube.com/watch?v=Yl-KxRLYuNw که البته با اين لايبرري کارميکنه https://github.com/hdodenhof/CircleImageView
محسن بذرافشان
دوشنبه هشتم شهریور ۰۰
پاسخ
()
()
محسن بذرافشان
سلام. خيلي خيلي ممنونم از آموزش هاي خوبتون. من تو اين آموزش به يک مشکل برخوردم. بعد از اينکه کتابخانه رو سينک کردم تو کد ايکس ام ال فرگمنت يوزر
هدر سایت
دوره برنامه نویسی 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)
سفارش انجام تحقیق و تهیه مقاله
سوالات متداول برنامه نویسی
جدیدترین مطالب