Kotlinを使ってRecyclerViewを実装する
RecyclerViewとは
RecyclerView ウィジェットは、ListView をさらに進化させて柔軟にしたものです。 このウィジェットは、大きなデータセットを表示するためのコンテナであり、限られたビューを維持することで非常に効率的にスクロールできます。 ユーザーのアクションやネットワークのイベントに基づいて、実行時に要素が変わるデータ コレクションを持つ場合には、 RecyclerView ウィジェットを使用してください。
ListViewでは、ViewHolderなどを定義して、再利用されるように手動でコードを書く必要がありましたが、
RecyclerViewではそれらのコードが不要になります。
では、サンプルとして縦型のListUIを作ります。
xmlファイルにRecyclerViewを定義する
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/swipe_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/play_list_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v4.widget.SwipeRefreshLayout> |
SwipeRefreshLayoutの中にRecyclerViewを定義しています。
RecyclerViewはapi level22から使用可能になるので、android support library
を使用しています。
サポートライブラリーが使用できるようapp build.gradleに追加
|
1 2 3 |
dependencies { compile 'com.android.support:recyclerview-v7:26.1.0' } |
FragmentでRecyclerViewを定義する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { val root = inflater.inflate(R.layout.fragment_play_list, container, false) // set up view with(root) { recyclerView = findViewById<RecyclerView>(R.id.play_list_view).apply { // 1.adapterにセット adapter = listAdapter // 2.LayoutMangerをセット layoutManager = LinearLayoutManager(context) } // swipe refresh layout findViewById<SwipeRefreshLayout>(R.id.swipe_layout).apply { setColorSchemeColors( android.support.v4.content.ContextCompat.getColor(activity, R.color.colorPrimary), android.support.v4.content.ContextCompat.getColor(activity, R.color.colorAccent), android.support.v4.content.ContextCompat.getColor(activity, R.color.colorPrimaryDark) ) setOnRefreshListener { presenter.loadPlayList(listAdapter) } } } return root } |
RecyclerViewを有効にするためには、以下の作業が必要になります。
1.adapterをセット
RecyclerView.Adapter<T>
を継承したAdapterクラスを代入します。
2.LayoutMangerの設定
LayoutManagerクラスを設定する必要があります。
このサンプルでは、縦か横に一覧表示させるLinearLayoutMangerをセットしています。
LayoutManagerの種類
LayoutManagerには、以下の種類があります。
Adapterクラスの実装
Adapterクラスを実装します。
以下サンプルコードをあげます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.support.v7.widget.RecyclerView import com.squareup.picasso.Picasso import kotlinx.android.synthetic.main.item_play_list.view.* class PlayListAdapter(playList: List<PlayList>, private val playListAdapterListener: PlayListFragment.PlayListAdapterListener) : RecyclerView.Adapter<PlayListAdapter.ViewHolder>() { var playList: List<PlayList> = playList set(playList) { field = playList notifyDataSetChanged() } override fun getItemCount(): Int { return playList.size } override fun onBindViewHolder(holder: ViewHolder, position: Int) { holder.bindPlayList(playList[position]) } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { val view = LayoutInflater.from(parent.context).inflate(R.layout.item_play_list, parent, false) return ViewHolder(view, playListAdapterListener) } class ViewHolder(view: View, val playListAdapter: PlayListFragment.PlayListAdapterListener) : RecyclerView.ViewHolder(view) { fun bindPlayList(playList: PlayList) { with(playList) { // thumbnail Picasso.with(itemView.context).load(thumbnail_url).into(itemView.thumbnail) // title itemView.title.text = title // presenter name itemView.presenter_name.text = presenter_name // description itemView.description.text = description // click listener itemView.thumbnail.setOnClickListener { playListAdapter.onClick(this) } } } } } |
PlayListは項目を表示させるためのDataClassです。
RecyclerView.Adapterのoverrideメソッドを順にチェックしていきます。
override fun getItemCount() : Int
itemのサイズを返します。
0ならば当然表示されません。
override fun onBindViewHolder(holder : ViewHolder, position Int)
この関数で表示する項目をセットします。
ここでは、ViewHolderに定義したbindPlayListを関数を呼び、Itemの項目
をセットしています。
override fun onCreateViewHolder(parent : ViewGroup, viewType, int) : ViewHolder
関数内で、viewを生成し、ViewHolderを返します。
tap eventのinterfaceを実装する
RecyclerViewの部品がタップされた時の処理をFragmentに譲渡しています。
Kotlinにもinterfaceがあり、Fragment内でのinterfaceの定義をしています。
|
1 2 3 4 5 6 7 8 9 10 |
// listener for playList internal var itemListener: PlayListAdapterListener = object : PlayListAdapterListener { override fun onClick(playList: PlayList) { startVideoPlayActivity(playList) } } interface PlayListAdapterListener { fun onClick(playList: PlayList) } |
これで、完成しました。
codemore code
~~~~