iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について1つぶやいています。まれに釣りについてつぶやく可能性があります。

知識ゼロからの Kotlin Android アプリリリースへの軌跡 / Day6【Codelabs 2-1編】

前回に続き今回は、Codelabs Kotlin の02.1 をやっていきたいと思います🙃

学ぶこと

  • viewViewGroup の操作方法
  • LinearLayout を使用して、Activity の View を配置する方法
  • ScrollView を使用してスクロール可能なコンテンツを表示する方法
  • View の開始性を変更する方法
  • 文字列とディメンションのリソースを作成して使用する方法
  • Android Studio のレイアウトエディターを使用して線形レイアウトを作成する方法

すること

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

アプリの概要

AboutMe アプリでは、自分に関することを紹介したり、友達、家族、ペット向けにアプリをカスタマイズしたりできます。このアプリは、名前・Done ボタン・star image・スクロール可能なテキストを表示します。

AboutMe プロジェクトを作成する

  1. Android Studio を開きます。

  2. File > New > New Project を選択します。

  1. Create New Project ダイアログの Phone and Tablet タブで Empty Activity テンプレートを選択して Next をクリックします。

  1. Create New Project ダイアログで、次のパラメーターをセットして Finish をクリックします。
Attribute Value
Application Name AboutMe
Company Name android com.android.example.AboutMe (or your own domain)
Save location Leave the default location, or change it to your preferred directory.
Language Kotlin
Minimum API level API 19: Android 4.4 (KitKat)
This project will support instant apps Leave this checkbox cleared.
Use AndroidX artifacts Select this checkbox.

  1. アプリを実行します。からの画面に"Hellow World"という文字列が表示されます。

Empty Activity Template は、Mainactivity.kt という1つの Empty Activity を作成します。テンプレートは activity_main.xml というレイアウトファイルも作成します。レイアウトファイルには、ルート ViewGroup として ConstraintLayout があり、コンテンツとして単一の TextView があります。

LinearLayout を使用するようにルートレイアウトを変更する

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

View groups

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

LinearLayout view group では、UI要素は水平または垂直に配置されます。

ルートレイアウトを変更して、LinearLayout view group を使用するようにします。

  1. Project > Android ペインを選択します。app/res/layoutactivity_main.xml ファイルを開きます。

  2. TextView を削除します。LinearLayout 要素で、android:orientation 属性を追加し、vertical を設定します。

Before:

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

After:

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

レイアウトエディターを使用して TextView を追加する

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

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

DesignEditor: 画面レイアウトのデザインを Design view・Blueprint view またはその両方で視覚的に表示します。DesignEditor はレイアウトエディターの主要部分です。

Toolbar: Design Editor でのレイアウトの外観を構成し、一部のレイアウト属性を変更するためのボタンを提供します。例えば、Design Editor でのレイアウトの表示を変更するには、Select Design Surface ドロップダウンメニューを使用します。

  • レイアウトの実際のプレビューにはデザインを使用します。
  • 各ビューのアウトラインのみを表示する場合は、Blueprint を使用します。
  • Design + Blueprint を使用して、両方のディスプレイを並べて表示します。

Palette: レイアウトまたは Component Tree にドラックできる View と ViewGroup のリストを提供します。

Attributes: 現在選択されている View または ViweGroup の属性を表示します。

Component Tree: レイアウト階層を View のツリーとして表示します。Component Tree は、Design Editor では選択できなかった小さな View、非表示の View、または重複する View がある場合に役立ちます。

ステップ1: TextView を追加

  1. res/layout/activity_main.xml ファイルを開きます。

  2. Text タブに切り替えて、コードを調べます。ルート ViewGroup として LinearLayout があります。(ViewGroup は、他の View を含む View です)

LinearLayout には、必須の属性である layout_heightlayout_width、および orientaion があり、デフォルトでは vertical です。

  1. Design タブに切り替えて、レイアウトエディターを開きます。

