【Android】Kotlinと一緒に歩むAndroidアプリ開発【初めてのユーザーインターフェース追加】

はじめに

こんにちは、がんがんです。ひょんなことからAndroidアプリを制作することになりました。
昨日、Android×KotlinのHello Worldについての備忘録を上げました。本日はそちらの続きになっております。

昨日の記事は下記より参照ください。
gangannikki.hatenadiary.jp

目次

目的

• Android×Kotlinのチュートリアルを進めていく

Build your first app  |  Android Developers

• ボタン・入力フォームの追加を行う

STEP1 メイン画面のUIを変更

公式サイトを参考にしながら入力フォーム・送信ボタンの追加を行います。

基本的には公式チュートリアルやQiitaの参考記事(下記参照)を用いれば大丈夫です。
配置後の画面はこんな感じです。

配置後の画面

Qiitaの記事をベースにした際の注意点としては下記の部分です(公式より引用)。
制約を付ける部分を忘れていたので公式を参考に修正しました。
Build a simple user interface  |  Android Developers

個人的なハマリポイント1

参考

Kotlinで始めるAndroidアプリ入門（中編） - Qiita
Build a simple user interface  |  Android Developers

STEP2 新規ページの作成および.ktファイルのコーディング

新規のページを導入し、送信のロジックを組んでいきます。まずは送信ボタンです。
詳細な説明などは公式チュートリアルの方が分かりやすいのでそちらをご覧ください。チュートリアルを見ながら、変更部分を含めたコードが載ってたらうれしいなと感じたのでこちらでは載せておきます。

.kt

import android.content.Intent
import android.os.Bundle
import android.view.View
import android.widget.EditText

class MainActivity : AppCompatActivity() {
    val EXTRA_MESSAGE: String = "com.example.myfirstapp.MESSAGE"

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

    /* Sendボタン押下時 */
    //  追加分
    fun sendMessage(view: View) {
        val intent: Intent = Intent(this@MainActivity,
                DisplayMessageActivity::class.java)
        val editText: EditText = findViewById(R.id.editText) as EditText
        val message: String = editText.text.toString()
        intent.putExtra(EXTRA_MESSAGE, message)
        startActivity(intent)
    }
    //  追加分
}

送信ボタンを送信後、送信メッセージが表示される画面を作成します。

新規ページを作成する

作成が完了すると、XMLファイル・.ktファイルも作成されています。生成された.ktファイルを下記のように修正します。

.kt

import androidx.appcompat.app.AppCompatActivity
import android.content.Intent
import android.os.Bundle
import android.widget.TextView

class DisplayMessageActivity : AppCompatActivity() {

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

        //  追加分
        // Activity開始時にIntentを取得し、文字列をセットする
        val intent: Intent = getIntent()
        val message: String = intent.getStringExtra(MainActivity().EXTRA_MESSAGE)
        val textView: TextView = findViewById(R.id.textView)
        textView.setText(message)
    }
    //  追加分
}

参考

Kotlinで始めるAndroidアプリ入門（後編） - Qiita
Start another activity  |  Android Developers

完成画面

コーディングが完成したらエミュレータを起動させます。下記の画面のように遷移すればOKです。
制約を未設定のままだと送信文字列が中央に配置されないので注意が必要です。

[左]メイン画面　[右]送信後の画面

おわりに

今回は前回の続きより簡単なユーザーインターフェースを追加していきました。
基本的にここまではチュートリアルの通りです。次回からは実際に作りたいものに関するライブラリなどを探していこうと思います。

次回の記事はこちらです。
gangannikki.hatenadiary.jp