このページは Cloud Translation API によって翻訳されました。

Android Kotlin の基礎 02.1: Layout Editor を使用した線形レイアウト

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

前提となる知識

Kotlin で基本的な Android アプリを作成します。
エミュレータまたはデバイスで Android アプリを実行する。
LinearLayout の基本。
LinearLayout と TextView を使用する簡単なアプリを作成します。

学習内容

View と ViewGroup の使用方法。
LinearLayout. を使用して Activity 内のビューを配置する方法
スクロール可能なコンテンツを表示するために ScrollView を使用する方法。
View の公開設定を変更する方法。
文字列リソースとディメンションリソースの作成方法と使用方法。
Android Studio の Layout Editor を使用してリニアレイアウトを作成する方法。

演習内容

AboutMe アプリを作成します。
レイアウトに TextView を追加して、名前を表示します。
ImageView. を追加する
スクロール可能なテキストを表示する ScrollView を追加します。

AboutMe アプリでは、自分に関する興味深い事実を紹介したり、友人、家族、ペット向けにアプリをカスタマイズしたりできます。このアプリには、名前、[完了] ボタン、星の画像、スクロール可能なテキストが表示されます。

このタスクでは、AboutMe Android Studio プロジェクトを作成します。

Android Studio が開いていない場合は開きます。
Android Studio でプロジェクトがすでに開いている場合は、[File] > [New] > [New Project] を選択します。
プロジェクトがまだ開いていない場合は、[Welcome to Android Studio] ダイアログで [+ Start a new Android Studio project] を選択します。
[Create New Project] ダイアログの [Phone and Tablet] タブで、[Empty Activity] テンプレートを選択します。[次へ] をクリックします。
次の [Create New Project] ダイアログで、次のパラメータを設定して [Finish] をクリックします。

属性	値
アプリケーション名	AboutMe
Company Name android	`com.android.example.AboutMe` （または独自のドメイン）
保存場所	デフォルトの場所のままにするか、任意のディレクトリに変更します。
言語	Kotlin
最小 API レベル	API 19: Android 4.4（KitKat）
このプロジェクトは Instant Apps をサポートします	このチェックボックスはオフのままにします。
AndroidX アーティファクトを使用する	このチェックボックスをオンにします。

Android Studio でプロジェクトファイルが生成されるまでしばらく待ちます。

アプリを実行します。空白の画面に文字列「Hello World」が表示されます。

Empty Activity テンプレートでは、空のアクティビティ Mainactivity.kt が 1 つ作成されます。また、このテンプレートは activity_main.xml というレイアウトファイルも作成します。レイアウトファイルのルート ViewGroup は ConstraintLayout で、コンテンツは単一の TextView です。

このタスクでは、生成されたルート ViewGroup を LinearLayout に変更します。UI 要素を垂直方向に配置することもできます。

グループを表示

ViewGroup は、他のビューやビューグループである子ビューを含むことができるビューです。レイアウトを構成するビューは、ビューグループをルートとするビューの階層として編成されます。

LinearLayout ビューグループでは、UI 要素は水平方向または垂直方向に配置されます。

ルートレイアウトを変更して LinearLayout ビューグループを使用するようにします。

[Project] > [Android] ペインを選択します。app/res/layout フォルダで、activity_main.xml ファイルを開きます。
[テキスト] タブを選択し、ルートビューグループを ConstraintLayout から LinearLayout に変更します。
TextView を削除します。LinearLayout 要素に android:orientation 属性を追加し、vertical に設定します。

テスト前:

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

テスト後:

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

</LinearLayout>

Layout Editor は、Android Studio 内のビジュアルデザインツールです。アプリのレイアウトを作成するために XML コードを手動で記述する代わりに、Layout Editor を使用して UI 要素を Design Editor にドラッグできます。

Layout Editor を表示するには、[Design] タブをクリックします。下のスクリーンショットは、レイアウトエディタの各部分を示しています。

Design Editor: 画面レイアウトの視覚的な表現を [Design] ビュー、[Blueprint] ビュー、または両方のビューで表示します。デザインエディタはレイアウトエディタのメイン部分です。

ツールバー: デザインエディタでレイアウトの外観を設定したり、レイアウト属性を変更したりするためのボタンが並んでいます。たとえば、デザインエディタでレイアウトの表示を変更するには、[Select Design Surface ] プルダウンメニューを使用します。

