【Kotlin + Retrofit】API通信してみる

1 はじめに
2 準備
3 レイアウトファイルの作成
4 APIを実装する
5 さいごに
6 おすすめ書籍

はじめに

こんにちは。miyagawaです。つい最近、ポケモン剣盾を衝動買いしてしました。BW2から全く買っていなかったので、3Dのマップはとても新鮮です。
今回はKotlin、Retrofitを使用してAPI通信の処理を実装したいと思います。
使用するAPIはpokeapiです。
ポケモンのいろいろなデータをまとめられているので、このデータを用いて図鑑番号検索アプリを作ってみたいと思います。

準備

新しくプロジェクトを作成し、build.gradle(app)に下記を追加します。
最新版の2.7.1（2020年1月時点）を導入します。

 // retrofit def retrofitVer = '2.6.4' implementation "com.squareup.retrofit2:retrofit:$retrofitVer" implementation "com.squareup.retrofit2:adapter-rxjava:$retrofitVer" implementation "com.squareup.retrofit2:adapter-rxjava2:$retrofitVer" implementation "com.squareup.retrofit2:converter-gson:$retrofitVer" // recyclerView implementation 'com.android.support:recyclerview-v7:28.0.0' // Glide implementation 'com.github.bumptech.glide:glide:4.9.0' // okhttp implementation 'com.squareup.okhttp3:logging-interceptor:4.2.1' // rx implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'

// retrofit

def retrofitVer = '2.6.4'

implementation "com.squareup.retrofit2:retrofit:$retrofitVer"

implementation "com.squareup.retrofit2:adapter-rxjava:$retrofitVer"

implementation "com.squareup.retrofit2:adapter-rxjava2:$retrofitVer"

implementation "com.squareup.retrofit2:converter-gson:$retrofitVer"

// recyclerView

implementation 'com.android.support:recyclerview-v7:28.0.0'

// Glide

implementation 'com.github.bumptech.glide:glide:4.9.0'

// okhttp

implementation 'com.squareup.okhttp3:logging-interceptor:4.2.1'

// rx

implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'

上記の追加が完了したら、syncを行います。

また、HTTP通信を許容するため、 AndroidManifest.xml に下記を追記します。

 <uses-permission android:name="android.permission.INTERNET"/>

1	<uses-permission android:name="android.permission.INTERNET"/>

レイアウトファイルの作成

準備ができたら、次はレイアウトファイルの作成を行います。
activity_main.xml を下記のように設定します。

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/titleTextView" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_centerHorizontal="true" android:text="get pokemon list" android:gravity="center"/> <androidx.recyclerview.widget.RecyclerView android:id="@+id/resultTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_above="@+id/apiGetButton" android:layout_below="@+id/titleTextView" android:layout_margin="20dp" /> <Button android:id="@+id/apiGetButton" android:layout_height="50dp" android:layout_width="100dp" android:layout_marginBottom="30dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="@color/colorPrimary" android:text="getResult" android:textColor="@android:color/white"/> </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/titleTextView"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_centerHorizontal="true"

android:text="get pokemon list"

android:gravity="center"/>

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/resultTextView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_above="@+id/apiGetButton"

android:layout_below="@+id/titleTextView"

android:layout_margin="20dp" />

<Button

android:id="@+id/apiGetButton"

android:layout_height="50dp"

android:layout_width="100dp"

android:layout_marginBottom="30dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@color/colorPrimary"

android:text="getResult"

android:textColor="@android:color/white"/>

</RelativeLayout>

list_item_pokemon.xml を作成します。

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/pokemonImageView" android:layout_width="48dp" android:layout_height="48dp" android:layout_margin="8dp"/> <TextView android:id="@+id/pokemonNameTextView" android:layout_width="match_parent" android:layout_height="40dp" android:layout_margin="8dp" android:gravity="center"/> </LinearLayout> <view android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/colorPrimaryDark" /> </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<ImageView

android:id="@+id/pokemonImageView"

android:layout_width="48dp"

android:layout_height="48dp"

android:layout_margin="8dp"/>

<TextView

android:id="@+id/pokemonNameTextView"

android:layout_width="match_parent"

android:layout_height="40dp"

android:layout_margin="8dp"

android:gravity="center"/>

</LinearLayout>

<view

android:layout_width="match_parent"

android:layout_height="1dp"

android:background="@color/colorPrimaryDark" />

</LinearLayout>

APIを実装する

レイアウトファイルを整えた後、 PokemonInfo.kt というデータクラスファイルを作成します。

 import io.reactivex.Observable import retrofit2.http.GET import retrofit2.http.Path interface PokemonInfo { @GET("pokemon-form/{id}") fun pokemonInfo(@Path("id") pokemonId: Int): Observable<PokemonData> }

import io.reactivex.Observable

import retrofit2.http.GET

