Android Kotlin の基礎 01.2: 基本的なアプリの構造

この Codelab は、Android Kotlin の基礎コースの一部です。このコースを最大限に活用するには、Codelab を順番に進めることをおすすめします。コースのすべての Codelab は、Android Kotlin の基礎の Codelab のランディング ページに一覧表示されています。

はじめに

ここまでで、すべての設定が完了し、Android Studio によって多くのコードが作成されました。コードを変更する前に、作成した内容と Android アプリのソースファイルを操作する方法を理解しておくことが重要です。

この Codelab では、Android アプリの主要なコンポーネントについて詳しく学習し、ボタンを使用してアプリに簡単なインタラクティブ機能を追加します。

前提となる知識

• Android Studio をインストールして開く方法。
• 新しいアプリ プロジェクトを作成する方法。
• エミュレータまたは実機でアプリを実行する方法。

学習内容

• アプリのレイアウト ファイルを編集する方法。
• インタラクティブな動作をするアプリを作成する方法。
• 新しい用語がたくさんあります。用語とコンセプトのわかりやすい説明については、用語集をご覧ください。

演習内容

• MainActivity Kotlin ファイルとアクティビティのレイアウト ファイルを確認します。
• XML でアクティビティのレイアウトを編集します。
• Button 要素をアクティビティのレイアウトに追加します。
• ハードコードされた文字列を文字列リソースのファイルに抽出します。
• クリック ハンドラ メソッドを実装して、ユーザーが Button をタップしたときに画面にメッセージを表示します。

この Codelab では、DiceRoller という新しいアプリ プロジェクトを作成し、ボタンを使用して基本的なインタラクティブ機能を追加します。ボタンがクリックされるたびに、表示されるテキストの値が変化します。この Codelab の最終的な DiceRoller アプリは次のようになります。

前回の Codelab では、java ディレクトリや res ディレクトリなど、アプリ プロジェクトの主要な部分について学習しました。このタスクでは、アプリを構成する最も重要な 2 つのファイル（MainActivity Kotlin ファイルと activity_main.xml レイアウト ファイル）に焦点を当てます。

ステップ 1: MainActivity を調べる

MainActivity は Activity の例です。Activity は、Android アプリのユーザー インターフェース（UI）を描画し、入力イベントを受信するコア Android クラスです。アプリが起動すると、AndroidManifest.xml ファイルで指定されたアクティビティが起動します。

多くのプログラミング言語では、プログラムを開始する main メソッドを定義します。Android アプリには main メソッドがありません。代わりに、AndroidManifest.xml ファイルは、ユーザーがアプリのランチャー アイコンをタップしたときに MainActivity を起動することを示します。アクティビティを起動するために、Android OS はマニフェストの情報を使用してアプリの環境をセットアップし、MainActivity を構築します。次に、MainActivity が順番に設定を行います。

各アクティビティには、関連付けられたレイアウト ファイルがあります。アクティビティとレイアウトは、レイアウトのインフレートと呼ばれるプロセスによって接続されます。アクティビティが開始されると、XML レイアウト ファイルで定義されたビューがメモリ内の Kotlin ビュー オブジェクトに変換（または「拡張」）されます。この処理が完了すると、アクティビティはこれらのオブジェクトを画面に描画し、動的に変更することもできます。

1. Android Studio で、[File] > [New] > [New Project] を選択して新しいプロジェクトを作成します。[Empty activity] を使用して、[Next] をクリックします。
2. プロジェクトに DiceRoller という名前を付け、プロジェクト名とプロジェクトのロケーションの他のすべての値を確認します。[Use AndroidX Artifacts] がオンになっていることを確認します。[完了] をクリックします。
   
   
   
3. [Project > Android] ペインで、[java > com.example.android.diceroller] を展開します。MainActivity をダブルクリックします。コードエディタに MainActivity のコードが表示されます。
   
   
   
