KotlinのAPI通信をRecyclerViewに連携する方法をやさしく解説！初心者向けサンプル付き

1. RecyclerViewとは？API通信とどう関係するの？

1. RecyclerViewとは？API通信とどう関係するの？

RecyclerView（リサイクラービュー）とは、Androidアプリでたくさんのデータをリスト表示するときに使う便利な部品です。

API通信を使うことで、外部からデータを取得して、それをRecyclerViewに表示することができます。例えば、天気情報一覧やニュース記事一覧を表示するときにぴったりです。

2. 必要なライブラリの準備

2. 必要なライブラリの準備

今回は、HTTP通信ライブラリのRetrofitと、リスト表示のためのRecyclerViewを使います。まずはbuild.gradleに以下の依存関係を追加しましょう。

implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")
implementation("androidx.recyclerview:recyclerview:1.2.1")

3. データモデルを定義しよう

3. データモデルを定義しよう

APIから受け取るデータの形をKotlinのクラスで表現します。例えば、ユーザー一覧を表示する場合は以下のようなUserデータクラスを作ります。

data class User(
    val id: Int,
    val name: String,
    val email: String
)

4. RetrofitでAPI通信の設定

4. RetrofitでAPI通信の設定

Retrofitを使って、APIとやりとりするインターフェースを定義します。ここではJSON形式でデータを取得するAPIを想定します。

interface ApiService {
    @GET("users")
    suspend fun getUsers(): List<User>
}

Retrofitの本体を作成します。

val retrofit = Retrofit.Builder()
    .baseUrl("https://example.com/api/")
    .addConverterFactory(GsonConverterFactory.create())
    .build()

val api = retrofit.create(ApiService::class.java)

5. RecyclerViewのAdapterを作成する

5. RecyclerViewのAdapterを作成する

RecyclerViewに表示するためのAdapter（アダプター）を作ります。これは、データをどのように表示するかを定義する部分です。

class UserAdapter(private val users: List<User>) : RecyclerView.Adapter<UserAdapter.ViewHolder>() {

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val nameText = itemView.findViewById<TextView>(R.id.nameText)
        val emailText = itemView.findViewById<TextView>(R.id.emailText)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val user = users[position]
        holder.nameText.text = user.name
        holder.emailText.text = user.email
    }

    override fun getItemCount(): Int = users.size
}

6. XMLレイアウトの設定

6. XMLレイアウトの設定

ユーザー1件分の表示レイアウトをitem_user.xmlとして作成します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">
    
    <TextView
        android:id="@+id/nameText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="名前" />

    <TextView
        android:id="@+id/emailText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="メールアドレス" />
</LinearLayout>

7. Activityで連携処理を実装しよう

7. Activityで連携処理を実装しよう

ここでいよいよAPI通信とRecyclerViewを連携させます。データ取得後、RecyclerViewに表示する流れです。

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView

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

        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)

        lifecycleScope.launch {
            try {
                val users = api.getUsers()
                recyclerView.adapter = UserAdapter(users)
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }
}

8. 実行して確認しよう

8. 実行して確認しよう

アプリを起動すると、APIから取得したデータが一覧として表示されます。RecyclerViewとAPI通信の連携が成功している状態です。

このように、KotlinではRetrofitとRecyclerViewを組み合わせることで、外部から取得したデータを画面上に簡単に表示できます。