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

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

前提となる知識

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

学習内容

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

演習内容

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

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

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

  1. Android Studio が開いていない場合は開きます。
  2. Android Studio でプロジェクトがすでに開いている場合は、[File] > [New] > [New Project] を選択します。


  3. プロジェクトがまだ開いていない場合は、[Welcome to Android Studio] ダイアログで [+ Start a new Android Studio project] を選択します。


  4. [Create New Project] ダイアログの [Phone and Tablet] タブで、[Empty Activity] テンプレートを選択します。[次へ] をクリックします。


  5. 次の [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 でプロジェクト ファイルが生成されるまでしばらく待ちます。

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

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

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

グループを表示

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

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

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

  1. [Project] > [Android] ペインを選択します。app/res/layout フォルダで、activity_main.xml ファイルを開きます。
  2. [テキスト] タブを選択し、ルートビュー グループを ConstraintLayout から LinearLayout に変更します。
  3. 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 を追加する

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

    LinearLayout には、必須属性 layout_heightlayout_widthorientation があります。デフォルトでは vertical です。
  3. [Design] タブに切り替えて、レイアウト エディタを開きます。
  1. [Palette] ペインからデザイン エディタにテキスト ビューをドラッグします。


  2. [Component Tree] ペインに注目してください。新しいテキスト ビューは、親ビューグループ(LinearLayout)の子要素として配置されます。

  3. [属性] ペインを開きます(まだ開いていない場合)。(ペインを開くには、デザイン エディタで新しく追加された TextView をダブルクリックします)。
  4. [属性] ペインで次の属性を設定します。

属性

ID

name_text

テキスト

自分の名前に設定します。(テキスト フィールドの 1 つに、tools 名前空間用であることを示すレンチアイコンが表示されています。レンチのない方は android 名前空間用です(これが目的のテキスト フィールドです)。

textAppearance > textSize

20sp

textAppearance > textColor

@android:color/black

textAppearance > textAlignment

Center

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

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

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

  1. [属性] ペインで、名前に設定したテキスト属性の横にある 3 つのドットをクリックします。リソース エディタが開きます。


  2. [Resources] ダイアログで、[Add new resource] > [New string Value] を選択します。
  3. [New String Value Resource] ダイアログで、[Resource name] フィールドを name に設定します。[リソース値] フィールドに独自の名前を設定します。[OK] をクリックします。警告が消えています。


  4. res/values/strings.xml ファイルを開き、name という名前の新しい文字列リソースを探します。
<string name="name">Aleks Haecky</string>

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

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

  1. activity_main.xml ファイルで、[テキスト] タブに切り替えます。
  2. textSize 行で、番号(20sp)をクリックし、Alt+Enter(Mac の場合は Option+Enter)と入力します。ポップアップ メニューから [Extract dimension resource] を選択します。
  3. [Extract Resource] ダイアログで、[Resource name] フィールドに「text_size」と入力します。[OK] をクリックします。


  4. res/values/dimens.xml ファイルを開いて、生成された次のコードを確認します。
<dimen name="text_size">20sp</dimen>
  1. MainActivity.kt ファイルを開き、onCreate() 関数の末尾にある次のコードを探します。
setContentView(R.layout.activity_main)

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

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

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

パディングとマージン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. [Component Tree] で TextView を右クリックし、[Refactor] > [Extract Style] を選択します。
  2. [Extract Android Style] ダイアログで、layout_width チェックボックス、layout_height チェックボックス、textAlignment チェックボックスをオフにします。これらの属性は通常、ビューごとに異なるため、スタイルの一部に含めることはできません。
  3. [スタイル名] フィールドに「NameStyle」と入力します。
  4. [OK] をクリックします。


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

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

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

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

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



    名前の下のレイアウトに星の画像が追加されます。縦方向の LinearLayout があるため、追加するビューは縦方向に配置されます。

  5. [Text] タブに切り替えて、生成された ImageView コードを確認します。幅が match_parent に設定されているため、ビューの幅は親要素と同じになります。高さは wrap_content に設定されているため、ビューの高さはコンテンツと同じになります。ImageViewbtn_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" />
  1. ImageViewid の名前を変更するには、"@+id/imageView" を右クリックして、[Refactor] > [Rename] を選択します。
  2. [名前の変更] ダイアログで、id@+id/star_image に設定します。[Refactor] をクリックします。


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

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

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

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

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

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

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

  1. [デザイン] タブで activity_main.xml ファイルを開きます。
  2. スクロール ビューをレイアウトにドラッグします。デザイン エディタまたは [Component Tree] にドラッグします。スクロール ビューを星の画像の下に配置します。
  3. [テキスト] タブに切り替えて、生成されたコードを検査します。
// 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 をレイアウトして、画面の残りの利用可能なスペースを埋めます。

  1. ScrollViewid を追加し、bio_scroll を呼び出します。ScrollViewid を追加すると、Android システムがビューのハンドルを取得し、ユーザーがデバイスを回転させたときにシステムがスクロール位置を保持できるようになります。
  2. ScrollView 内で、LinearLayout コードを削除します。アプリにはスクロール可能なビュー(TextView)が 1 つしかないためです。
  3. TextView を [Palette] から [Component Tree] にドラッグします。TextViewbio_scroll の子要素として bio_scroll の下に配置します。

  4. 新しいテキスト ビューの idbio_text に設定します。
  5. 次に、新しいテキスト ビューのスタイルを追加します。[属性] ペインで、style 属性の横にある 3 つの点 ... をクリックして、[リソース] ダイアログを開きます。
  6. [リソース] ダイアログで、NameStyle を検索します。リストから NameStyle を選択し、[OK] をクリックします。テキスト ビューで、前のタスクで作成した NameStyle スタイルが使用されるようになりました。

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

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



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

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

これで、

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

Android Studio プロジェクト: AboutMe

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

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

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

Udacity コース:

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

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

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

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

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

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

問題 1

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

EditText

LinearLayout

TextView

Button

問題 2

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

LinearLayout > TextViewTextViewImageView

ScrollView > LinearLayout > TextViewButtonButtonScrollView > TextView

TextView > TextViewImageViewScrollView

問題 3

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

▢ True

▢ 誤り

問題 4

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

▢ True

▢ 誤り

問題 5

アプリで画像を表示するために使用できる UI 要素はどれですか?

TextView

ImageView

Button

ScrollView

次のレッスンに進む: 2.2: ユーザー インタラクティビティを追加する

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