この 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 |
|
位置情報の保存 | デフォルトの場所をそのまま使用するか、任意のディレクトリに移動します。 |
言語 | 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 |
|
text | 自分の名前に設定します。(text フィールドの 1 つには、 |
textAppearance &gSize; textSize |
|
textAppearance &gColor; textColor |
|
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
は、このビューの右側のスペースを指定します。
ステップ 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
に配置します。これは、このタスクで行います。
ステップ 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 コース:
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
は、任意の数のビューまたはビューグループを子として含めることができるビューグループです。正誤問題
▢ 正しい
▢ False
問題 5
画像の表示に使用できる UI 要素はどれですか。
▢ TextView
▢ ImageView
▢ Button
▢ ScrollView
次のレッスンを開始する:
このコースの他の Codelab へのリンクについては、Android Kotlin の基礎 Codelab ランディング ページをご覧ください。