【Android/Kotlin開発】でRecyclerViewとCardViewを使ってリストを表示させる方法(2) | サラリーマンがパラレル・キャリアをめざしてみました

前回はRecyclerView、CardViewの全体を説明していきました。

今回は実際のソースを見ながら説明していきます。

対象範囲は、リスト画面にデータを表示するところまで。タップして詳細画面に遷移するのは次回にまわします。

1 実装するアプリのイメージ
2 実際にコードを書いていく

実装するアプリのイメージ

まずはおさらいで、今回作るアプリのイメージはこちら。その後にLayout定義も載せておきます。

【リスト】

【リスト画面】activity_list.xml

<?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>

<?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>

</android.support.design.widget.CoordinatorLayout>

リスト画面の表示のみを定義しており、RecyclerViewは別のレイアウトファイルに定義しています。(<include layout=”@layout/content_list” / > にて取り込みをしています)

【リスト/RecyclerView】content_list.xml

<?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"
    />

<?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"

RecyclerViewの定義をしています。

【CardView】item_list.xml

<?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>

<?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>

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

CardViewの定義をしています。要はリストの1行分の表示に関しての定義になります。

実際にコードを書いていく

実装が必要なものは、以下の通り。

Activity
Adapter
ViewHolder
データクラス

これから、それぞれの説明をしていきます。

データクラス

まずは、1行分のデータを保持するクラスを作ります。

目的は、クラス間でデータのやり取りをするため、になります。

正直なくても実装は可能ですが、あったほうが楽ですね。

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){
    
}

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を作っていきます。

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()))
        }
    }   
}

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の実装です。

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&lt;Imagefile&gt;) : RecyclerView.Adapter&lt;ListViewHolder&gt;() {

    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

    }
}

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を設定しているので、そちらを設定しています。

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

}

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を使ったリストを表示することができます。

次回は、リストをタップを検知して、詳細画面へ遷移する部分を実装していきます。

【Android開発】KotlinでRecyclerViewとCardViewを使ってリストを表示させる方法(2)

実装するアプリのイメージ

【リスト画面】activity_list.xml

【リスト/RecyclerView】content_list.xml

【CardView】item_list.xml

実際にコードを書いていく

データクラス

Activity

データ作成

RecyclerViewの設定

Adapter

onCreateViewHolder

onBindViewHolder

getItemCount

ViewHolder

関連

Search

Latest Post

Category

Twitter

実装するアプリのイメージ

【リスト画面】activity_list.xml

【リスト/RecyclerView】content_list.xml

【CardView】item_list.xml

実際にコードを書いていく

データクラス

Activity

データ作成

RecyclerViewの設定

Adapter

onCreateViewHolder

onBindViewHolder

getItemCount

ViewHolder

関連

RECOMMENDこちらの記事も人気です。

【Android】2018年8月からアプリをリリースするにはAPIレベル…

【Android】初心者Androiderが情報収集するときに見るサイト

HTCが半端なく苦戦してるね

分かりやすいし、コスパも最高？オンライン学習プラットフォーム・Udemy…

作ったAndroidアプリの配布はどうしてる？Google Develo…

【Android/Kotlin】いまさら聞けない？NavigationD…

【Android】Android Studio3.0で署名付きAPKファ…

Android Studio 3.2 Beta5がリリースされました！

人気記事

Search

Latest Post

Category

Twitter

Tags