[ Design] を使用すると、レイアウトの実際のプレビューを表示できます。
[Blueprint] を選択すると、各ビューのアウトラインだけを表示できます。
[Design + Blueprint] を使用すると、両方のディスプレイを並べて表示できます。

Palette: レイアウトまたは [Component Tree] ペインにドラッグできるビューおよびビューグループのリストを表示します。

[Attributes]: 現在選択されているビューまたはビューグループの属性が表示されます。属性の完全なリストとよく使用される属性を切り替えるには、ペインの上部にあるアイコンを使用します。

コンポーネントツリー: レイアウトの階層をビューのツリーとして表示します。コンポーネントツリーは、デザインエディタで選択できない小さなビュー、非表示のビュー、重なり合うビューがある場合に便利です。

ステップ 1: TextView を追加する

res/layout/activity_main.xml ファイルを開きます（まだ開いていない場合）。
[テキスト] タブに切り替えて、コードを調べます。コードには、ルートビューグループとして LinearLayout があります。（ビューグループ は、他のビューを含むビューです。）

LinearLayout には、必須属性 layout_height、layout_width、orientation があります。デフォルトでは vertical です。
[Design] タブに切り替えて、レイアウトエディタを開きます。

[Palette] ペインからデザインエディタにテキストビューをドラッグします。
[Component Tree] ペインに注目してください。新しいテキストビューは、親ビューグループ（LinearLayout）の子要素として配置されます。
[属性] ペインを開きます（まだ開いていない場合）。（ペインを開くには、デザインエディタで新しく追加された TextView をダブルクリックします）。
[属性] ペインで次の属性を設定します。

属性	値
ID	`name_text`
テキスト	自分の名前に設定します。（テキストフィールドの 1 つに、`tools` 名前空間用であることを示すレンチアイコンが表示されています。レンチのない方は `android` 名前空間用です（これが目的のテキストフィールドです）。
textAppearance > textSize	`20sp`
textAppearance > textColor	`@android:color/black`
textAppearance > textAlignment	Center

ステップ 2: 文字列リソースを作成する

[Component Tree] の TextView, の横に、警告アイコンが表示されます。警告テキストを表示するには、下のスクリーンショットに示すように、アイコンをクリックするか、アイコンにカーソルを合わせます。

警告を解決するには、文字列リソースを作成します。

[属性] ペインで、名前に設定したテキスト属性の横にある 3 つのドットをクリックします。リソースエディタが開きます。
[Resources] ダイアログで、[Add new resource] > [New string Value] を選択します。
[New String Value Resource] ダイアログで、[Resource name] フィールドを name に設定します。[リソース値] フィールドに独自の名前を設定します。[OK] をクリックします。警告が消えています。
res/values/strings.xml ファイルを開き、name という名前の新しい文字列リソースを探します。

<string name="name">Aleks Haecky</string>

ステップ 3: ディメンションリソースを作成する

リソースエディタを使用してリソースを追加したばかりです。XML コードエディタでリソースを抽出して、新しいリソースを作成することもできます。

activity_main.xml ファイルで、[テキスト] タブに切り替えます。
textSize 行で、番号（20sp）をクリックし、Alt+Enter（Mac の場合は Option+Enter）と入力します。ポップアップメニューから [Extract dimension resource] を選択します。
[Extract Resource] ダイアログで、[Resource name] フィールドに「text_size」と入力します。[OK] をクリックします。
res/values/dimens.xml ファイルを開いて、生成された次のコードを確認します。

<dimen name="text_size">20sp</dimen>

MainActivity.kt ファイルを開き、onCreate() 関数の末尾にある次のコードを探します。

setContentView(R.layout.activity_main)

setContentView() 関数は、レイアウトファイルを Activity に接続します。指定されたレイアウトリソースファイルは R.layout.activity_main です。

R はリソースへの参照です。これは、アプリ内のすべてのリソースの定義を含む自動生成クラスです。
layout.activity_main は、リソースが activity_main という名前のレイアウトであることを示します。

アプリを実行します。名前を含む TextView が表示されます。

アプリの画面を見ると、名前が画面の上部に押し付けられているため、パディングとマージンを追加します。

パディングとマージン

パディングとは、ビューまたは要素の境界内のスペースです。下の図に示すように、ビューの端とビューのコンテンツの間のスペースです。

ビューのサイズにはパディングが含まれます。よく使用されるパディング属性は次のとおりです。

