先生と生徒の会話形式で理解しよう

生徒

「Kotlinでスマホアプリを作ってみたいんですが、画面に文字を表示したり入力できる機能ってどうやって使うんですか？」

先生

「それにはTextViewとEditTextという部品を使います。これはAndroidアプリ開発でとてもよく使われる要素ですよ。」

生徒

「なんだか難しそう……。パソコンとかあまり詳しくなくても理解できますか？」

先生

「もちろん大丈夫です！Kotlinでのアプリ開発を、初心者向けにわかりやすく解説していきますね！」

1. TextViewとは？

TextView（テキストビュー）とは、画面に文字（テキスト）を表示するための部品（ウィジェット）のことです。

たとえば、「こんにちは！」という文字をユーザーに見せたいときに使います。入力はできませんが、メッセージやラベルなどの表示に最適です。

2. EditTextとは？

EditText（エディットテキスト）は、ユーザーが文字を入力できる部品です。

例えば、名前を入力する欄や検索する文字を入れるフォームなどで使われます。TextViewが「読むだけの本」なら、EditTextは「書き込めるノート」のようなものです。

3. 実際に使ってみよう！基本の画面レイアウト

まずは、画面の見た目を定義するレイアウトファイル（XML）を作成します。ここではTextViewとEditText、そしてButtonを配置します。


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="ここに名前を入力" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="表示する" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="入力された名前がここに出ます" />

</LinearLayout>

4. Kotlinコードで表示内容を変えてみよう

次に、Kotlinファイルで「ボタンを押すとEditTextの文字がTextViewに表示される」処理を実装します。


import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

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

        val editText = findViewById<EditText>(R.id.editText)
        val button = findViewById<Button>(R.id.button)
        val textView = findViewById<TextView>(R.id.textView)

        button.setOnClickListener {
            val inputText = editText.text.toString()
            textView.text = "こんにちは、$inputText さん！"
        }
    }
}