소개

지난번에 계속해서 Android 앱 개발에 대해 도전해 갑시다. 계속해서 공부하고 있으면, 왠지 쓰고 있던 코드의 의미가 조금씩입니다만, 생각해 쓸 수 있게 되어 왔습니다. 하지만 그냥 계속할 뿐이라고 힘들어 온다고 생각합니다. 그래서 이번에는 실제로 본 적이있는 한 장면을 만드는 코드를 공부해 나가려고합니다. 실제로 본 적이있는 것을 만들 수 있다면 달성감이있어 동기 부여에도 연결된다고 생각합니다.

목록 화면 만들기

우선은, 상품의 일람을 리스트 표시하는 코드로부터 써 갑니다. 단지 상품을 나열하는 것만으로는 맛이 없기 때문에, 상품명과 가격이 2행으로 표시되는 리스트를 작성하고 싶습니다.

res/values/string.xml

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

<resources>
    <string name="app_name">
        Online Shopping
    </string>

    <string name="tv_thx_title">
        注文完了
    </string>

    <string name="tv_thx_desc">
        以下の商品を注文しました。\nご注文ありがとうございます。
    </string>

    <string name="bt_thx_back">
        一覧に戻る
    </string>

</resources>

res/layout/activity_main.xml

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

<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lvMenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

java/com.websarva.wings.android.a03_01_sample1/MainActivity.kt

package com.websarva.wings.android.a03_01_sample1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ListView
import android.widget.SimpleAdapter

class MainActivity : AppCompatActivity()
{

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

        val lvMenu = findViewById<ListView>(R.id.lvMenu)
        val menuList: MutableList<MutableMap<String, String>> = mutableListOf()

        var menu = mutableMapOf("name" to "充電器", "price" to "300円" )
        menuList.add(menu)

        menu = mutableMapOf("name" to "ディスプレイ", "price" to "20000円" )
        menuList.add(menu)

        menu = mutableMapOf("name" to "ノート", "price" to "100円" )
        menuList.add(menu)
　　　　　〜繰り返し〜

        val from = arrayOf("name", "price")
        val to = intArrayOf(android.R.id.text1, android.R.id.text2)
        val adapter = SimpleAdapter(applicationContext, menuList, android.R.layout.simple_expandable_list_item_2, from, to)
        lvMenu.adapter = adapter
    }
}

이 때, 16행 이후의 menu는 변수 선언을 이미 하고 있기 때문에 다시 선언할 필요는 없습니다.

특히 문제가 없으면 다음 이미지가 화면에 표시된다고 생각합니다.

Android 화면 전환 설정

그러면, 이번 메인 테마인 화면 천이를 설정해 가고 싶습니다. 화면 전환에서는 표시되는 화면이 늘어나므로 Android Studio의 기능을 사용하여 추가합시다.

[java] 폴더를 선택한 상태에서 [File] 메뉴에서,
[New] → [Activity] → [Empty Active]
를 선택하면 다음 이미지가 표시됩니다.

Launcher Activity 확인란의 선택을 취소하는 것에 유의하여 Finish를 선택합니다.
새로운 MenuThanksActivity.java 파일과 active_menu_thanks.xml 파일이 추가되었다고 생각합니다.

그럼 다시 코드를 써 봅시다.
우선 주문 완료 화면의 레이아웃을 편집합니다.

res/layout/activity_menu_thanks.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:text="@string/tv_thx_title"
        android:textSize="25sp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="@string/tv_thx_desc"
        android:textSize="15sp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

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

        <TextView
            android:id="@+id/tvMenuPrice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onBackButtonClick"
        android:text="@string/bt_thx_back"/>

</LinearLayout>

다음은 화면 전환 코드를 작성해 보겠습니다. 주로, 리스트 탭의 리스트 작성과 그 등록을 기술이 됩니다.
이 코드는 목록 화면에 대한 처리이므로 MainActivity에 추가합니다.

java/com.websarva.wings.android.a03_01_sample1/MainActivity.kt

        〜省略〜
        lvMenu.adapter = adapter
        lvMenu.onItemClickListener = ListItemClickListener()
    }

    private inner  class ListItemClickListener : AdapterView.OnItemClickListener
    {
        override fun onItemClick(parent: AdapterView<*>, view: View?, position: Int, id: Long)
        {
         val item = parent.getItemAtPosition(position) as MutableMap<String, String>

            val menuName = item["name"]
            val menuPrice = item["price"]

            val intent = Intent(applicationContext, MenuThanksActivity::class.java)

            intent.putExtra("menuName", menuName)
            intent.putExtra("menuPrice", menuPrice)

            startActivity(intent)
        }
    }
}

마지막으로 주문 완료 액티비티에 처리를 기술해 봅시다.

java/com.websarva.wings.android.a03_01_sample1/MenuThanksActivity.kt

package com.websarva.wings.android.a02_25_sample01

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.TextView

class MenuThanksActivity : AppCompatActivity()
{

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

        val menuName = intent.getStringExtra("menuName")
        val menuPrice = intent.getStringExtra("menuPrice")

        val tvMenuName = findViewById<TextView>(R.id.tvMenuName)
        val tvMenuPrice = findViewById<TextView>(R.id.tvMenuPrice)

        tvMenuName.text = menuName
        tvMenuPrice.text = menuPrice
    }

    fun onBackButtonClick(view: View)
    {
        finish()
    }
}

완성입니다!
이제 완성된 앱을 열어 보겠습니다. 목록의 상품을 선택하면 다음 화면이 표시된다고 생각합니다.

마지막으로

어떻습니까? 아무래도 우편 주문 앱에서 본 적이있는 것이 아닐까요. 이렇게 조금씩이지만 안드로이드 앱 개발의 지식이 익숙해지는 것을 느낄 수 있었다고 생각합니다.

본 기사는, 「기초＆응용력을 제대로 육성! 안드로이드 앱 개발의 교과서 Kotlin 대응 왜냐하면 개발자가 되지 않기 위한 실천 핸즈온』을 참고로 하고 있습니다.