このページは 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] をクリックします。

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

Android Studio でプロジェクトファイルが生成されます。

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

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

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

グループを表示

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

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

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

[Project > Android] ペインを選択します。app/res/layout フォルダで activity_main.xml ファイルを開きます
[Text] タブを選択し、ルートビューグループを 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] タブをクリックします。次のスクリーンショットは、Layout Editor の各部分を示したものです。

Design Editor: デザインビュー、ブループリントビュー、またはその両方で画面レイアウトを視覚的に表示します。デザインエディタは、Layout Editor の主要部分です。

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

[Design] を使用して、レイアウトの現実的なプレビューを表示します。
ブループリントを使用して、各ビューのアウトラインのみを表示します。
デザイン + ブループリントを使用すると、両方のディスプレイを並べて表示できます。

パレット: レイアウトや [Component Tree] ペインにドラッグできるビューとビューグループのリストを表示します。

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

コンポーネントツリー: レイアウト階層をビューのツリーとして表示します。[Component Tree] は、小さいビュー、非表示のビュー、重複するビューがあり、それ以外は Design Editor で選択できない場合に便利です。

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

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

LinearLayout には、必須の属性 layout_height、layout_width、orientation があります。これらはデフォルトでは vertical です。
[Design] タブに切り替えて、Layout Editor を開きます。

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

属性	値
ID	`name_text`
text	自分の名前に設定します。（text フィールドの 1 つには、`tools` 名前空間用のレンチアイコンが表示されています）。レンチのないフィールドは、`android` 名前空間用です。これが、必要な text フィールドです）。
textAppearance &gSize; textSize	`20sp`
textAppearance &gColor; textColor	`@android:color/black`
textAppearance > textAlignment	中央

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

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

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

[Attributes] ペインで、名前に設定した [text] 属性の横にあるその他アイコンをクリックします。リソースエディタが開きます。
[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 ファイルで、[Text] タブに切り替えます。
textSize の行で、数字（20sp）をクリックして「Alt+Enter」（Mac の場合は Option+Enter）と入力します。ポップアップメニューから [ディメンションリソースを抽出する] を選択します。
[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 は左、end は右です。
RTL フローの場合、start=right と end=left。

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

「左」と「右」ではなく「開始」と「終了」を使用します。
たとえば、RTL 言語をサポートするには、android:layout_marginLeft を android:layout_marginStart にします。

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

「左」と「右」に加え、「開始」と「終了」を追加します。
たとえば、android:paddingLeft と android:paddingStart の両方を使用します。

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

名前と name テキストビューの上端の間にスペースがある場合は、上パディングを追加します。

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

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

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

name テキストビューを親要素の端から離すには、上余白を追加します。

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

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

name テキストビューを見やすくするには、Android Roboto フォントを使用します。このフォントはサポートライブラリに含まれており、リソースとして追加します。

[Attributes] ペインで、「fontFamily」を探します。
[fontFamily] フィールドでプルダウン矢印をクリックし、リストの一番下までスクロールして [More Fonts] を選択します。
[Resources] ダイアログで「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] タブで、[ImageView] を [Palette] ペインから [Component Tree] の [name_text] の下にドラッグします。[リソース] ダイアログが開きます。
[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" を右クリックし、「リファクタリング」して、 の名前を変更してください。
[Rename] ダイアログで、id を @+id/star_image に設定します。[リファクタリング] をクリックします。

[Design] タブの [Component Tree] で、star_image の横にある警告アイコンをクリックします。警告は、スクリーンリーダーがユーザーに画像の説明に使用する、contentDescription が存在しないことを意味します。
[Attributes] ペインで、contentDescription 属性の横にあるその他アイコン ... をクリックします。[Resources] ダイアログが開きます。
[Resources] ダイアログで [Add new resource > New string Value] を選択します。[Resource name] フィールドを yellow_star に、[Resource value] フィールドを Yellow star に設定します。[OK] をクリックします。
[Attributes] ペインを使用して上余白 16dp（@dimen/layout_margin）を yellow_star に追加し、スター画像を名前から区切ります。
アプリを実行します。名前と UI 画像がアプリの UI に表示されます。

ScrollView は、その中に配置されたビュー階層をスクロールできるビューグループです。スクロールビューには、子として他のビュー（ビューグループ）を 1 つだけ含めることができます。通常、子ビューは LinearLayout です。LinearLayout 内には、他のビューを追加できます。

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

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

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

この ScrollView には単一の TextView が含まれています。

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

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

// 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 をレイアウトして画面上の残りのスペースを埋めます。

id を ScrollView に追加し、bio_scroll という名前を付けます。id を ScrollView に追加すると、Android システムがビューのハンドルを提供し、ユーザーがデバイスを回転させたときにスクロール位置を保持します。
アプリにはスクロール可能なビューが 1 つ（TextView）しかないため、ScrollView 内で LinearLayout コードを削除します。
TextView を [Palette] から [Component Tree] にドラッグします。TextView を bio_scroll の子要素として bio_scroll の下に配置します。
新しいテキストビューの id を bio_text に設定します。
次に、新しいテキストビューのスタイルを追加します。[Attributes] ペインで、[style] 属性の横にあるその他アイコン ... をクリックして [Resources] ダイアログを開きます。
[Resources] ダイアログで「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 に設定します。

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

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

これで、

完全なアプリが完成しました。

Android Studio プロジェクト: AboutMe

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

ヒント: スクロールビューに設定できる子ビューは 1 つだけです。スクロール可能な 2 つのビュー ImageView と TextView を LinearLayout にラップする必要があります。

ViewGroup は、他のビューを含めることができるビューです。LinearLayout と ScrollView はビューグループです。
LinearLayout は、子ビューを水平または垂直に配置するビューグループです。
画面に長いテキストや画像のコレクションなどのコンテンツを表示する必要がある場合は、ScrollView を使用します。スクロールビューに含めることができる子ビューは 1 つだけです。複数のビューをスクロールする場合は、LinearLayout などの ViewGroup を ScrollView に追加し、スクロールするビューをその 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 で定義されるリソースです。スタイルを使用して、ビューの色、フォント、テキストサイズなど、多くの特性を定義できます。正誤問題

▢ 正しい

▢ False

問題 4

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