menusearch
javapro.ir

جلسه دهم:طراحی لیست پست ها

جستجو
شنبه ۶ مرداد ۱۴۰۳ | ۶:۳۱:۱۷
۱۳۹۸/۱۲/۶ سه شنبه
(1)
(0)
جلسه دهم:طراحی لیست پست ها
جلسه دهم:طراحی لیست پست ها

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

 

به نام خدا

 

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


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

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

 

<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:background="#ffffff"
  android:layout_height="wrap_content"
  android:orientation="vertical">

</LinearLayout>


نمونه کد 1


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

 

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">

</LinearLayout>


نمونه کد 2


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


به این شکل:

 

<com.github.abdularis.civ.CircleImageView
  android:id="@+id/userimage"
  android:layout_width="70dp"
  android:layout_height="70dp"
  android:padding="8dp"
  android:src="@mipmap/userimage"
  tools:srcCompat="@mipmap/userimage" />

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

  <TextView
      android:id="@+id/userid"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginLeft="12dp"
      android:layout_marg into p="15dp"
      android:text="Username"
      android:textColor="#000000"
      android:textSize="18sp"
      android:textStyle="bold"/>
   
<TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Location"
      android:textColor="#000000"
      android:layout_marginLeft="12dp"
      ></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
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">

</LinearLayout>


نمونه کد 5


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

 

<ImageView
  android:id="@+id/postlike"
  android:layout_width="48dp"
  android:layout_height="48dp"
  android:padding="10dp"
  app:srcCompat="@mipmap/btnlike" />

<ImageView

  android:layout_width="48dp"
  android:layout_height="48dp"
  app:srcCompat="@mipmap/commenticon" />

<ImageView

  android:layout_width="48dp"
  android:layout_height="48dp"
  android:padding="10dp"
  app:srcCompat="@mipmap/btnshare" />

<Space
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="1" />

<ImageView

  android:layout_width="48dp"
  android:layout_height="48dp"
  android:padding="10dp"
  app:srcCompat="@mipmap/btnbookmark" />

 

نمونه کد 6


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

 


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

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

  <TextView
      android:id="@+id/postcaption"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="caption"
      android:textColor="#000000"
      />
</LinearLayout>


نمونه کد 7


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

 

<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:background="#ffffff"
  android:layout_height="wrap_content"
  android:orientation="vertical">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">

      <com.github.abdularis.civ.CircleImageView
          android:id="@+id/userimage"
          android:layout_width="70dp"
          android:layout_height="70dp"
          android:padding="8dp"
          android:src="@mipmap/userimage"
          tools:srcCompat="@mipmap/userimage" />

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


          <TextView
              android:id="@+id/userid"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginLeft="12dp"
              android:layout_marg into p="15dp"
              android:text="Username"
              android:textColor="#000000"
              android:textSize="18sp"
              android:textStyle="bold" />
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Location"
              android:textColor="#000000"
              android:layout_marginLeft="12dp"
              ></TextView>

      </LinearLayout>


  </LinearLayout>

  <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" />

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">

      <ImageView
          android:id="@+id/postlike"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:padding="10dp"
          app:srcCompat="@mipmap/btnlike" />

      <ImageView

          android:layout_width="48dp"
          android:layout_height="48dp"
          app:srcCompat="@mipmap/commenticon" />

      <ImageView

          android:layout_width="48dp"
          android:layout_height="48dp"
          android:padding="10dp"
          app:srcCompat="@mipmap/btnshare" />

      <Space
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1" />

      <ImageView

          android:layout_width="48dp"
          android:layout_height="48dp"
          android:padding="10dp"
          app:srcCompat="@mipmap/btnbookmark" />

  </LinearLayout>

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

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

      <TextView
          android:id="@+id/postcaption"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="caption"
          android:textColor="#000000"
          />
  </LinearLayout>


</LinearLayout>


نمونه کد 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<PostHolder> ارث بری کنه به این شکل:

 

public class PostAdapter extends RecyclerView.Adapter<PostHolder>


نمونه کد 13


توضیحات:

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

 

Context context;
LayoutInflater inflater;


نمونه کد 14

 

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

 


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

 

 

 

 

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

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

 

 


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

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

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

0 نظر
هدر سایت
مشاهده سرفصل ها و ثبت نام در دوره Spring Boot جاواپرو  [کلیک کنید]
آموزش پروژه محور اسپرینگ بوت(Spring Boot)-سیستم دانشگاه
ثبت نام در دوره آموزش Spring security
دوره پرتاب | آموزش پیش نیازهای برنامه نویسی
دوره آموزش مبانی زبان برنامه نویسی جاوا
دوره آموزش مفاهیم پیشرفته زبان برنامه نویسی جاوا
مقدمه ای از زبان برنامه نویسی جاوا(java)
آموزش زبان برنامه نویسی جاوا
آموزش گرافیک در زبان برنامه نویسی جاوا
آموزش مدیریت چیدمان گرافیکی در زبان جاوا
آموزش ساخت بازی دوبعدی در زبان جاوا
Collection ها در زبان برنامه نویسی جاوا
آموزش پروژه محور ساخت برنامه مدیریت بانک با JavaFX
نمونه پروژه های رایگان زبان جاوا
آموزش دیتابیس در زبان برنامه نویسی جاوا
نمونه مثال پایه ای زبان برنامه نویسی جاوا
نمونه مثال String در زبان برنامه نویسی جاوا
آموزش جامع برنامه نویسی JavaFX
آموزش ساخت برنامه آزمون تستی در JavaFX
آموزش برنامه نویسی سوکت در جاوا
آموزش ساخت برنامه دفترچه تلفن با JavaFX
آموزش ساخت ربات ساده تلگرام با زبان جاوا
آموزش ساخت برنامه ماشین حساب با JavaFX
آموزش ساخت برنامه ساده مدیریت ایمیل ها با JavaFX
دوره آموزش Spring Boot
سفارش انجام پروژه زبان برنامه نویسی جاوا(JAVA)
سفارش انجام پروژه برنامه نویسی متلب(MATLAB) با قیمت منصفانه و تحویل به موقع
سفارش انجام پروژه زبان برنامه نویسی سی شارپ (#C)
سفارش انجام پروژه زبان برنامه نویسی سی(C)
سفارش انجام پروژه زبان برنامه نویسی پایتون(Python)
سفارش انجام پروژه زبان برنامه نویسی PHP (پی اچ پی)
سفارش انجام پروژه زبان برنامه نویسی اسمبلی(Assembly)
سفارش انجام پروژه زبان برنامه نویسی جاوا اسکریپت (Javascript)
سفارش انجام پروژه هوش مصنوعی
سفارش انجام پروژه طراحی الگوریتم
سفارش انجام پروژه ساختمان داده ها
سفارش انجام پروژه مهندسی نرم افزار
سفارش انجام پروژه شبکه های کامپیوتری
سفارش انجام پروژه پایگاه داده: دیتابیس (database)
 سفارش انجام پروژه سیستم عامل
سفارش انجام پروژه پاورپوینت(PowerPoint)
سفارش انجام پروژه اکسل (Excel)
سفارش انجام تحقیق و تهیه مقاله
سوالات متداول برنامه نویسی
جدیدترین مطالب
گفتگو را شروع کنید
مشاوره ،تدریس خصوصی و سفارش انجام انواع پروژه های برنامه نویسی