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

به نام خدا

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

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

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

کتابخانه 1

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

نمونه کد 1

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

نمونه کد 2

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

نمونه کد 3

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

نمونه کد 4

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

نمونه کد 4

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

نمونه کد 5

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

نمونه کد 6

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

نمونه کد 7

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

نمونه کد 8

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

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

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

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

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