前回はRecyclerView、CardViewの全体を説明していきました。
今回は実際のソースを見ながら説明していきます。
対象範囲は、リスト画面にデータを表示するところまで。タップして詳細画面に遷移するのは次回にまわします。
目次
実装するアプリのイメージ
まずはおさらいで、今回作るアプリのイメージはこちら。その後にLayout定義も載せておきます。
【リスト】
【リスト画面】activity_list.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:layout_height="match_parent" tools:context="apps.test.marketableskill.biz.recyclerview.ListActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_list" /> </android.support.design.widget.CoordinatorLayout> |
【リスト/RecyclerView】content_list.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView 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:id="@+id/RecyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutManager="LinearLayoutManager" tools:listitem="@layout/item_list" /> |
【CardView】item_list.xml
|
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardElevation="2dp" android:foreground="?android:attr/selectableItemBackground"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dip"> <ImageView android:id="@+id/imageView1" android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center" android:layout_margin="5dip" android:background="@drawable/ic_launcher_background" android:contentDescription="" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical"> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="5dip" android:textSize="18sp" android:text="name"/> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:textSize="12sp" android:text="bbbbb"/> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:textAlignment="viewEnd" android:textSize="12sp" android:text="aaaaa"/> </LinearLayout> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView> |
実際にコードを書いていく
実装が必要なものは、以下の通り。
- Activity
- Adapter
- ViewHolder
- データクラス
これから、それぞれの説明をしていきます。
データクラス
まずは、1行分のデータを保持するクラスを作ります。
目的は、クラス間でデータのやり取りをするため、になります。
正直なくても実装は可能ですが、あったほうが楽ですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
package apps.test.marketableskill.biz.recyclerview import android.graphics.drawable.Drawable class Imagefile (var imageDrawable: Drawable, var fileName : String, var fileAmaount : String, var fileHeight : String, var fileWidth : String, var fileDate : String){ } |
リストにはファイルに関しての画像、名前、容量、日付のみになりますが、詳細画面で縦幅、横幅を扱うので、全部で6つの属性を定義しています。
Activity
次にリスト画面を表示するActivityを作っていきます。
|
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 |
package apps.test.marketableskill.biz.recyclerview import android.content.Intent import android.os.Bundle import android.support.v4.content.res.ResourcesCompat import android.support.v7.app.AppCompatActivity import android.support.v7.widget.LinearLayoutManager import android.view.View import kotlinx.android.synthetic.main.activity_list.* import kotlinx.android.synthetic.main.content_list.* class ListActivity : AppCompatActivity() { private var mDataList : ArrayList<Imagefile> = ArrayList<Imagefile>() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_list) setSupportActionBar(toolbar) // データ作成 makeTestData() // Adapter作成 val adapter = ListAdapter(this,mDataList) // RecyclerViewにAdapterとLayoutManagerの設定 ListRecyclerView.adapter = adapter ListRecyclerView.layoutManager = LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false) } private fun makeTestData() { //20個のテストデータ作成 for (i in 1..20){ mDataList.add(Imagefile(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_launcher_background, null)!!, "ファイル_" + i.toString(), ""+(i*100).toString(), ""+(i*2).toString(), ""+(i*3).toString(), "2018/5/" + i.toString())) } } } |
処理の流れに合わせて説明していきます。
データ作成
まずはリストに表示するデータの作成です。今回はテストデータを作成しています。
リストのデータを20個作成して、ArrayListに格納しています。
実際にファイルを読み込もうと思ったんですが、そうすると権限の取得など、複雑になってしまうため、今回はテストデータに切り替えています。
前回説明したように、Adapterはリストへの表示が責務になります。データ作成はAdapter以外の場所で行うことになるので、今回はActivityにて作成をしています。
RecyclerViewの設定
RecyclerViewにAdapterとLayoutManagerを設定します。
Adapterの設定はオブジェクトを設定して、設定するだけです。特段難しくはないですね。
LayoutManagerとは、リストのレイアウトを決定するものになります。各パーツの初期配置や、スクロール時の対応などをしています。
- LinearLayoutManager
- GridLayoutManager
- StaggeredGridLayoutManager
設定できるのは上記の3つあり、今回はオーソドックスなリストを表示するのでLinearLayoutManagerを設定しています。
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 |
package apps.test.marketableskill.biz.recyclerview import android.support.v7.widget.RecyclerView import android.view.LayoutInflater import android.view.View import android.view.ViewGroup open class ListAdapter(private val mParentActivity : ListActivity, private val mValues: ArrayList<Imagefile>) : RecyclerView.Adapter<ListViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListViewHolder { //レイアウトの設定(inflate) val view = LayoutInflater.from(parent.context).inflate(R.layout.item_list,parent,false) //Holderの生成 val holder = ListViewHolder(view) return holder } override fun onBindViewHolder(holder: ListViewHolder, position: Int) { val item = mValues[position] holder.mfileDrawable.setImageDrawable(item.imageDrawable) holder.mfileName.text = item.fileName holder.mfileSize.text = item.fileAmaount holder.mfileDate.text = item.fileDate } override fun getItemCount(): Int { return mValues.size } } |
RecyclerView.Adapterを継承しているため、3つのメソッドの実装が必要です。
onCreateViewHolder
ここでは対象となるレイアウトの設定(inflate)と、ViewHolderの生成を行います。
onBindViewHolder
ここではデータを各画面のViewに設定する処理を実装します。
ViewHolderと、そのViewの表示位置(position)を引数として受け取ります。
Adapterはオブジェクト生成時にリストに表示するデータを取得しています(mValueに格納されています)。
表示位置(position)がわかっていますので、対象データをmValueから取得して、ViewHolderに設定しています。
getItemCount
ここでは保持しているデータ数を返します。
ViewHolder
次にViewHolderを作成しています。ViewHolderはリスト1行の表示を行うクラスになります。
1行分のレイアウトファイル(item_list.xml)に設定されているViewをプロパティに設定します。
今回は、item_list.xmlに4つのViewを設定しているので、そちらを設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
package apps.test.marketableskill.biz.recyclerview import android.support.v7.widget.RecyclerView import android.view.View import android.widget.ImageView import android.widget.TextView import kotlinx.android.synthetic.main.item_list.view.* class ListViewHolder(mView : View) : RecyclerView.ViewHolder(mView) { val mfileDrawable : ImageView = mView.imageView val mfileName : TextView = mView.fileName val mfileSize : TextView = mView.fileSize val mfileDate : TextView = mView.fileDate } |
はい、以上で実装は終わりです。
アプリを起動するとRecyclerViewを使ったリストを表示することができます。
次回は、リストをタップを検知して、詳細画面へ遷移する部分を実装していきます。
