Kotlinで文字列を表示させてみましょう。TexViewとViewBindingを使います。
2021.1.1
TextView
JavaでのTextを表示させるTextViewは下のように作成しましたが、そのコードをKotlinに変えるとどうなるか試してみます。
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
- 同じ名前のファイルが2つあり、プロジェクト用(Project: xxx)とモジュール用(Module: xxx.app)で、もっぱらモジュール用を使用します。ターゲットのAPIレベルやライブラリーの情報が設定されます。
MainActivity.kt
アプリのエントリポイントで、Kotlin の主なコーディングは MainActivity.ktにします。
アプリをビルドして実行するとこの Activity のインスタンスが起動し、そのレイアウトが読み込まれます。
Empty Activityを選んだので、ある程度の基本的なコードは既に入っています。
1 2 3 4 5 6 7 8 9 10 11 |
//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」ではレイアウトの配置全体をデザイン的に決めていくには便利です。
右上の3つ並んだアイコンで「Code」「Split」「Design」の切り替えができます。
「Code」は並んだアイコンの左端です。
微調整も含めた細かな設定はコーディングがいいでしょう、またネットにある開発情報の多くがコードです。
actvity_main.xml のコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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
1 2 3 4 |
<TextView android:id="@+id/text_view" ... /> |
MainActivity.kt
1 2 3 |
... val textView: TextView = findViewById(R.id.text_view) textView.setText(R.string.text); |
これには問題点がありました
- コードの間違いがビルドしないと分からない
- null safeではない、nullableとして気を付けるしかない
- etc.
kotlinx synthetic:
Kotlinではsyntheticを使い簡略化できましたが…
1 2 3 |
import kotlinx.android.synthetic.main.activity_main.* textView.text = "Hello World!" |
こちらもどこからでも参照されてしまうとか、Kotlinでしか使えないなどで簡略化できるというメリットだけだったので、Googleとしては非推奨としました。代わりにViewBindingが推奨されています。
ViewBinding:
ViewBindingの設定はまず初めに
以下のように buildFeatures{ viewBinding true } を追加します。
build.gradle (Module: …)
1 2 3 4 5 6 7 8 |
... android { ... buildFeatures { viewBinding true } } ... |
次に、activity_main.xml ファイル内にある
android:text=”Hello World!”
を削除し代わりに
android:id=”@+id/textview”
を追加します。
1 2 3 4 |
<TextView android:id="@+id/textview" ... /> |
MainActivity.kt
以下のように追加修正をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
1 2 3 4 |
<resources> <string name="app_name">TestTextView</string> <string name="text">Test TextView</string> </resources> |
(app_name はアプリの名前ですからそのまま)
textview ではgetString()でIDをこのように呼び出します
1 |
binding.textview.text = getString(R.string.text) |
記述が簡略化されたとは思えませんが、findViewByIdからのいくつかの問題は解決されています。
サンプルコード
まとめてみます。
MainActivity.kt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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
1 2 3 4 |
<resources> <string name="app_name">YourAppName</string> <string name="text">Test TextView</string> </resources> |
build.gradle (Module: …)
また記述後には Sunc が必要です(エディタ上部に表示が出ます)
1 2 3 4 5 6 7 8 |
... android { ... buildFeatures { viewBinding true } } ... |
実行します。
完成ですが、文字が読みづらいので、TextViewにtestSizeとtextColorを設定してみます。
1 2 3 4 5 6 |
<TextView ... android:textSize="50sp" android:textColor="#0000aa" ... /> |
References:
TextView | Android Developers
Kotlin and Android | Android Developers
Kotlin Programming Language
Kotlin Android Extensions の未来