[Android & Kotlin] TextViewの文字表示

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

Android Studio
2021.1.1

TextView

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

[Android] TextView で文字を表示

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

目次
1. Kotlinプロジェクトの作成
　1.1 プロジェクト構成ファイル
　1.2 MainActivity.kt
　1.3 activity_main.xml
2. ViewBinding
3. サンプルコード

Kotlinプロジェクトの作成

　
プロジェクト作成はLanguageの切り替えだけでKotlinとJavaの作り分けができます。
　
プロジェクトを作成するときに、プロジェクト名を設定するステップで
　

　
Languageの設定をKotlinにします。
　
これだけでプロジェクトがKotlin仕様で作成れます。

プロジェクト構成ファイル

　
プロジェクトを作ると幾つかのファイルが既にできています。

MainActivity.kt
activity_main.xml
AndroidManifest.xml
- マニフェストにはアプリの各コンポーネントが定義されていて、セキュリティ上ユーザーに許可を得るための記述などがされています。
build.gradle
- 同じ名前のファイルが２つあり、プロジェクト用（Project: xxx）とモジュール用（Module: xxx.app）で、もっぱらモジュール用を使用します。ターゲットのAPIレベルやライブラリーの情報が設定されます。

MainActivity.kt

　
アプリのエントリポイントで、Kotlin の主なコーディングは MainActivity.ktにします。

アプリをビルドして実行するとこの Activity のインスタンスが起動し、そのレイアウトが読み込まれます。

Empty Activityを選んだので、ある程度の基本的なコードは既に入っています。

//package your.package.name

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

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

//package your.package.name

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

}

activity_main.xml

　
Activity のユーザーインターフェース（UI）のレイアウトを定義する XML ファイルで、ここにコードを記述あるいは「Design」タグからレイアウトエディタでも作成が可能です。

やり方としては、

「Design」を使って画面上にUIパーツを配置する
「Code」で全てコードで記述

「Design」ではレイアウトの配置全体をデザイン的に決めていくには便利です。

右上の３つ並んだアイコンで「Code」「Split」「Design」の切り替えができます。

　
「Code」は並んだアイコンの左端です。
微調整も含めた細かな設定はコーディングがいいでしょう、またネットにある開発情報の多くがコードです。

actvity_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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        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:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ViewBinding

　
文字列を表示するために、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.

kotlinx synthetic：

Kotlinではsyntheticを使い簡略化できましたが…

import kotlinx.android.synthetic.main.activity_main.*

textView.text = "Hello World!"

import kotlinx.android.synthetic.main.activity_main.*

textView.text = "Hello World!"

こちらもどこからでも参照されてしまうとか、Kotlinでしか使えないなどで簡略化できるというメリットだけだったので、Googleとしては非推奨としました。代わりにViewBindingが推奨されています。

　
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">TestTextView</string>
    <string name="text">Test TextView</string>
</resources>

<string name="app_name">TestTextView</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.testtextview

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

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

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

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

//package com.example.testtextview

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

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

import com.example.testtextview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

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">YourAppName</string>
    <string name="text">Test TextView</string>
</resources>

<string name="app_name">YourAppName</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 の未来