import retrofit2.http.Path

interface PokemonInfo {

@GET("pokemon-form/{id}")

fun pokemonInfo(@Path("id") pokemonId: Int): Observable<PokemonData>

}

pokemonInfo メソッドを呼び出すことによって番号を検索するようにしています。
@GET はAPIGETを示しており、()内のものは後ほど登場するBaseURLの後に続くエンドポイントを記載します。
今回の場合はポケモンの図鑑番号を検索したいので、idを渡し、それをパラメーターに含めるようにしています。

PokemonListAdapter.kt ファイルを作成します。

 import android.content.Context import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.ImageView import android.widget.LinearLayout import android.widget.TextView import androidx.core.view.isVisible import androidx.recyclerview.widget.RecyclerView import com.bumptech.glide.Glide internal class PokemonListAdapter(private val context: Context): RecyclerView.Adapter<RecyclerView.ViewHolder>() { private var pokemonData: PokemonData = PokemonData(0, "", PokemonData.Pokemon("", ""), PokemonData.Sprites("","","",""), PokemonData.Version("","") ) fun setPokemonData(data: PokemonData) { pokemonData = data } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder { val view = LayoutInflater.from(parent.context) .inflate(R.layout.list_item_pokemon, parent, false) return PokemonInfoHolder(view) } override fun getItemCount(): Int { return 5 } override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) { (holder as PokemonInfoHolder).bind(position) } private inner class PokemonInfoHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { private val nameArea: LinearLayout private val formArea: LinearLayout private val nameTextView: TextView private val formNameView: TextView private val imageView: ImageView init { nameArea = itemView.findViewById(R.id.pokemonNameListItemView) formArea = itemView.findViewById(R.id.formListItemView) nameTextView = itemView.findViewById(R.id.pokemonNameTextView) formNameView = itemView.findViewById(R.id.pokemonFormNameTextView) imageView = itemView.findViewById(R.id.pokemonImageView) } internal fun bind(position: Int) { nameArea.isVisible = position == 0 formArea.isVisible = position != 0 var spriteUrl = "" when (position) { 0 -> { nameTextView.text = pokemonData.pokemon.name } 1 -> { formNameView.text = "通常のすがた（前）" spriteUrl = pokemonData.sprites.front_default } 2 -> { formNameView.text = "色違いのすがた（前）" spriteUrl = pokemonData.sprites.front_shiny } 3 -> { formNameView.text = "通常のすがた（後）" spriteUrl = pokemonData.sprites.back_default } 4 -> { formNameView.text = "色違いのすがた（後）" spriteUrl = pokemonData.sprites.back_shiny } } Glide.with(context) .asBitmap() .load(spriteUrl) .into(imageView) } } }

import android.content.Context

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.ImageView

import android.widget.LinearLayout

import android.widget.TextView

import androidx.core.view.isVisible

import androidx.recyclerview.widget.RecyclerView

import com.bumptech.glide.Glide