4. パッケージ名と import ステートメントの下に、MainActivity のクラス宣言があります。MainActivity クラスは AppCompatActivity を拡張しています。

class MainActivity : AppCompatActivity() { ...

AppCompatActivity は Activity のサブクラスで、古いバージョンの Android との下位互換性を維持しながら、最新の Android の機能をすべてサポートします。できるだけ多くのデバイスとユーザーがアプリを利用できるようにするには、常に AppCompatActivity を使用してください。

5. onCreate() メソッドに注目してください。アクティビティは、コンストラクタを使用してオブジェクトを初期化しません。代わりに、アクティビティのセットアップの一部として、一連の事前定義されたメソッド（「ライフサイクル メソッド」と呼ばれる）が呼び出されます。ライフサイクル メソッドの 1 つに onCreate() があります。これは、常に独自のアプリでオーバーライドします。ライフサイクル メソッドの詳細については、後の Codelab で説明します。
   
   onCreate() では、アクティビティに関連付けるレイアウトを指定し、レイアウトを拡張します。setContentView() メソッドは、両方の処理を行います。
   

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

setContentView() メソッドは、実際には整数参照である R.layout.activity_main を使用してレイアウトを参照します。R クラスは、アプリのビルド時に生成されます。R クラスには、res ディレクトリの内容など、アプリのすべてのアセットが含まれます。

この場合、R.layout.activity_main は生成された R クラス、layout フォルダ、activity_main.xml レイアウト ファイルを参照します。（リソースにはファイル拡張子は含まれません）。R クラスでは、アプリの多くのリソース（画像、文字列、レイアウト ファイル内の要素など）を同様の参照を使用して参照します。

ステップ 2: アプリのレイアウト ファイルを調べて確認する

アプリ内のすべてのアクティビティには、アプリの res/layout ディレクトリに関連付けられたレイアウト ファイルがあります。レイアウト ファイルは、アクティビティの実際の外観を表現する XML ファイルです。レイアウト ファイルでは、ビューを定義し、ビューを画面上のどこに表示するかを定義することで、この処理を行います。

ビューは、View クラスを拡張するテキスト、画像、ボタンなどのことです。ビューには、TextView、Button、ImageView、CheckBox など、さまざまな種類があります。

このタスクでは、アプリのレイアウト ファイルを確認して変更します。

1. [Project] > [Android] ペインで、[res] > [layout] を展開し、activity_main.xml をダブルクリックします。レイアウト デザイン エディタが開きます。Android Studio には、アプリのレイアウトを視覚的に構築し、レイアウト デザインをプレビューできるエディタが含まれています。デザイン エディタについては、後の Codelab で詳しく説明します。
2. レイアウト ファイルを XML として表示するには、ウィンドウの下部にある [Text] タブをクリックします。
   
   
   
3. レイアウト エディタ内の既存の XML コードをすべて削除します。新しいプロジェクトで取得するデフォルトのレイアウトは、Android Studio のデザイン エディタを使用する場合の出発点として適しています。このレッスンでは、基盤となる XML を使用して、新しいレイアウトをゼロから作成します。
4. このコードをコピーしてレイアウトに貼り付けます。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

コードを確認します。

1. レイアウトの最上位要素またはルート要素は <LinearLayout> 要素です。LinearLayout ビューは ViewGroup です。ビューグループは、他のビューを保持し、画面上のビューの位置を指定するのに役立つコンテナです。
   
   レイアウトに追加するすべてのビューとビューグループは、ビューの階層に整理されます。最上位の XML 要素がその階層のルートになります。ルートビューには他のビューやビューグループを含めることができ、含まれているビューグループには他のビューやビューグループを含めることができます。アプリが実行されると、XML レイアウト ファイルのビュー階層は、レイアウトが拡張されたときにオブジェクトの階層になります。この場合、ルート ビューグループは線形レイアウトであり、子ビューを線形に（垂直または水平に）順に配置します。
   
