JavaPro

خلاصه مطلب

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

نوع محتوامقاله آموزشی

موضوعآموزش برنامه نویسی »

زمان مطالعه۵ دقیقه

آخرین ویرایش۷ اسفند ۱۳۹۸

به نام خدا

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

خب چیزی که ما باید طراحی کنیم به این شکل هست لایه 1 خطی و افقی هست لایه 2 که ما در اینجا از لایه استفاده نکردیم و تصویر رو مستقیما در روت کلی قرار میدیم لایه 3 یه لایه خطی و افقی هست لایه 4 هم یک لایه خطی عمودی هست خب برای طراحی لایه ابتدا ما یک لایه جدید بدون اکتیوتی به نام post می سازیم روت کلی رو به این شکل میگذاریم:

نمونه کد 1

خب روت کلی به این شکل هست و ما 4 لایه رو قراره درون این روت قرار بدیم. ابتدا میریم و لایه 1 رو میسازیم روت لایه 1 به این شکل می باشد:

نمونه کد 2

ابتدا درون این لایه یک تصویر که تصویر کاربر است و از نوع circle image view که قبلا کتابخانه اش رو اضافه کردیم قرار میدیم و یک id مناسب نیز تعریف میکنیم. برای username و location نیز دوباره به یک لایه خطی ولی از نوع عمودی درون این لایه افقی نیاز داریم که هر دو Textview را درون خود و به صورت عمودی نگه دارد.

به این شکل:

نمونه کد 3

تعریف id برای textview ها فراموش نشود.

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

نمونه کد 4

ببینید عکس ها اندازه های مختلفی دارن اگر ما یه سایز به این عکس ها بدیم عکس هایی که از این سایز بزرگتر باشن رو ناقص به کابر نشون میده خب چجوری این مشکل رو هندل کنیم یه خاصیت داریم به اسم scaletype اینو ما روی fitCenter میذاریم و adjustViewBounds رو قرار میدیم true با استفاده از این دو خاصیت این مشکل نیز حل میشه. بریم و لایه 3 رو طراحی کنیم ابتدا روت کلی این لایه رو میذاریم که خطی و از نوع افقی هست به این شکل:

نمونه کد 5

درون این لایه نیز 4 تصویر وجود دارد که نیازی به توضیح اضافی ندارد دقت داشته باشید برخی این ایکون ها استفاده ای ندارند و برای زیبایی بیشتر قرار داده ایم مانند ایکون کامنت،ارسال،ذخیره هر چند شما پس از گذراندن این دوره قادر خواهید بود این موارد را به صورت دلخواه پیاده سازی کنید.

نمونه کد 6

ایکون ها رو مطابق نمونه کد 6 اضافه میکنیم و برای آنهایی که نیاز داریم id تعریف میکنیم. خب بریم و لایه 4 رو طراحی کنیم. طراحی لایه 4 نیز مثل بقیه لایه ها ساده هست ابتدا ما باید یک لایه خطی عمودی بسازیم و دوتا textview درون اون قرار بدیم به همین سادگی

نمونه کد 7

طراحی لایه پستمون به این شکل به اتمام رسید ابتدا کد xml کلی لایه رو میذارم و بعد میریم برای ادامه کار:

نمونه کد 8

خب ما نیاز داریم که این ویو رو که طراحی کردیم یجا نگه داریم و ایدی ها رو تعریف کنیم. پس میریم این کلاس رو میسازیم ابتدا یه پکیچ جدید میسازیم به اسم ListAdapter توی اون یه کلاس جدید میسازیم به اسم PostHolder که باید از RecyclerView.ViewHolder ارث بری کنه به این شکل:

public class PostHolder extends RecyclerView.ViewHolder

نمونه کد 9

در اینجا یه ارور میگیره که با زدن کلید های ترکیبی alt+enter از ما خواسته میشه که سازنده override بشه ما این کار رو انجام میدیم و سازنده PostHolder برای ما override میشه حالا مطابق همیشه ویوها رو تعریف میکنیم به این شکل:

ImageView postimage,btnlike; CircleImageView userimage; TextView username,usernamebelow,caption;

نمونه کد 10

و بعد در سازنده که به تازگی override شد با استفاده از ایدی ها ویوها رو تعریف میکنیم:

userimage=itemView.findViewById(R.id.userimage); postimage=itemView.findViewById(R.id.postimage); btnlike=itemView.findViewById(R.id.postlike); username=itemView.findViewById(R.id.userid); usernamebelow=itemView.findViewById(R.id.useridbelow); caption=itemView.findViewById(R.id.postcaption);

نمونه کد 11

کد انتهایی کلاسمون به این شکل هست:

public class PostHolder extends RecyclerView.ViewHolder { ImageView postimage,btnlike; CircleImageView userimage; TextView username,usernamebelow,caption; public PostHolder(@NonNull View itemView) { super(itemView); userimage=itemView.findViewById(R.id.userimage); postimage=itemView.findViewById(R.id.postimage); btnlike=itemView.findViewById(R.id.postlike); username=itemView.findViewById(R.id.userid); usernamebelow=itemView.findViewById(R.id.useridbelow); caption=itemView.findViewById(R.id.postcaption); } }

نمونه کد 12

بعد از اون به یک اداپتر نیاز داریم تا پست ها رو برامون لیست کنه پس در همین پکیج جدید که ساختیم یه کلاس دیگه به اسم PostAdapter میسازیم که باید از RecyclerView.Adapter ارث بری کنه به این شکل:

public class PostAdapter extends RecyclerView.Adapter

نمونه کد 13

توضیحات:

بعد از انجام ارث بری ارور میگیره که باید متدها ایمپلمنت بشن با زدن alt+enter این کار رو انجام میدیم تا 3 تا متد ایمپلمنت بشن. در قدم بعد ما به یک Context و یک Layout inflater نیاز داریم. این دو رو میسازیم:

Context context; LayoutInflater inflater;

نمونه کد 14

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

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