android:padding は、ビューの 4 つの辺すべてにパディングを指定します。
android:paddingTop は、上端のパディングを指定します。
android:paddingBottom は、下端のパディングを指定します。
android:paddingStart は、ビューの「開始」エッジのパディングを指定します。
android:paddingEnd は、ビューの「終了」エッジのパディングを指定します。
android:paddingLeft は、左端のパディングを指定します。
android:paddingRight は、右端のパディングを指定します。

マージンは、ビューの境界の外側に追加されるスペースです。上の図に示すように、ビューの端から親までのスペースです。よく使用されるマージン属性は次のとおりです。

android:layout_margin は、ビューの 4 辺すべてのマージンを指定します。
android:layout_marginBottom は、このビューの下側の外側のスペースを指定します。
android:layout_marginStart は、このビューの「開始」側の外側のスペースを指定します。
android:layout_marginEnd は、このビューの末尾側のスペースを指定します。
android:layout_marginLeft は、このビューの左側のスペースを指定します。
android:layout_marginRight は、このビューの右側のスペースを指定します。

右/左と開始/終了

「右」と「左」は、アプリが左から右（LTR）フローを使用しているか、右から左（RTL）フローを使用しているかに関係なく、常に画面の右側と左側を指します。「開始」と「終了」は常にフローの開始と終了を指します。

LTR フローの場合、start = left、end=right です。
RTL フローの場合、start=right、end=left です。

アプリが API レベル 17（Android 4.2）以上をターゲットにしている場合:

「left」と「right」の代わりに「start」と「end」を使用します。
たとえば、RTL 言語をサポートするには、android:layout_marginLeft を android:layout_marginStart にする必要があります。

アプリを Android 4.2 より前のバージョンで動作させたい場合、つまりアプリの targetSdkVersion または minSdkVersion が 16 以下の場合:

「left」と「right」に加えて、「start」と「end」を追加します。
たとえば、android:paddingLeft と android:paddingStart の両方を使用します。

ステップ 1: パディングを追加する

名前と name TextView の上端の間にスペースを空けるには、上部のパディングを追加します。

activity_main.xml ファイルを [Design] タブで開きます。
[Component Tree] または Design Editor で、テキストビューをクリックして [Attributes] ペインを開きます。
[属性] ペインの上部にある二重矢印アイコンをクリックすると、使用可能なすべての属性が表示されます。
[Padding] を検索して展開し、[top] 属性の横にあるその他アイコン ... をクリックします。[Resources] ダイアログが表示されます。
[Resources] ダイアログで、[Add new resource] > [New dimen Value] を選択します。
[New Dimension Value Resource] ダイアログで、値が 8dp の small_padding という新しい dimen リソースを作成します。

dp は、密度非依存の略です。密度が異なる画面で UI 要素のサイズを同じに見せたい場合は、測定単位として dp を使用します。ただし、テキストサイズを指定するときは、常に sp（スケーラブルピクセル）を使用します。
[OK] をクリックします。

ステップ 2: 余白を追加する

name TextView を親要素の端から離すには、上余白を追加します。

[Attributes] ペインで「margin」を検索して、Layout_Margin を見つけます。
[Layout_Margin] を展開し、[top] 属性の横にあるその他アイコン ... をクリックします。
layout_margin という名前の新しい dimen リソースを作成し、16dp にします。[OK] をクリックします。

ステップ 3: フォントを追加する

name テキストビューの見栄えをよくするには、Android Roboto フォントを使用します。このフォントはサポートライブラリの一部であり、リソースとして追加します。

[属性] ペインで、「fontFamily」を検索します。
[fontFamily] フィールドで、プルダウン矢印をクリックし、リストの一番下までスクロールして、[More Fonts] を選択します。
[リソース] ダイアログで rob を検索し、[Roboto] を選択します。[プレビュー] リストで、[通常] を選択します。
[ Add font to project] ラジオボタンを選択します。
[OK] をクリックします。

res フォルダに、roboto.ttf フォントファイルを含む font フォルダが追加されました。@font/roboto 属性が TextView に追加されます。

ステップ 4: スタイルを抽出する

スタイルとは、ビューの外観と形式を指定する属性の集まりです。スタイルには、フォントの色、フォントサイズ、背景色、パディング、マージンなどの一般的な属性を含めることができます。

name テキストビューのフォーマットをスタイルに抽出して、アプリ内の任意の数のビューでスタイルを再利用できます。スタイルを再利用すると、複数のビューがある場合にアプリの見た目を一貫させることができます。スタイルを使用すると、これらの共通属性を 1 か所にまとめておくこともできます。