Design タブと Text タブには、同じレイアウトが別の方法で表示されます。1つのタブで行なった変更は、他のタブにも反映されます。

  1. TextView を Palette ペインから DesignEditor にドラックします。

  1. Component Tree に注目してください。新しい TextView は、LinearLayout(親 ViewGroup) の子要素として配置されます。

  1. Attributes ペインが開いていない場合は、開きます。

  2. Attributes ペインで次の属性を設定します。

Attribute Value
ID name_text
text あなたの名前をセットします。(テキストフィールドには1つのレンチアイコンが表示され、ツールの名前空間ようであることを示します。レンチのないものは、Android 名前空間用です。)
textAppearance > textSize 20sp
textAppearance > textColor @android:color/black
textAppearance > textAignment Center

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

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

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

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

  1. Resources ダイアログで、プラスアイコンをタップして String Value を選択します。

  2. New String Value Resource ダイアログで、Resource name フィールドを name に設定します。Resource value フィールドを自分の名前に設定します。OKをクリックします。警告が消えていることに注目してください。

  1. res/values/string.xml ファイルを開き、name という名前で新しく作成された文字列リソースを探します。
<string name="name">Aleks Haecky</string>

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

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

  1. activity_main.xml ファイルで Code タブに切り替えます。

  2. textSize 行で数値(20sp)をクリックし、Option + Enter をおします。ポップアップメニューから Extract dimension resource を選択します。

  3. Extract Resource ダイアログの Resource name フィールドに text_size と入力します。OK をクリックします。

  1. res/values/dimens.xml ファイルを開いて、次の生成コードを確認します。
<dimen name="text_size">20sp</dimen>

※ dimens.xml ファイルが res/values フォルダー内にまだ存在していない場合は、Android Studio によって作成されます。

  1. MainActivty.kt ファイルを開き、onCreate() 関数の最後で次のコードを探します。
setContentView(R.layout.activity_main)

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

  • R はリソースへの参照です。これは、アプリ内のすべてのリソースの定義です。これは、アプリ内のすべてのリソースへの定義を持つ自動生成クラスです。

  • layout.activity_main.xml は、リソースが activity_main という名前のレイアウトであることを示します。

  • アプリを実行します。あなたの名前の TextView が表示されます。

TextView のスタイルを設定する

アプリの画面を見ると、名前が画面の上部に押し上げられているので、ここで padding と margin を追加します。

Padding と Margin

Padding は、View または要素の境界内のスペースです。下の図に示すように、View の端と View のコンテンツ間のスペースです。

View のサイズには Padding が含まれます。一般的に使用される Padding 属性は次の通りです。

Margin は、View の境界の外側に追加されるスペースです。上の図の示すように、View の端から親までのスペースです。一般的に使用される Margin 属性は次の通りです。

right/left VS start/end

"Right" と "Left" は、アプリが左から右(LTR)フローまたは右から左(RTL)フローを使用するかどうかに関わらず、常に画面の右側と左側を指します。"Start" と "End" は常にフローの開始と終了を指します。

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

アプリが APIレベル17(Android4.2)以降をターゲットにしている場合:

  • "Right"・"Left" の代わりに "Start"・"End" を使用します。
  • 例えば、RTL言語をサポートするには、android:layout_margingLeftandroid:layout_margingStart にする必要があります。

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

  • "Left" と "Right" に加えて "Start" と "End" を追加します。
  • 例えば、android:paddingLeftandroid:paddingStart の両方を使用します。

Padding を追加

名前と name TextView の上端の間にスペースを入れるには、上部の Padding を追加します。

  1. activity_main.xml ファイルで Design タブを開きます。

  2. Component Tree またはデザインエディターで、TextView をクリックして Attributes ペインを開きます。

  3. Attributes ペインの上部にある All Attributes をクリックして使用可能な属性をすべて表示します。

  4. Padding を展開して、top attribute をクリックして Resources ダイアログが表示されます。

  5. Resources ダイアログで、Add new resource > New dimen Value を選択します。

  6. New Dimension Value Resource ダイアログで、small_padding と呼ばれる 8dp の値を持つ新しい dimen リソースを作成します。

  7. OK をクリックします。

マージンを追加

name TextView を親要素の端から移動するには、top margin を追加します。

  1. Attributes ペインで、Layout_margin を探します。

  2. Layout_margin を開いて、top attributes をクリックします。

  3. layout_margin と名付けた 16dpdimen リソースを作成して OK をクリックします。

