recyclerview در کاتلین

Share on facebook
Share on google
Share on twitter
Share on linkedin
آموزش کاتلین

آموزش کامل recyclerview در کاتلین به همراه CardView

ریسکلرویوو و کارد ویو برترین ابزار نمایش لیست در اندروید می باشد . از مهمترین استفاده های آنها می توان به نمایش لیست محصولات پرداخت و دلیل اصلی جایگزین شدن این ابزار به جای لیست ویو انعطاف پ‌یری بالای آن می باشد .

شاید ابتدای کار recyclerview کمی پیچیده به نظر برسد ولی در ادامه متوجه می شوید که این افزونه اندروید استدیو بسیار کاربردی می باشد .

روال کلی recyclerview در kotlin بدین صورت می باشد که شما ابتدا در activity مورد نظرتان recyclerView را قرار می دهید و پس از آن یک activity می سازید برای نمایش اجزایتان این کار موجب می شود شما بتوانید بدون محدودیت در لیستتان اجزا قرار دهید . این activity شمامل یک cardView می باشد .

در گام بعد با استفاده از یک اداپتور به تعداد دلخواه و محتوای دلخواه کارت ویووتان را داخل ریسیکلر ویو بارگزاری می نمایید.

به پروژه زیر دقت نمایید :

در گام اول با استفاده از کد زیر recyclerview را در پروژمان می سازیم:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

این یک فایل layout می باشد که با پسوند xml است.

در گام بعد محتوای کارت ویوو را می سازیم :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_margin="@dimen/card_margin"
        android:elevation="3dp"
        android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        card_view:cardCornerRadius="@dimen/card_album_radius">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="@dimen/album_cover_height"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/thumbnail"
                android:paddingLeft="@dimen/album_title_padding"
                android:paddingRight="@dimen/album_title_padding"
                android:paddingTop="@dimen/album_title_padding"
                android:textColor="@color/album_title"
                android:textSize="@dimen/album_title" />
            <TextView
                android:id="@+id/count"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/title"
                android:paddingBottom="@dimen/songs_count_padding_bottom"
                android:paddingLeft="@dimen/album_title_padding"
                android:paddingRight="@dimen/album_title_padding"
                android:textSize="@dimen/songs_count" />

            <ImageView
                android:id="@+id/overflow"
                android:layout_width="@dimen/ic_album_overflow_width"
                android:layout_height="@dimen/ic_album_overflow_height"
                android:layout_alignParentRight="true"
                android:layout_below="@id/thumbnail"
                android:layout_marginTop="@dimen/ic_album_overflow_margin_top"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_dots" />

        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

این کد هم همانند قبلی یک فایل xml می باشد .

پیشنهاد پیرو برای شما :   دابل کلیک جهت خروج در کاتلین

در گام بعد آداپتور مان را می سازیم:

import android.content.Context
import android.graphics.Color
import android.support.v7.widget.CardView
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.PopupMenu;
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import com.climesoft.designmaterial.R;



class CustomAdapter(private val context : Context, private val list : List<Album>) : RecyclerView.Adapter<CustomAdapter.ViewHolder>(){

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var titleTextView: TextView
        var countTextView: TextView
        var thumbImageView : ImageView
        var overflowImageView : ImageView

        init {
            titleTextView = itemView.findViewById(R.id.title) as TextView
            countTextView = itemView.findViewById(R.id.count) as TextView
            thumbImageView = itemView.findViewById(R.id.thumbnail) as ImageView
            overflowImageView = itemView.findViewById(R.id.overflow) as ImageView
        }
    }
    override fun onCreateViewHolder(parent : ViewGroup, type : Int) : CustomAdapter.ViewHolder{
        val view : View = LayoutInflater.from(parent.context).inflate(R.layout.card_view_item, parent, false);
        val card = view.findViewById(R.id.card_view) as CardView
     //   card.setCardBackgroundColor(Color.parseColor("#E6E6E6"));
        card.maxCardElevation = 2.0F;
        card.radius = 5.0F;
        return ViewHolder(view);
    }
    override fun onBindViewHolder(holder : CustomAdapter.ViewHolder, position : Int){
        var album : Album = list.get(position)
        holder.titleTextView.text = album.name;
        holder.countTextView.text = "${album.numOfSongs} songs"
        holder.thumbImageView.setImageResource(album.thumbnail);
//        holder.overflowImageView.setOnClickListener(object : View.OnClickListener{
//            override fun onClick(view: View) {
//                showPopupMenu(holder.overflowImageView)
//            }
//        });
        holder.overflowImageView.setOnClickListener{showPopupMenu(holder.overflowImageView)};
    }
    private fun showPopupMenu(view: View) {
        // inflate menu
        val popup = PopupMenu(context, view)
        val inflater = popup.getMenuInflater()
        inflater.inflate(R.menu.menu_album, popup.getMenu())
        popup.setOnMenuItemClickListener(null)
        popup.show()
    }
    override fun getItemCount() : Int{
        return list.size;
    }

}

در این فایل ما به ریسایکلر ویوومان می فهمانیم چه مقادیری را باید در کجای کاردویوومان قرار دهد.

در گام بعد نیاز است که ما ساختار مدلمان برای ریسیکلرویوو بسازیم

class Album(val name : String, val numOfSongs : Int, val thumbnail : Int)

در این کلاس ما مشخص می نمایید که ساختار داده ایتان چگونه می باشد.

 

و اما در گام انتهایی ما recyclerview را به adapter در بدنه اصلی وصل می نماییم.

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.GridLayoutManager
import com.climesoft.designmaterial.R;
import java.util.ArrayList;
import android.support.v7.widget.RecyclerView;
import android.content.res.Configuration;

class MainCard : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_card)
        val list = ArrayList<Album>();
        prepareList(list);
        val rView = findViewById(R.id.rView) as RecyclerView;


        val adapter = CustomAdapter(this, list)
        rView.adapter = adapter;
        val orientation : Int = getResources().getConfiguration().orientation
        rView.layoutManager = GridLayoutManager(this, 2, GridLayoutManager.VERTICAL, false)
        if(orientation == Configuration.ORIENTATION_LANDSCAPE){
            rView.layoutManager = GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false)
        }
        if(orientation == Configuration.ORIENTATION_PORTRAIT){
            rView.layoutManager = GridLayoutManager(this, 2, GridLayoutManager.VERTICAL, false)
        }
    }
    private fun prepareList(list : ArrayList<Album>){
        list.add(Album("What is", 2, R.drawable.album1))
        list.add(Album("No No", 2, R.drawable.album2))
        list.add(Album("Going on", 2, R.drawable.album3))
        list.add(Album("Keep it up", 2, R.drawable.album4))
        list.add(Album("Don't say", 2, R.drawable.album5))
        list.add(Album("What is", 2, R.drawable.album6))
        list.add(Album("No No", 2, R.drawable.album7))
        list.add(Album("Going on", 2, R.drawable.album8))
        list.add(Album("Keep it up", 2, R.drawable.album9))
        list.add(Album("Don't say", 2, R.drawable.album10))
    }
}

در ادامه فیلم آموزش به همراه سورس پروژه در وب سایت قرار می گیرد  بنابراین مطالب وب سایت پیرو را به صورت روزانه مطالعه نمایید .

پیشنهاد پیرو برای شما :   fragment در اندروید kotlin

منابع:

http://ktutorials.com

https://www.techotopia.com

نویسنده و مترجم :

پیروز جنابی

 

 

 

مدیر پیرو

مدیر پیرو

نظرتان را بیان نمایید

عضویت در خبر نامه