[Component Tree] で TextView を右クリックし、[Refactor] > [Extract Style] を選択します。
[Extract Android Style] ダイアログで、layout_width チェックボックス、layout_height チェックボックス、textAlignment チェックボックスをオフにします。これらの属性は通常、ビューごとに異なるため、スタイルの一部に含めることはできません。
[スタイル名] フィールドに「NameStyle」と入力します。
[OK] をクリックします。
スタイルもリソースであるため、スタイルは styles.xml ファイルの res/values/ フォルダに保存されます。styles.xml を開き、NameStyle スタイルの生成されたコードを調べます。これは次のようになります。

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

activity_main.xml を開き、[Text] タブに切り替えます。生成されたスタイルがテキストビューで style="@style/NameStyle" として使用されていることに注目してください。
アプリを実行すると、TextView のフォントとパディングが変更されていることがわかります。

実際の Android アプリのほとんどは、画像を表示したり、テキストを表示したり、テキストやクリックイベントの形式でユーザーからの入力を受け付けたりするビューの組み合わせで構成されています。このタスクでは、画像を表示するビューを追加します。

ImageView は、画像リソースを表示するためのビューです。たとえば、ImageView は PNG、JPG、GIF、WebP ファイルなどの Bitmap リソースを表示できます。また、ベクタードローイングなどの Drawable リソースを表示することもできます。

Android には、サンプルアイコン、アバター、背景など、画像リソースが付属しています。これらのリソースのいずれかをアプリに追加します。

[Design] タブでレイアウトファイルを表示し、[Palette] ペインから [Component Tree] の name_text の下に ImageView をドラッグします。 [リソース ] ダイアログが開きます。
[Drawable] を選択します（まだ選択されていない場合）。
[android] を展開し、スクロールして [btn_star_big_on] を選択します。黄色い星です。
[OK] をクリックします。

名前の下のレイアウトに星の画像が追加されます。縦方向の LinearLayout があるため、追加するビューは縦方向に配置されます。
[Text] タブに切り替えて、生成された ImageView コードを確認します。幅が match_parent に設定されているため、ビューの幅は親要素と同じになります。高さは wrap_content に設定されているため、ビューの高さはコンテンツと同じになります。ImageView は btn_star_big_on ドローアブルを参照します。

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

ImageView の id の名前を変更するには、"@+id/imageView" を右クリックして、[Refactor] > [Rename] を選択します。
[名前の変更] ダイアログで、id を @+id/star_image に設定します。[Refactor] をクリックします。

[Design] タブの [Component Tree] で、star_image の横にある警告アイコンをクリックします。この警告は、contentDescription が欠落していることを示しています。contentDescription は、スクリーンリーダーがユーザーに画像を説明するために使用します。
[属性] ペインで、contentDescription 属性の横にあるその他アイコン ... をクリックします。[リソース] ダイアログが開きます。
[Resources] ダイアログで、[Add new resource] > [New string Value] を選択します。[リソース名] フィールドを yellow_star に設定し、[リソース値] フィールドを Yellow star に設定します。[OK] をクリックします。
[属性] ペインを使用して、yellow_star に 16dp（@dimen/layout_margin）の上マージンを追加し、星の画像と名前を分離します。
アプリを実行します。アプリの UI に名前と星の画像が表示されます。

ScrollView は、それに含まれるビュー階層がスクロール可能なビューグループです。スクロールビューには、他のビュー（またはビューグループ）を 1 つのみ、子として含めることができます。通常、子ビューは LinearLayout です。LinearLayout 内には、他のビューを含めることができます。

次の画像は、複数のビューを含む LinearLayout を含む ScrollView の例を示しています。

このスクロールビューには、他の複数のビューを含む線形レイアウトが含まれています。

このタスクでは、簡単な伝記を表示するテキストビューをユーザーがスクロールできるようにする ScrollView を追加します。スクロール可能にするビューが 1 つだけの場合は、このタスクで行うように、ビューを ScrollView に直接配置できます。

この ScrollView には 1 つの TextView が含まれています。

ステップ 1: TextView を含む ScrollView を追加する

[デザイン] タブで activity_main.xml ファイルを開きます。
スクロールビューをレイアウトにドラッグします。デザインエディタまたは [Component Tree] にドラッグします。スクロールビューを星の画像の下に配置します。
[テキスト] タブに切り替えて、生成されたコードを検査します。

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ScrollView の高さと幅は親要素と一致します。name_text テキストビューと star_image 画像ビューがコンテンツを表示するのに十分な垂直スペースを使用すると、Android システムは ScrollView をレイアウトして、画面の残りの利用可能なスペースを埋めます。