フォントを追加

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

  1. Attributes ペインで、"fontFamily" を探します。

  2. fontFamily フィールドでドロップダウンを開き、list の一番下までスクロールしたら More Fonts を選択します。

  3. Resources ダイアログで、rob と検索して Roboto を選択します。PreviewRegular を選択します。

  4. ラジオボタンAdd font to project を選択します。

  5. OK をクリックします。

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

スタイルを抽出する

style は、View の外観と形式を指定する attributes のコレクションです。Style には、Font Color、Font Size、Background Color、padding、margin およびその他の一般的な attributes を含めることができます。

name TextView のフォーマットをスタイルに抽出し、アプリ内の任意の数の View で Style を再利用できます。スタイルを再利用すると、複数の View がある場合でもアプリの外観が一貫します。スタイルを使用すると、これらの共通 attribute を1つの場所に保持することができます。

  1. Component TreeTextView を右クリックして Refactor > Extract Style を選択します。

  2. Extract Android Style ダイアログで、layout_widthlayout_heighttextAlignmentチェックボックスをオフにします。これらの attributes は通常それぞれの View によって異なるため、Style には含めたくありません。

  3. Style name フィールドで NameStyle と入力して OK をクリックします。

  1. Style はリソースでもあるため、スタイルは res/values フォルダーの styles.xml ファイルに保存されます。style.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 タブに切り替えます。生成されたスタイルが TextView で style="@style/NameStyle として使用されていること注目してください。

  2. アプリを実行して、フォントの変更と TextView の周囲の Padding を確認します。

ImageView を追加する

ほとんどの Android アプリは、画像の表示、テキストの表示、テキストまたはクリックイベントの形式でのユーザからの入力の受け入れを行う View の組み合わせで構成されています。

このタスクでは、画像を表示する View を追加します。

ImageView は画像リソースを表示するための View です。例えば、ImageView は、PNG・JPG・ GIF・WebP ファイルなどのビットマップリソースを表示したり、ベクトル描画などの Drawable リソースを表示したりできます。

サンプルアイコン、アバター、背景など、Android に付属する画像リソースがあります。これらのリソースの1つをアプリに追加します。

  1. Design タブでレイアウトファイルを表示して ImageView を Palette ペインから Component Treename_text の下にドラッグします。Resources ダイアログが開きます。

  2. Drawable を選択します。

  3. android を開き、btn_star_big_on を選択して OK をクリックします。

Star の画像が名前の下のレイアウトに追加されます。垂直方向の LinearLayout があるため、追加する View は垂直方向に整列されます。

  1. Text タブに切り替えて、生成された ImageView コードを確認します。幅は match_parent に設定されているため、View は親要素と同じ幅になります。高さは wrap_content に設定されているため、View はコンテンツと同じ高さになります。ImageViewbtn_star_big_on Drawable を参照します。
<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. Rename ダイアログで、id@+id/star_image をセットして、Refactor をクリックします。

Refactor > Rename は、アプリプロジェクト内のすべての attribute または 変数名の名前を変更します。

  1. Design タブの Component Tree で、star_image の横にある警告アイコンnをクリックします。この警告は、contentDescription が不足していることに対するもので、screen readers はこれを使用してユーザに画像を説明します。

  2. Attributes ペインで、contentDescription attribute をクリックします。Resources ダイアログが開きます。

  3. Resources ダイアログで、Add new resource > New string Value を選択します。Resource name フィールドを yellow_star に設定し、Resource value フィールドを Yellow star に設定します。OK をクリックします。

  4. Attributes ペインを使用して、16dp の top margin を(@dimen/layout_margin)を yellow_star に追加し、name から start を分離します。

  5. アプリを実行します。name と star がアプリの UI に表示されます。

ScrollView を追加する

ScrollView は、その中に配置された View 階層をスクロールできるようにする ViewGroup です。ScrollView には、子として他の View または ViewGroup を1つだけ含めることができます。

子 View は通常、LinearLayout です。LinearLayout内で、他の View を追加できます。

