0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Android】RecyclerViewアプリを作成

Posted at

はじめに

業務で初めて触った時、訳が分からなかったのがRecylerViewでした。改めて学習してみると意外とシンプルで、きちんと手順踏んだらすぐに実装することができます。

実装

・まず表示するデータです。
 居酒屋のドリンクメニュー風。

MainRow.kt
package com.example.recyclerviewapp

import java.util.ArrayList

data class MainRow(val title: String, val price: Int)

val menu : ArrayList<MainRow> = arrayListOf(
    MainRow("生ビール", 500),
    MainRow("ハイボール", 400),
    MainRow("レモンサワー", 400),
    MainRow("グレープフルーツサワー", 400),
    MainRow("ウーロンハイ", 400),
    MainRow("緑茶ハイ", 400),
    MainRow("コーン茶ハイ", 400),
    MainRow("麦焼酎(ロック)", 500),
    MainRow("麦焼酎(水割り)", 500),
    MainRow("麦焼酎(お湯割り)", 500),
    MainRow("麦焼酎(ソーダ割り)", 500),
    MainRow("芋焼酎(ロック)", 500),
    MainRow("芋焼酎(水割り)", 500),
    MainRow("芋焼酎(お湯割り)", 500),
    MainRow("芋焼酎(ソーダ割り)", 500),
    MainRow("日本酒(冷や)", 500),
    MainRow("日本酒(冷酒)", 500),
    MainRow("日本酒(熱燗)", 500),
    MainRow("白ワイン", 450),
    MainRow("赤ワイン", 450)
)

・レイアウト
 ・セルになる部分のレイアウト

row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="end" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/purple_500" />

</LinearLayout>

・画面全体のレイアウト
 ここにRecyclerViewを埋め込む

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">
    // RecyclerView
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

・アダプター作成
 ポイント
 ・Apapter…RecycleViewとViewHolderの橋渡しをするをする役割
 ・ViewHolder…Adapterに指示されてセルを作成,保持する役割(今回row.xmlをもとに作成)
 ・onCreateViewHolder()…ViewHolderオブジェクト生成
 ・onBindViewHolder()…ViewHolder内の各画面部品に表示するデータを割り当てる
 ・getItemCount()…データの件数を返す
 これらが必須
  

MainAdapter
package com.example.recyclerviewapp

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import java.util.ArrayList

class MainAdapter(private val dataSet: ArrayList<MainRow>): RecyclerView.Adapter<MainAdapter.ViewHolder>() {

    class ViewHolder(view: View): RecyclerView.ViewHolder(view) {
        val title: TextView = view.findViewById(R.id.title)
        val price: TextView = view.findViewById(R.id.price)
    }

    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        val itemView = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.row, viewGroup, false)
        return ViewHolder(itemView)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
        viewHolder.title.text = dataSet[position].title
        viewHolder.price.text = dataSet[position].price.toString()
    }

    override fun getItemCount() = dataSet.size
}

・最後にActivityの記述

MainActivity
package com.example.recyclerviewapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import java.util.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)

        recyclerView.setHasFixedSize(true)
        // レイアウトマネージャーに接続(今回はLinearLayout)
        val layoutManager: RecyclerView.LayoutManager = LinearLayoutManager(this)
        recyclerView.layoutManager = layoutManager

        val dataSet: ArrayList<MainRow> = menu
        // アダプターにデータセット
        recyclerView.adapter = MainAdapter(dataSet)
    }
}

おわりに

・完成イメージ
リサイクラービュー.gif

初めはとっつきづらいRecyclerViewですが、明確に記述するコードは決まっているので後はそれに合わせれば使いこなせるようになると思います!

参考URL

ありがとうございました!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?