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_margintop="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_margintop="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 نظر