Kotlin の例題 （火星の表面の写真を表示）

課題

次のスクリプトで得られる画像を表示するプログラムを Kotlin で記述
ライブラリーは、
Retrofit2 と Coil を使用

get_photo.sh

http https://android-kotlin-fun-mars-server.appspot.com/photos/ | jq .[0].img_src

実行結果

./get_photo.sh 
"https://mars.jpl.nasa.gov/msl-raw-images/msss/01000/mcam/1000MR0044631300503690E01_DXXX.jpg"

プロジェクトの作成

プロジェクト名を oct2301 としました。

環境設定

インターネットにアクセスできるようにします。

manifests/AndroidManifest.xml

（省略）
<uses-permission android:name="android.permission.INTERNET" />
（省略）

Retrofit2 と Coil を使う設定

app/build.gradle.kts

（省略）
dependencies {
    implementation("com.squareup.retrofit2:retrofit:2.9.0")
    implementation("com.squareup.retrofit2:converter-gson:2.9.0")
    implementation("io.coil-kt:coil:2.4.0")
（省略）

画面

res/layout/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">


    <LinearLayout
        android:layout_width="409dp"
        android:layout_height="729dp"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Good Morning"
            android:textSize="30sp" />

         <ImageView
        android:id="@+id/image_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#CCCCCC"/>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

プログラム

MainActivity.kt

package com.example.oct2301

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import android.widget.ImageView
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET
import coil.load
import kotlinx.coroutines.*
import kotlinx.coroutines.Dispatchers.IO

data class Photo(val id: Int, val img_src: String)

interface ApiService {
    @GET("photos")
    suspend fun getPhotos(): List<Photo>
}

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

        val imageUrl =
            "https://www.city.fuji.shizuoka.jp/page/gazou/fmervo000001dsro-att/rn2ola000000lk6n.JPG"
val timageView = findViewById<ImageView>(R.id.image_view)
        timageView.load(imageUrl)

        var textMessage_a = findViewById<TextView>(R.id.textView)
textMessage_a.setText("AAA")

        val retrofit = Retrofit.Builder()
            .baseUrl("https://android-kotlin-fun-mars-server.appspot.com/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()

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

       CoroutineScope(Dispatchers.Main).launch{
            try {
                val apiResponse = apiService.getPhotos()
                if (apiResponse.isNotEmpty()) {
                    println("*** launch *** aaa *** PM 17:29")
                    val firstPhoto = apiResponse[0].img_src
                    println("" + firstPhoto)
                    println("*** launch *** ccc *** PM 17:29")
                    var textMessage_b = findViewById<TextView>(R.id.textView)
                    textMessage_b.setText("BBBB")

                   textMessage_b.setText(firstPhoto)
                    timageView.load(firstPhoto)
println("*** launch *** eee *** PM 17:29")
                }
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }
}

実行結果

Coil が使えることの確認の為に、まず富士山を表示します。