次の画像は、いくつかの View を含む LinearLayout を含む ScrollView を例に示しています。

このタスクでは、ユーザが簡単な伝記を表示する TextView をスクロールできるようにする ScrollView を追加します。1つの View のみをスクロール可能にする場合は、View を直接 ScrollView に配置できます。これは、このタスクで行う作業です。

TextView を含む ScrollView を追加する

  1. activity_main.xmlDesign タブを開きます。

  2. ScrollView をデザインエディターまたは ComponentTree にドラッグして、star image の下に ScrollView を配置します。

  3. Code タブに切り替えて、生成されたコードを調べます。

// 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_textstar_image 画像 View がコンテンツを表示するのに十分な垂直スペースを使用すると、Android システムは ScrollView をレイアウトして、画面上の利用可能な残りのスペースを埋めます。

  1. ScrollView に ID を追加し、bio_scroll と呼びます。ScrollView に ID を追加すると、Android システムに View のハンドルが与えられるため、ユーザがデバイスを回転させた時に、システムはスクロール位置を保持します。

  2. アプリにはスクロール可能な View が1つしかないため、ScrollView 内で LinearLayout コードを削除します。

  3. TextViewPalette から Component Tree にドラッグします。TextViewbio_scroll の子要素として bio_scroll の下に配置します。

  1. TextViewidbio_text にセットします。

  2. 次に、新しい TextView のスタイルを追加します。Attributes ペインで、style attribute をクリックして、Resources ダイアログを開きます。

  3. Resources ダイアログで、NameStyle を検索します。リストから NameStyle を選択し、OK をクリックします。これで、TextView は、前のタスクで作成した NameStyle を使用します。

新しい TextView に伝記を追加する

  1. strings.xml ファイルを開き、bio と呼ばれる文字列リソースを作成し、自分自身の説明文章を入力します。

Point:

  • \n 改行を示すために使用します。
  • アポストロフィを使用する場合は、バックスラッシュでエスケープする必要があります。例: You mustn\'t forget the backslash.
  • 太字のテキストには <b>...</b>、斜体のテキストには <i>...</i> を使用します。例: This text is <b>bold</b> and this text is <i>italics</i>.

下記はサンプルです。

<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 の TextView で、text attribute の値を、経歴を含む bio 文字列リソースに設定します。

  2. bio_text テキストを読みやすくするには、行間にスペースを追加します。lineSpacingMultiplier attribute を使用して、値を 1.2 にします。

デザインエディタで、bio テキストが画面の端まで表示されていることに注目してください。この問題を修正するには、ルートの LinearLayout に left, start, right, end padding attribute を追加します。最下部まで実行されるテキスト、テキストがスクロール可能であることをユーザに通知するため、下部 padding を追加する必要はありません。

  1. ルート LinearLayout16dp の start padding と end padding を追加します。

  2. Text タブに切り替えて、ディメンションリソースを抽出し、layout_padding という名前を付けます。

Note:

API レベル17以降、Padding と Margin に left・right の代わりに start・end を使用して、アラビア語などの RTL 言語にアプリを適合させます。

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

まとめ

  • ViewGroup は他の View を含むことができる View です。LinearLayoutScrollView は ViewGroup です。

  • LinearLayout は、子 View を水平または垂直に配置する ViewGroup です。

  • 長いテキストや画像のコレクションなど、画面にコンテンツを表示する必要がある場合は、ScrollView を使用します。ScrollView に含めることができる子 View は1つだけです。

  • 複数の View をスクロールする場合は、LinearLayout などの ViewGroup を ScrollView に追加し、スクロールする View をその ViewGroup 内に配置します。

  • LayoutEditor は、Android Studio 内のビジュアルデザインエディターです。レイアウトエディターを使用して、UI 要素をレイアウトにドラッグすることにより、アプリのレイアウトを構築できます。

  • style は、View の外観を指定する attributes のコレクションです。例えば、スタイルは font color、font size、background color、padding、margin を指定できます。

  • View のすべてのフォーマットを抽出してスタイルに収集できます。アプリに一貫した外観を与えるには、スタイルを他の View に再利用します。