   新しい Android プロジェクトでデフォルトで取得されるルートは ConstraintLayout で、デザイン エディタと連携して動作します。このアプリでは、制約レイアウトよりもシンプルな LinearLayout ビューグループを使用します。ビューグループと制約レイアウトについては、次のレッスンで詳しく説明します。
2. LinearLayout タグ内の android:layout_width 属性に注目してください。この LinearLayout の幅は match parent に設定されているため、親と同じ幅になります。これはルートビューであるため、レイアウトは画面の幅いっぱいに拡大されます。
3. wrap_content に設定されている android:layout_height 属性に注目してください。この属性を使用すると、LinearLayout の高さは、そこに含まれるすべてのビューの高さ（現時点では TextView のみ）を合計した長さになります。
4. <TextView> 要素を調べます。テキストを表示するこの TextView は、DiceRoller アプリの唯一の視覚要素です。android:text 属性には、表示する実際の文字列（この場合は文字列 "Hello World!"）が保持されます。
5. <TextView> 要素の android:layout_width 属性と android:layout_height 属性はどちらも wrap_content に設定されています。テキスト ビューのコンテンツはテキスト自体であるため、ビューはテキストに必要なスペースのみを占有します。

ユーザーがサイコロを振って出た目を確認できないと、サイコロを振るアプリはあまり役に立ちません。まず、レイアウトにサイコロを振るボタンを追加し、ユーザーが振ったサイコロの値を表示するテキストを追加します。

ステップ 1: レイアウトにボタンを追加する

1. <Button と入力して Enter キーを押し、テキスト ビューの下のレイアウトに Button 要素を追加します。/> で終わり、layout_width 属性と layout_height 属性を含む Button ブロックが表示されます。

<Button
   android:layout_width=""
   android:layout_height="" />

2. layout_width 属性と layout_height 属性の両方を "wrap_content" に設定します。これらの値を使用すると、ボタンの幅と高さは、ボタンに含まれるテキストラベルと同じになります。
3. ボタンに android:text 属性を追加し、その値を「Roll」に設定します。Button 要素は次のようになります。

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Button ビューの場合、text 属性はボタンのラベルです。レイアウト エディタでは、属性が黄色でハイライト表示されます。これは、ヒントまたは警告を示します。この場合、黄色でハイライト表示されているのは、文字列 "Roll" がボタンラベルにハードコードされているためですが、この文字列はリソースである必要があります。文字列リソースについては、次のセクションで説明します。

ステップ 2: 文字列リソースを抽出する

レイアウト ファイルやコードファイルに文字列をハードコードする代わりに、アプリのすべての文字列を別のファイルに格納することをおすすめします。このファイルは strings.xml と呼ばれ、アプリのリソースの res/values/ ディレクトリにあります。

文字列を別のファイルに保存しておくと、特に文字列を複数回使用する場合に、管理が容易になります。また、アプリの翻訳とローカライズには文字列リソースが必須です。言語ごとに文字列リソース ファイルを作成する必要があるためです。

Android Studio では、ヒントと警告によって、文字列をリソース ファイルに配置することを忘れないようにすることができます。

1. <Button> タグの android:text 属性にある「Roll」文字列を 1 回クリックします。
2. Alt+Enter（macOS の場合は Option+Enter）を押して、ポップアップ メニューから [Extract string resource] を選択します。
3. [リソース名] に「roll_label」と入力します。
4. [OK] をクリックします。res/values/string.xml ファイルに文字列リソースが作成され、Button 要素の文字列がそのリソースへの参照に置き換えられます。
   android:text="@string/roll_label"
5. [Project > Android] ペインで、[res > values] を展開し、[strings.xml] をダブルクリックして、strings.xml ファイルで文字列リソースを確認します。

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

ヒント: strings.xml ファイルには、先ほど追加した文字列に加えて、アプリ名も含まれています。空のテンプレートを使用してアプリ プロジェクトを開始すると、画面上部のアプリバーにアプリ名が表示されます。アプリ名を変更するには、app_name リソースを編集します。

ステップ 3: ビューのスタイルを設定して配置する

レイアウトに TextView ビューと Button ビューが 1 つずつ含まれるようになりました。このタスクでは、ビュー グループ内のビューを配置して、より魅力的にします。

1. [デザイン] タブをクリックすると、レイアウトのプレビューが表示されます。現在、両方のビューが横に並んで画面の上部に押し上げられています。
   
   
   
2. [Text] タブをクリックして、XML エディタに戻ります。LinearLayout タグに android:orientation 属性を追加し、その値を "vertical" に設定します。<LinearLayout> 要素は次のようになります。

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

LinearLayout ビューグループは、含まれているビューを 1 つずつ横一列または縦一列に配置します。デフォルトは水平です。TextView を Button の上に重ねて表示したいので、向きを垂直に設定します。デザインは次のようになります。ボタンがテキストの下に配置されています。

3. TextView と Button の両方に android:layout_gravity 属性を追加し、値 "center_horizontal" を指定します。これにより、両方のビューが水平軸の中央に沿って配置されます。TextView 要素と Button 要素は次のようになります。

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. 線形レイアウトに android:layout_gravity 属性を追加し、値 "center_vertical" を指定します。LinearLayout 要素は次のようになります。

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

注: （center_horizontal ではなく）ボタンとテキストの両方のビューに center_vertical 重力を追加すると、ビューはレイアウトの中央に水平方向と垂直方向の両方で配置されます。つまり、ビューが互いに重なり合っています。

すべての子要素を一度に中央に配置するには、上記のように親（LinearLayout 要素）で center_vertical を使用します。

5. テキストビューのテキストのサイズを大きくするには、<TextView> 要素に android:textSize 属性を追加し、値として "30sp" を指定します。sp は scalable pixels の略で、デバイスのディスプレイ品質とは無関係にテキストのサイズを測る単位です。TextView 要素は次のようになります。

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. アプリをコンパイルして実行します。
   
   
   

テキストとボタンの両方が適切に配置され、テキスト ビューのテキストが大きくなりました。ボタンにはまだ機能がないため、クリックしても何も起こりません。次に、その作業を行います。

ステップ 4: コードでボタンへの参照を取得する

MainActivity の Kotlin コードは、ボタンをタップしたときの動作など、アプリのインタラクティブな部分を定義する役割を担っています。ボタンがクリックされたときに実行される関数を作成するには、MainActivity のインフレートされたレイアウトで Button オブジェクトへの参照を取得する必要があります。ボタンへの参照を取得するには:

• XML ファイルで Button に ID を割り当てます。
• コードで findViewById() メソッドを使用して、特定の ID を持つ View への参照を取得します。

Button ビューへの参照を取得したら、そのビューでメソッドを呼び出して、アプリの実行中に動的に変更できます。たとえば、ボタンがタップされたときにコードを実行するクリック ハンドラを追加できます。

1. activity_main.xml レイアウト ファイルを開き（まだ開いていない場合）、[テキスト] タブをクリックします。
2. ボタンに android:id 属性を追加し、名前（この場合は「@+id/roll_button"」）を付けます。<Button> 要素は次のようになります。

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

XML レイアウト ファイルでビューの ID を作成すると、Android Studio は、生成された R クラスにその ID の名前を持つ整数定数を作成します。たとえば、ビューに roll_button という名前を付けると、Android Studio は R クラスに roll_button という整数定数を生成して作成します。ID 名の "@+id" 接頭辞は、その ID 定数を R クラスに追加するようコンパイラに指示します。XML ファイル内のすべてのビュー ID にこの接頭辞を付ける必要があります。

3. MainActivity Kotlin ファイルを開きます。onCreate() 内の setContentView() の後に、次の行を追加します。

val rollButton: Button = findViewById(R.id.roll_button)

findViewById() メソッドを使用して、XML クラスで定義したビューの View 参照を取得します。この場合、R クラスと ID roll_button から Button 参照を取得し、その参照を rollButton 変数に割り当てます。

注: 行をコピーして貼り付けるのではなく、手動で入力すると、入力し始めた時点で Android Studio によって ID 名のオートコンプリートのヒントが表示されます。

4. Android Studio では、Button クラスが赤色でハイライト表示され、下線が引かれています。これは、未解決の参照であり、このクラスを使用する前にインポートする必要があることを示しています。完全修飾クラス名を示すツールチップが表示されることもあります。
   
   
   
5. Alt+Enter（Mac の場合は Option+Enter）を押して、完全修飾クラス名を受け入れます。

ヒント: 意味が明確なクラスの import ステートメントを自動的に追加するように Android Studio を設定できます。[Editor] > [General] > [Auto Import] の設定パネルでは、インポートの処理方法を指定します。

ステップ 5: トーストを表示するクリック ハンドラを追加する

クリック ハンドラは、ユーザーがクリック可能な UI 要素（ボタンなど）をクリックまたはタップするたびに呼び出されるメソッドです。クリック ハンドラを作成するには、次のものが必要です。

• なんらかのオペレーションを実行するメソッド。
• Button をハンドラ メソッドに接続する setOnClickHandler() メソッド。

このタスクでは、Toast を表示するクリック ハンドラ メソッドを作成します。（トーストとは、画面に短時間表示されるメッセージのことです）。クリック ハンドラ メソッドを Button に接続します。

1. MainActivity クラスの onCreate() の後に、rollDice() というプライベート関数を作成します。

private fun rollDice() {
  
}

2. rollDice() が呼び出されたときに Toast を表示するには、rollDice() メソッドに次の行を追加します。

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

トーストを作成するには、Toast.makeText() メソッドを呼び出します。このメソッドには次の 3 つが必要です。

• Context オブジェクト。Context オブジェクトを使用すると、Android OS の現在の状態に関する情報を取得し、通信できます。ここで Context が必要なのは、Toast オブジェクトが OS にトーストを表示するよう指示できるようにするためです。AppCompatActivity は Context のサブクラスであるため、コンテキストにはキーワード this を使用できます。
• 表示するメッセージ（ここでは "button clicked"）。
• メッセージの表示時間。最後に show() メソッドがトーストを表示します。

3. onCreate() で、findViewById() の呼び出しの後に次の行を追加して、rollDice() を rollButton オブジェクトのクリック ハンドラとして割り当てます。

rollButton.setOnClickListener { rollDice() }

MainActivity クラスの完全な定義は次のようになります。

class MainActivity : AppCompatActivity() {

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

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. アプリをコンパイルして実行します。ボタンをタップするたびに、トーストが表示されます。

このタスクでは、rollDice() メソッドを変更して、TextView のテキストを変更します。最初のステップでは、このテキストを "Hello World!" から文字列 "Dice Rolled!" に変更します。2 番目のステップでは、1 ～ 6 の乱数を表示します。

ステップ 1: 文字列を表示する

1. activity_main.xml を開き、TextView に ID を追加します。

android:id="@+id/result_text"

2. MainActivity を開きます。rollDice() メソッドで、Toast を表示する行をコメントアウトします。
3. findViewById() メソッドを使用して、ID で TextView への参照を取得します。参照を resultText 変数に割り当てます。

val resultText: TextView = findViewById(R.id.result_text)

4. resultText.text プロパティに新しい文字列を割り当てて、表示されるテキストを変更します。この文字列をリソースに抽出するヒントは無視してかまいません。これは一時的な文字列です。

resultText.text = "Dice Rolled!"

5. アプリをコンパイルして実行します。[Roll] ボタンをタップすると、TextView が更新されることに注意してください。

ステップ 2: ランダムな数値を表示する

最後に、このタスクでは、ボタンクリックにランダム性を追加して、サイコロのロールをシミュレートします。ボタンがクリックまたはタップされるたびに、コードは 1 から 6 までの乱数を選択し、TextView を更新します。乱数を生成するタスクは Android 固有のものではなく、Random クラスを使用して行います。

1. rollDice() メソッドの先頭で、Random.nextInt() メソッドを使用して 1 ～ 6 の乱数を取得します。

val randomInt = Random().nextInt(6) + 1

2. text プロパティを、ランダムな整数の値（文字列）に設定します。

resultText.text = randomInt.toString()

3. アプリをコンパイルして実行します。[Roll] ボタンをタップするたびに、テキスト ビューの数値が変化します。

Android Studio プロジェクト: DiceRoller

注: コーディングに関する課題はすべて任意です。

チャレンジ: [Roll] ボタンのすぐ下に表示される「Count Up」というラベルの付いた 2 つ目のボタンをアプリに追加します。タップすると、[Count Up] ボタンは結果テキスト ビューの現在の値を取得し、それに 1 を追加して、テキスト ビューを更新します。次のエッジケースを処理してください。

• 結果のテキスト ビューにまだ数値が含まれていない場合（つまり、テキスト ビューにまだデフォルトの「Hello World」文字列がある場合）、結果のテキストを 1 に設定します。
• 数がすでに 6 の場合は、何も行いません。

ヒント: TextView ビューの文字列は、クラス CharSequence のインスタンスです。値をテストするには、文字列に変換する必要があります。

resultText.text.toString()

コーディング チャレンジの解答コード

Android Studio プロジェクト: DiceRoller-challenge

アクティビティ

• MainActivity は AppCompatActivity のサブクラスであり、AppCompatActivity は Activity のサブクラスです。Activity は、Android アプリの UI の描画と入力イベントの受信を行うコア Android クラスです。
• すべてのアクティビティには、関連付けられたレイアウト ファイル（アプリのリソース内の XML ファイル）があります。レイアウト ファイルにはアクティビティの名前が付けられます（例: activity_main.xml）。
• MainActivity の setContentView() メソッドは、レイアウトをアクティビティに関連付け、アクティビティが作成されたときにそのレイアウトをインフレートします。
• レイアウトの拡張とは、XML レイアウト ファイルで定義されたビューがメモリ内の Kotlin ビュー オブジェクトに変換（または拡張）されるプロセスです。レイアウトのインフレートが行われると、Activity はこれらのオブジェクトを画面に描画し、動的に変更できます。

ビュー

• アプリのレイアウト内のすべての UI 要素は View クラスのサブクラスであり、ビューと呼ばれます。TextView と Button はビューの例です。
• View 要素は ViewGroup 内でグループ化できます。ビューグループは、内部のビューや他のビューグループのコンテナとして機能します。LinearLayout は、ビューを線形に配置するビューグループの例です。

属性を表示

• android:layout_width 属性と android:layout_height 属性は、ビューの重みと高さを表します。match_parent 値は、ビューを親の幅または高さまで拡大します。wrap_content 値は、ビューのコンテンツに合わせてビューを縮小します。
• android:text 属性は、ビューが表示するテキストを示します（ビューがテキストを表示する場合）。ボタンの場合、android:text はボタンのラベルです。
• LinearLayout ビューグループの android:orientation 属性は、含まれるビュー要素を配置します。値が horizontal の場合、ビューは左から右に配置されます。vertical の値は、ビューを上から下に配置します。
• android:layout_gravity 属性は、ビューとそのすべての子の配置を決定します。
• android:textSize 属性は、テキストビュー内のテキストのサイズを定義します。テキストサイズは sp 単位（スケーラブル ピクセル）で指定します。sp 単位を使用すると、デバイスのディスプレイ品質に関係なくテキストのサイズを設定できます。

文字列

• レイアウトに文字列をハードコードするのではなく、文字列リソースを使用することをおすすめします。
• 文字列リソースは values/res/string.xml ファイルに格納されています。
• 文字列を抽出するには、Alt+Enter（Mac では Option+Enter）を使用します。ポップアップ メニューから [文字列リソースを抽出] を選択します。

ビューの使用

• Kotlin コードをレイアウトで定義したビューに接続するには、ビューが拡張された後にビュー オブジェクトへの参照を取得する必要があります。レイアウト内のビューに ID（android:id）を割り当て、findViewById() メソッドを使用して関連付けられたビュー オブジェクトを取得します。
• XML レイアウト ファイルでビューの ID を作成すると、Android Studio は、生成された R クラスにその ID の名前を持つ整数定数を作成します。この R.id 参照は findViewById() メソッドで使用できます。
• Kotlin コードでは、プロパティ名で直接ビュー オブジェクトの属性を設定できます。たとえば、テキストビューのテキストは XML の android:text 属性で定義され、Kotlin の text プロパティで定義されます。
• クリック ハンドラは、ユーザーが UI 要素をクリックまたはタップしたときに呼び出されるメソッドです。クリック ハンドラ メソッドをボタンなどのビューにアタッチするには、setOnClickListener() メソッドを使用します。

トーストの使用

トーストは、小さなポップアップ ウィンドウに簡単なメッセージを表示するビューです。

トーストを作成するには、Toast クラスの makeText() ファクトリ メソッドを 3 つの引数で呼び出します。

• アプリ Activity のコンテキスト
• 表示するメッセージ（文字列リソースなど）
• 期間（例: Toast.LENGTH_SHORT）

トーストを表示するには、show() を呼び出します。

Udacity コース:

• Kotlin による Android アプリの開発

Android デベロッパー ドキュメント:

• Android Studio の概要
• レイアウト
• View
• Button
• TextView
• アプリのリソースの概要
• 入力イベントの概要
• findViewById()
• setOnClickListener()
• Context

その他:

• 語彙とコンセプトの用語集

このセクションでは、インストラクター主導のコースの一環として、この Codelab に取り組んでいる生徒向けに考えられる宿題をいくつか示します。インストラクターは、以下のようなことを行えます。

• 必要に応じて宿題を与える
• 宿題の提出方法を生徒に伝える
• 宿題を採点する

インストラクターは、これらの提案を必要なだけ使用し、必要に応じて他の宿題も自由に与えることができます。

この Codelab に独力で取り組む場合は、これらの宿題を自由に使用して知識をテストしてください。

アプリを変更する

DiceRoller アプリを開きます。[Roll] ボタンのすぐ下に表示される [Reset] というラベルのボタンをアプリに追加します。このボタンで結果テキスト ビューを 0 にリセットします。

以下の質問に回答してください

問題 1

アプリのレイアウトをインフレートして、レイアウトのビューをオブジェクトとして使用できるようにする Activity のメソッドはどれですか。

• onCreate()
• setClickListener()
• setContentView()
• show()

問題 2

ビューの幅をコンテンツに合わせて設定するために使用するビュー属性はどれですか。

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

採点のためアプリを送信する

アプリに以下の機能があることを確認します。

• アプリのレイアウトには、1 つのテキスト ビューと 2 つのボタンを含める必要があります。
• アプリのコードで、ボタンごとに 1 つずつ、2 つのクリック ハンドラを設定する必要があります。
• テキストビューをリセットするクリック ハンドラは、テキスト プロパティを 0 に設定する必要があります。

次のレッスンに進む: 1.3 イメージ リソースと互換性

このコースの他の Codelab へのリンクについては、Android Kotlin の基礎の Codelab のランディング ページをご覧ください。