ScrollView に id を追加し、bio_scroll を呼び出します。ScrollView に id を追加すると、Android システムがビューのハンドルを取得し、ユーザーがデバイスを回転させたときにシステムがスクロール位置を保持できるようになります。
ScrollView 内で、LinearLayout コードを削除します。アプリにはスクロール可能なビュー（TextView）が 1 つしかないためです。
TextView を [Palette] から [Component Tree] にドラッグします。TextView を bio_scroll の子要素として bio_scroll の下に配置します。
新しいテキストビューの id を bio_text に設定します。
次に、新しいテキストビューのスタイルを追加します。[属性] ペインで、style 属性の横にある 3 つの点 ... をクリックして、[リソース] ダイアログを開きます。
[リソース] ダイアログで、NameStyle を検索します。リストから NameStyle を選択し、[OK] をクリックします。テキストビューで、前のタスクで作成した NameStyle スタイルが使用されるようになりました。

ステップ 2: 新しい TextView に略歴を追加する

strings.xml を開き、bio という文字列リソースを作成して、自分自身や好きなことについて長いテキストを入力します。

以下に、自己紹介の例を示します。

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

bio_text テキストビューで、text 属性の値を、自己紹介を含む bio 文字列リソースに設定します。
bio_text テキストを読みやすくするには、行間を追加します。lineSpacingMultiplier 属性を使用して、値を 1.2 に設定します。

デザインエディタで、bio テキストが画面の端まで伸びていることに注目してください。この問題を解決するには、ルート LinearLayout に左、開始、右、終了のパディング属性を追加します。下部のパディングを追加する必要はありません。テキストが下端まで表示されていると、ユーザーはテキストがスクロール可能であることを認識できます。
ルート LinearLayout に 16dp の開始パディングと終了パディングを追加します。
[Text] タブに切り替え、ディメンションリソースを抽出し、layout_padding という名前を付けます。

アプリを実行し、テキストをスクロールします。

これで、

ゼロから完全なアプリを作成しました。素晴らしいですね。

Android Studio プロジェクト: AboutMe

ScrollView 内の TextView の上に ImageView を追加します。アプリを実行すると、この画像は星とは異なり、テキストが上にスクロールするにつれてビューからスクロールアウトします。

ヒント: スクロールビューには子ビューを 1 つしか含めることができません。2 つのスクロール可能なビュー（ImageView と TextView）を LinearLayout にラップする必要があります。

ViewGroup は、他のビューを含めることができるビューです。LinearLayout と ScrollView はビューグループです。
LinearLayout は、子ビューを水平方向または垂直方向に配置するビューグループです。
長いテキストや画像のコレクションなど、画面にコンテンツを表示する必要がある場合は、ScrollView を使用します。スクロールビューには、子ビューを 1 つのみ含めることができます。複数のビューをスクロールする場合は、ScrollView に LinearLayout などの ViewGroup を追加し、スクロールするビューをその ViewGroup の内側に配置します。
Layout Editor は、Android Studio 内のビジュアルデザインエディタです。Layout Editor を使用して、UI 要素をレイアウトにドラッグすることで、アプリのレイアウトを作成できます。
スタイルとは、ビューの外観を指定する属性の集まりです。たとえば、スタイルで、フォントの色、フォントサイズ、背景色、パディング、マージンを指定できます。
ビューのすべての書式設定を抽出して、スタイルに収集できます。アプリのルックアンドフィールを一貫したものにするには、他のビューにもスタイルを再利用します。

Udacity コース:

Kotlin による Android アプリの開発

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

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

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

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

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

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

問題 1

次のうち、ビューグループはどれですか？

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

問題 2

次のうち有効でないビュー階層はどれですか。

▢ LinearLayout > TextView、TextView、ImageView

▢ ScrollView > LinearLayout > TextView、Button、Button、ScrollView > TextView

▢ TextView > TextView、ImageView、ScrollView

問題 3

スタイルは styles.xml で定義されるリソースです。スタイルを使用して、ビューの色、フォント、テキストサイズなど、多くの特性を定義できます。正誤問題

▢ True

▢ 誤り

問題 4

ScrollView は、子として任意の数のビューまたはビューグループを含めることができるビューグループです。正誤問題