[Android & Kotlin] TextViewの文字表示

Kotlinで文字列を表示させてみましょう。TexViewとViewBindingを使います。

Android Studio
2024.1.1

TextView

JavaでのTextを表示させるTextViewは下のように作成しましたが、そのコードをKotlinに変えるとどうなるか試してみます。
　

[Android] TextView で文字を表示

テキストを表示するアプリです。テキストはTextViewを使います。

目次
1. テキストの設定
2. サンプルコード

テキストの設定

文字列を表示するために、MainActivity.kt の onCreate() 以下に TextView を設定します。
ViewBindingを使ってレイアウトファイルのIDとコードを結びつけます

ActivityからXMLレイアウトファイルのTextViewを呼び出すには元々 findViewById を使っていました。
findViewById:　

activity_main.xml

<TextView
    android:id="@+id/text_view"
    ...
/>

<TextView

android:id="@+id/text_view"

...

MainActivity.kt

...
val textView: TextView = findViewById(R.id.text_view)
textView.setText(R.string.text);

...

val textView: TextView = findViewById(R.id.text_view)

textView.setText(R.string.text);

これには問題点がありました

コードの間違いがビルドしないと分からない
null safeではない、nullableとして気を付けるしかない
etc.

ViewBinding：　

ViewBindingの設定はまず初めに
以下のように buildFeatures{ viewBinding true } を追加します。

build.gradle (Module: …)

...
android {
    ...
    buildFeatures {
        viewBinding = true
    }
}
...

...

android {

...

buildFeatures {

viewBinding = true

}

...

次に、activity_main.xml ファイル内にある
android:text=”Hello World!”
を削除し代わりに
android:id=”@+id/textview”
を追加します。

<TextView
        android:id="@+id/textview"
        ...
/>

<TextView

android:id="@+id/textview"

...

MainActivity.kt
以下のように追加修正をします。

package com.example.testtextview
...
// com.example.testtextview　はプロジェクトのpackage名に合わせる
// ActivityMainBinding はレイアウトファイルが activity_main の場合  
import com.example.testtextview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    ...
    // ViewBinding Class のインスタンス
    // lateinit で宣言し初期化タイミングを onCreate() まで遅らせる
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // bindingのイニシャライズ
        // Binding Classに含まれる静的 inflate() メソッドを呼び出す
        binding = ActivityMainBinding.inflate(layoutInflater)

        // root view への参照を取得
        val view = binding.root

        // view をsetContentView()にセット
        setContentView(view)

        // レイアウトファイルのIDからtextview
       binding.textview.text = "Test TextView"
    }
}

package com.example.testtextview

...

// com.example.testtextview　はプロジェクトのpackage名に合わせる

// ActivityMainBinding はレイアウトファイルが activity_main の場合

import com.example.testtextview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

...

// ViewBinding Class のインスタンス

// lateinit で宣言し初期化タイミングを onCreate() まで遅らせる

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

// bindingのイニシャライズ

// Binding Classに含まれる静的 inflate() メソッドを呼び出す

binding = ActivityMainBinding.inflate(layoutInflater)

// root view への参照を取得

val view = binding.root

// view をsetContentView()にセット

setContentView(view)

// レイアウトファイルのIDからtextview

binding.textview.text = "Test TextView"

}

ここまででほぼ完成ですが、”Test TextView”の箇所が黄色くワーニングになています。

文字列の設定で、直接記述するリテラルは推奨されないのでリソースに設定します。
res¥values¥ 以下の strings.xml ファイルに書き込みます。

strings.xml

<resources>
    <string name="app_name">KotlinTextView</string>
    <string name="text">Test TextView</string>
</resources>

<string name="app_name">KotlinTextView</string>

<string name="text">Test TextView</string>

</resources>

（app_name はアプリの名前ですからそのまま）

textview ではgetString()でIDをこのように呼び出します

binding.textview.text = getString(R.string.text)

1	binding.textview.text = getString(R.string.text)

記述が簡略化されたとは思えませんが、findViewByIdからのいくつかの問題は解決されています。

サンプルコード

まとめてみます。
　
MainActivity.kt

//package com.example.kotlintextview

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

// com.example.kotlintextview はpackage name に合わせてください
import com.example.kotlintextview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        binding.textview.text = getString(R.string.text)
    }
}

//package com.example.kotlintextview

import android.os.Bundle

import androidx.activity.enableEdgeToEdge

import androidx.appcompat.app.AppCompatActivity

import androidx.core.view.ViewCompat

import androidx.core.view.WindowInsetsCompat

// com.example.kotlintextview はpackage name に合わせてください

import com.example.kotlintextview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge()

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->

val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)

insets

}

binding.textview.text = getString(R.string.text)

}

　
レイアウトです
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">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?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">

<TextView

android:id="@+id/textview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
リソースです
strings.xml

<resources>
    <string name="app_name">KotlinTextView</string>
    <string name="text">Test TextView</string>
</resources>

<string name="app_name">KotlinTextView</string>

<string name="text">Test TextView</string>

</resources>

　
build.gradle (Module: …)
また記述後には Sunc が必要です（エディタ上部に表示が出ます）

...
android {
    ...
    buildFeatures {
        viewBinding = true
    }
}
...

...

android {

...

buildFeatures {

viewBinding = true

}

...

実行します。
　

　
完成ですが、文字が読みづらいので、TextViewにtestSizeとtextColorを設定してみます。
　

<TextView
        ...
        android:textSize="50sp"
        android:textColor="#0000aa"
        ...
/>

<TextView

...

android:textSize="50sp"

android:textColor="#0000aa"

...

　
　
References:
TextView | Android Developers
Kotlin and Android | Android Developers
Kotlin Programming Language
Kotlin Android Extensions の未来