به نام خدا
عرض سلام و درود خدمت شما دوستان عزیز و همراهان همیشگی سایت جاوا پرو
این جلسه با طراحی لیست پست های صفحه اصلی برناممون در خدمت شما هستیم.
در لیست ها معمولا یک طرح خاص چندین بار تکرار میشود.
به عنوان مثال اگر صفحه اینستاگرامتون رو باز کنید میبینید که پست ها در قالب یک طرح خاص به ما نشان داده میشود و برای هر پست این طرح هر بار تکرار میشود.
طرحی که میخوایم تکرار شه رو ابتدا طراحی میکنیم و سپس میریم و لیست اینچنینی رو طراحی میکنیم.
طرح کلی به این شکل است:
خب چیزی که ما باید طراحی کنیم به این شکل هست
لایه 1 خطی و افقی هست
لایه 2 که ما در اینجا از لایه استفاده نکردیم و تصویر رو مستقیما در روت کلی قرار میدیم
لایه 3 یه لایه خطی و افقی هست
لایه 4 هم یک لایه خطی عمودی هست
خب برای طراحی لایه
ابتدا ما یک لایه جدید بدون اکتیوتی به نام post میسازیم
روت کلی رو به این شکل میگذاریم:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" </LinearLayout> |
نمونه کد 1
خب روت کلی به این شکل هست و ما 4 لایه رو قراره درون این روت قرار بدیم.
ابتدا میریم و لایه 1 رو میسازیم
روت لایه 1 به این شکل است:
<LinearLayout </LinearLayout> |
نمونه کد 2
ابتدا درون این لایه یک تصویر که تصویر کاربر است و از نوع circle image view که قبلا کتابخانه اش رو اضافه کردیم قرار میدیم و یک id مناسب نیز تعریف میکنیم.
برای username و location نیز دوباره به یک لایه خطی ولی از نوع عمودی درون این لایه افقی نیاز داریم که هر دو Textview را درون خود و به صورت عمودی نگه دارد.
به این شکل:
<com.github.abdularis.civ.CircleImageView <LinearLayout <TextView </LinearLayout> |
نمونه کد 3
تعریف id برای textview ها فراموش نشود.
خب لایه 2 که ساده هست و یک عکس هست ولی باید یک نکته رو به یاد داشته باشیم
عکس رو اضافه میکنم و اون نکته رو توضیح میدم خدمتتون
<ImageView android:id="@+id/postimage" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" app:srcCompat="@mipmap/userimage" /> |
نمونه کد 4
ببینید عکس ها اندازه های مختلفی دارن
اگر ما یه سایز به این عکس ها بدیم عکس هایی که از این سایز بزرگتر باشن رو ناقص به کابر نشون میده
خب چجوری این مشکل رو هندل کنیم
یه خاصیت داریم به اسم scaletype
اینو ما روی fitCenter میذاریم و adjustViewBounds رو قرار میدیم true
با استفاده از این دو خاصیت این مشکل نیز حل میشه.
بریم و لایه 3 رو طراحی کنیم
ابتدا روت کلی این لایه رو میذاریم که خطی و از نوع افقی هست به این شکل:
<LinearLayout </LinearLayout> |
نمونه کد 5
درون این لایه نیز 4 تصویر وجود دارد که نیازی به توضیح اضافی ندارد
دقت داشته باشید برخی این ایکون ها استفاده ای ندارند و برای زیبایی بیشتر قرار داده ایم مانند ایکون کامنت،ارسال،ذخیره
هر چند شما پس از گذراندن این دوره قادر خواهید بود این موارد را به صورت دلخواه پیاده سازی کنید.
<ImageView <ImageView android:layout_width="48dp" <ImageView android:layout_width="48dp" <Space <ImageView android:layout_width="48dp" |
نمونه کد 6
ایکون ها رو مطابق نمونه کد 6 اضافه میکنیم و برای آنهایی که نیاز داریم id تعریف میکنیم.
خب بریم و لایه 4 رو طراحی کنیم.
طراحی لایه 4 نیز مثل بقیه لایه ها ساده هست
ابتدا ما باید یک لایه خطی عمودی بسازیم و دوتا textview درون اون قرار بدیم
به همین سادگی
<TextView <TextView |
نمونه کد 7
طراحی لایه پستمون به این شکل به اتمام رسید
ابتدا کد xml کلی لایه رو میذارم و بعد میریم برای ادامه کار:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <LinearLayout <com.github.abdularis.civ.CircleImageView <LinearLayout
</LinearLayout>
<ImageView <LinearLayout <ImageView <ImageView android:layout_width="48dp" <ImageView android:layout_width="48dp" <Space <ImageView android:layout_width="48dp" </LinearLayout> <LinearLayout <TextView <TextView
|
نمونه کد 8
خب ما نیاز داریم که این ویو رو که طراحی کردیم یجا نگه داریم و ایدی ها رو تعریف کنیم.
پس میریم این کلاس رو میسازیم
ابتدا یه پکیچ جدید میسازیم به اسم ListAdapter
توی اون یه کلاس جدید میسازیم به اسم PostHolder که باید از RecyclerView.ViewHolder ارث بری کنه به این شکل:
public class PostHolder extends RecyclerView.ViewHolder |
نمونه کد 9
در اینجا یه ارور میگیره که با زدن کلید های ترکیبی alt+enter از ما خواسته میشه که سازنده override بشه
ما این کار رو انجام میدیم و سازنده PostHolder برای ما override میشه
حالا مطابق همیشه ویوها رو تعریف میکنیم به این شکل:
ImageView postimage,btnlike; |
نمونه کد 10
و بعد در سازنده که به تازگی override شد با استفاده از ایدی ها ویوها رو تعریف میکنیم:
userimage=itemView.findViewById(R.id.userimage); |
نمونه کد 11
کد انتهایی کلاسمون به این شکل هست:
public class PostHolder extends RecyclerView.ViewHolder { public PostHolder(@NonNull View itemView) { |
نمونه کد 12
بعد از اون به یک اداپتر نیاز داریم تا پست ها رو برامون لیست کنه
پس در همین پکیج جدید که ساختیم یه کلاس دیگه به اسم PostAdapter میسازیم که باید از RecyclerView.Adapter<PostHolder> ارث بری کنه به این شکل:
public class PostAdapter extends RecyclerView.Adapter<PostHolder> |
نمونه کد 13
توضیحات:
بعد از انجام ارث بری ارور میگیره که باید متدها ایمپلمنت بشن
با زدن alt+enter این کار رو انجام میدیم تا 3 تا متد ایمپلمنت بشن.
در قدم بعد ما به یک Context و یک Layout inflater نیاز داریم.
این دو رو میسازیم:
Context context; |
نمونه کد 14
ادامه این جلسه آموزشی را به صورت پی دی اف شده و مرتب شده در لینک زیر دانلود کنید......
این جلسه آموزشی را میتوانید بصورت کتاب الکترونیکی (PDF شده) در لینک زیر دریافت کنید.
این جلسه آموزشی را بصورت کامل و مرتب شده در لینک زیر دانلود کنید:(در صورت خرابی لینک گزارش دهید)
نشر این مطلب با ذکر منبع (لینک سایت) بلامانع است.
برای با خبر شدن از جدیدترین مطالب آموزشی جاوا عضو کانال تلگرام ما شوید.
بستن *نام و نام خانوادگی * پست الکترونیک * متن پیام |
دوره های آموزشی برنامه نویسی
انجام پروژه های برنامه نویسی
تدریس خصوصی برنامه نویسی
بیش از 7 سال از فعالیت جاواپرو میگذرد
جاواپرو دارای مجوز نشر دیجیتال از وزارت فرهنگ و ارشاد اسلامی است
جهت ارتباط مستقیم با جاواپرو در واتساپ و تلگرام :
09301904690
بستن دیگر باز نشو! |