internal class PokemonListAdapter(private val context: Context): RecyclerView.Adapter<RecyclerView.ViewHolder>() {

private var pokemonData: PokemonData =

PokemonData(0, "",

PokemonData.Pokemon("", ""),

PokemonData.Sprites("","","",""),

PokemonData.Version("","")

)

fun setPokemonData(data: PokemonData) {

pokemonData = data

}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {

val view = LayoutInflater.from(parent.context)

.inflate(R.layout.list_item_pokemon,

parent,

false)

return PokemonInfoHolder(view)

}

override fun getItemCount(): Int {

return 5

}

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {

(holder as PokemonInfoHolder).bind(position)

}

private inner class PokemonInfoHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

private val nameArea: LinearLayout

private val formArea: LinearLayout

private val nameTextView: TextView

private val formNameView: TextView

private val imageView: ImageView

init {

nameArea = itemView.findViewById(R.id.pokemonNameListItemView)

formArea = itemView.findViewById(R.id.formListItemView)

nameTextView = itemView.findViewById(R.id.pokemonNameTextView)

formNameView = itemView.findViewById(R.id.pokemonFormNameTextView)

imageView = itemView.findViewById(R.id.pokemonImageView)

}

internal fun bind(position: Int) {

nameArea.isVisible = position == 0

formArea.isVisible = position != 0

var spriteUrl = ""

when (position) {

0 -> {

nameTextView.text = pokemonData.pokemon.name

}

1 -> {

formNameView.text = "通常のすがた（前）"

spriteUrl = pokemonData.sprites.front_default

}

2 -> {

formNameView.text = "色違いのすがた（前）"

spriteUrl = pokemonData.sprites.front_shiny

}

3 -> {

formNameView.text = "通常のすがた（後）"

spriteUrl = pokemonData.sprites.back_default

}

4 -> {

formNameView.text = "色違いのすがた（後）"

spriteUrl = pokemonData.sprites.back_shiny

}

Glide.with(context)

.asBitmap()

.load(spriteUrl)

.into(imageView)

}

RecyclerView、Glideの使い方に関しては別の記事にまとめているので、是非みてみてください。
【Kotlin】RecyclerViewAdapterを使ってリスト表示
 【Kotlin】Glideで角丸の画像を作成する

MainActivity.kt ファイルを下記のように調整します。

 import android.annotation.SuppressLint import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.recyclerview.widget.LinearLayoutManager import com.google.gson.FieldNamingPolicy import com.google.gson.GsonBuilder import io.reactivex.schedulers.Schedulers import io.reactivex.android.schedulers.AndroidSchedulers import kotlinx.android.synthetic.main.activity_main.* import retrofit2.Retrofit import retrofit2.adapter.rxjava2.RxJava2CallAdapterFactory import retrofit2.converter.gson.GsonConverterFactory class MainActivity : AppCompatActivity() { private lateinit var adapter : PokemonListAdapter override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) initView() } private fun initView() { val linearLayoutManager = LinearLayoutManager(this) linearLayoutManager.orientation = LinearLayoutManager.VERTICAL resultRecyclerView.layoutManager = linearLayoutManager adapter = PokemonListAdapter(this) resultRecyclerView.adapter = adapter apiGetButton.setOnClickListener { // ボタンが押されたときにeditTextから番号を取得する。 if (pokemonIdEditText.text.isNotEmpty()) { // Pokemonの検索 getPokemon(pokemonIdEditText.text.toString().toInt()) } } } @SuppressLint("CheckResult") private fun getPokemon(id: Int) { val gson = GsonBuilder() .setFieldNamingPolicy(FieldNamingPolicy.LOWER_CASE_WITH_UNDERSCORES) .create() // val retrofit = Retrofit.Builder() .baseUrl("https://pokeapi.co/api/v2/") .addConverterFactory(GsonConverterFactory.create(gson)) .addCallAdapterFactory(RxJava2CallAdapterFactory.create()) .build() val client = retrofit.create(PokemonInfo::class.java) client.pokemonInfo(id) .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe({ adapter.setPokemonData(it) adapter.notifyDataSetChanged() }, { it.printStackTrace() }) } }

import android.annotation.SuppressLint

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import androidx.recyclerview.widget.LinearLayoutManager

import com.google.gson.FieldNamingPolicy

import com.google.gson.GsonBuilder

import io.reactivex.schedulers.Schedulers

import io.reactivex.android.schedulers.AndroidSchedulers

import kotlinx.android.synthetic.main.activity_main.*

import retrofit2.Retrofit

import retrofit2.adapter.rxjava2.RxJava2CallAdapterFactory

import retrofit2.converter.gson.GsonConverterFactory

class MainActivity : AppCompatActivity() {

private lateinit var adapter : PokemonListAdapter

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

initView()

}

private fun initView() {

val linearLayoutManager = LinearLayoutManager(this)

linearLayoutManager.orientation = LinearLayoutManager.VERTICAL

resultRecyclerView.layoutManager = linearLayoutManager

adapter = PokemonListAdapter(this)

resultRecyclerView.adapter = adapter

apiGetButton.setOnClickListener {

// ボタンが押されたときにeditTextから番号を取得する。

if (pokemonIdEditText.text.isNotEmpty()) {

// Pokemonの検索

getPokemon(pokemonIdEditText.text.toString().toInt())

}

@SuppressLint("CheckResult")

private fun getPokemon(id: Int) {

val gson = GsonBuilder()

.setFieldNamingPolicy(FieldNamingPolicy.LOWER_CASE_WITH_UNDERSCORES)

.create() //

val retrofit = Retrofit.Builder()

.baseUrl("https://pokeapi.co/api/v2/")

.addConverterFactory(GsonConverterFactory.create(gson))

.addCallAdapterFactory(RxJava2CallAdapterFactory.create())

.build()

val client = retrofit.create(PokemonInfo::class.java)

client.pokemonInfo(id)

.subscribeOn(Schedulers.io())

.observeOn(AndroidSchedulers.mainThread())

.subscribe({

adapter.setPokemonData(it)

adapter.notifyDataSetChanged()

}, {

it.printStackTrace()

})

}

上記のコードを実装すると、下の画像のようにポケモンを図鑑番号で検索することが可能になります。

かわいいですね！

さいごに

今回はRetrofitを使用してポケモンを検索するアプリを作ってみました。今後もRetrofitは使うと思うので、備忘録としてよかったのではないかなと思います。

日	月	火	水	木	金	土
			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

【Kotlin + Retrofit】API通信してみる

はじめに

準備

レイアウトファイルの作成

APIを実装する

さいごに

おすすめ書籍

フォロー

アプリ情報