ریسکلرویوو و کارد ویو برترین ابزار نمایش لیست در اندروید می باشد . از مهمترین استفاده های آنها می توان به نمایش لیست محصولات پرداخت و دلیل اصلی جایگزین شدن این ابزار به جای لیست ویو انعطاف پیری بالای آن می باشد .
شاید ابتدای کار 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))
}
}
در ادامه فیلم آموزش به همراه سورس پروژه در وب سایت قرار می گیرد بنابراین مطالب وب سایت پیرو را به صورت روزانه مطالعه نمایید .
منابع:
نویسنده و مترجم :