前回に続き今回は、Codelabs Kotlin の02.1 をやっていきたいと思います🙃
学ぶこと
view
とViewGroup
の操作方法LinearLayout
を使用して、Activity の View を配置する方法ScrollView
を使用してスクロール可能なコンテンツを表示する方法View
の開始性を変更する方法- 文字列とディメンションのリソースを作成して使用する方法
- Android Studio のレイアウトエディターを使用して線形レイアウトを作成する方法
すること
- AboutMe アプリを作成します
TextView
レイアウトを追加して、名前を表示しますImageView
を追加しますScrollView
を追加して、スクロール可能なテキストを表示します
アプリの概要
AboutMe アプリでは、自分に関することを紹介したり、友達、家族、ペット向けにアプリをカスタマイズしたりできます。このアプリは、名前・Done ボタン・star image・スクロール可能なテキストを表示します。
AboutMe プロジェクトを作成する
Android Studio を開きます。
File > New > New Project を選択します。
- Create New Project ダイアログの Phone and Tablet タブで Empty Activity テンプレートを選択して Next をクリックします。
- 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. |
- アプリを実行します。からの画面に"Hellow World"という文字列が表示されます。
Empty Activity Template は、Mainactivity.kt
という1つの Empty Activity を作成します。テンプレートは activity_main.xml
というレイアウトファイルも作成します。レイアウトファイルには、ルート ViewGroup として ConstraintLayout があり、コンテンツとして単一の TextView
があります。
LinearLayout を使用するようにルートレイアウトを変更する
このタスクでは、生成されたルート ViewGroup
を LinearLayout
に変更します。また、UI要素を垂直に配置します。
View groups
ViewGroup
は、他の View および ViewGroup である子 View を含むことができる View です。レイアウトを構成する View は、ViewGroup をルートとする View の階層として編成されます。
LinearLayout
view group では、UI要素は水平または垂直に配置されます。
ルートレイアウトを変更して、LinearLayout
view group を使用するようにします。
Project > Android ペインを選択します。
app/res/layout
でactivity_main.xml
ファイルを開きます。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 を追加
res/layout/activity_main.xml
ファイルを開きます。Text タブに切り替えて、コードを調べます。ルート ViewGroup として
LinearLayout
があります。(ViewGroup は、他の View を含む View です)
LinearLayout
には、必須の属性である layout_height
、layout_width
、および orientaion
があり、デフォルトでは vertical
です。
- Design タブに切り替えて、レイアウトエディターを開きます。
Design タブと Text タブには、同じレイアウトが別の方法で表示されます。1つのタブで行なった変更は、他のタブにも反映されます。
- TextView を Palette ペインから DesignEditor にドラックします。
- Component Tree に注目してください。新しい TextView は、
LinearLayout
(親 ViewGroup) の子要素として配置されます。
Attributes ペインが開いていない場合は、開きます。
Attributes ペインで次の属性を設定します。
Attribute | Value |
---|---|
ID | name_text |
text | あなたの名前をセットします。(テキストフィールドには1つのレンチアイコンが表示され、ツールの名前空間ようであることを示します。レンチのないものは、Android 名前空間用です。) |
textAppearance > textSize | 20sp |
textAppearance > textColor | @android:color/black |
textAppearance > textAignment | Center |
ステップ2: 文字列リソースを作成する
Component Tree の横に、警告アイコンが表示されます。警告テキストを表示するには、下のスクリーンショットに示すように、アイコンをクリックするか、アイコンをポイントします。
警告を解決するには、文字列リソースを作成します。
- Attributes ウィンドで、名前に設定したテキスト属性の横にある3つのドットをクリックします。リソースエディターが開きます。
Resources ダイアログで、プラスアイコンをタップして String Value を選択します。
New String Value Resource ダイアログで、Resource name フィールドを
name
に設定します。Resource value フィールドを自分の名前に設定します。OKをクリックします。警告が消えていることに注目してください。
res/values/string.xml
ファイルを開き、name
という名前で新しく作成された文字列リソースを探します。
<string name="name">Aleks Haecky</string>
ステップ3: ディメンションリソースを作成する
リソースエディターを使用してリソースを追加しました。XML コードエディタでリソースを抽出して、新しいリソースを作成することもできます。
activity_main.xml
ファイルで Code タブに切り替えます。textSize 行で数値(
20sp
)をクリックし、Option
+Enter
をおします。ポップアップメニューから Extract dimension resource を選択します。Extract Resource ダイアログの Resource name フィールドに
text_size
と入力します。OK をクリックします。
res/values/dimens.xml
ファイルを開いて、次の生成コードを確認します。
<dimen name="text_size">20sp</dimen>
※ dimens.xml ファイルが res/values
フォルダー内にまだ存在していない場合は、Android Studio によって作成されます。
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 属性は次の通りです。
android:padding View の4つのエッジのすべての Padding を指定します。
android:paddingTop 上端の Padding を指定します。
android:paddingBottom 下端の Padding を指定します。
android:paddingStart View の Starting エッジの Padding を指定します。
android:paddingEnd View の Ending エッジの Padding を指定します。
android:paddingLeft 左端の Padding を指定します。
android:paddingRight 右端の Padding を指定します。
Margin は、View の境界の外側に追加されるスペースです。上の図の示すように、View の端から親までのスペースです。一般的に使用される Margin 属性は次の通りです。
android:layout_margin View の4辺すべてのマージンを指定します。
android:layout_marginBottom この View の下側の外側のスペースを指定します。
android:layout_marginStart この View の Starting 側の外側のスペースを指定します。
android:layout_margingEnd この View の端側のスペースを指定します。
android:layout_marginLeft この View の左側のスペースを指定します。
android:layout_marginRight この View の右側のスペースを指定します。
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_margingLeft
をandroid:layout_margingStart
にする必要があります。
Android4.2より前のバージョンでアプリを動作させる場合は、つまり、アプリの targetSdkVersion
または minSdkVersion
が16以下の場合:
- "Left" と "Right" に加えて "Start" と "End" を追加します。
- 例えば、
android:paddingLeft
とandroid:paddingStart
の両方を使用します。
Padding を追加
名前と name
TextView の上端の間にスペースを入れるには、上部の Padding を追加します。
activity_main.xml
ファイルで Design タブを開きます。Component Tree またはデザインエディターで、TextView をクリックして Attributes ペインを開きます。
Attributes ペインの上部にある All Attributes をクリックして使用可能な属性をすべて表示します。
Padding を展開して、top attribute をクリックして Resources ダイアログが表示されます。
Resources ダイアログで、Add new resource > New dimen Value を選択します。
New Dimension Value Resource ダイアログで、
small_padding
と呼ばれる8dp
の値を持つ新しいdimen
リソースを作成します。OK をクリックします。
マージンを追加
name
TextView を親要素の端から移動するには、top margin を追加します。
Attributes ペインで、Layout_margin を探します。
Layout_margin を開いて、top attributes をクリックします。
layout_margin
と名付けた16dp
のdimen
リソースを作成して OK をクリックします。
フォントを追加
name
TextView の見栄えをよくするには、Android Roboto フォントを使用します。このフォントはサポートライブラリの一部であり、フォントをリソースとして追加します。
Attributes ペインで、"fontFamily" を探します。
fontFamily フィールドでドロップダウンを開き、list の一番下までスクロールしたら More Fonts を選択します。
Resources ダイアログで、
rob
と検索して Roboto を選択します。Preview で Regular を選択します。ラジオボタンの Add font to project を選択します。
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つの場所に保持することができます。
Component Tree の
TextView
を右クリックして Refactor > Extract Style を選択します。Extract Android Style ダイアログで、
layout_width
・layout_height
・textAlignment
のチェックボックスをオフにします。これらの attributes は通常それぞれの View によって異なるため、Style には含めたくありません。Style name フィールドで
NameStyle
と入力して OK をクリックします。
- 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>
activity_main.xml
を開き Text タブに切り替えます。生成されたスタイルが TextView でstyle="@style/NameStyle
として使用されていること注目してください。アプリを実行して、フォントの変更と TextView の周囲の Padding を確認します。
ImageView を追加する
ほとんどの Android アプリは、画像の表示、テキストの表示、テキストまたはクリックイベントの形式でのユーザからの入力の受け入れを行う View の組み合わせで構成されています。
このタスクでは、画像を表示する View を追加します。
ImageView は画像リソースを表示するための View です。例えば、ImageView は、PNG・JPG・ GIF・WebP ファイルなどのビットマップリソースを表示したり、ベクトル描画などの Drawable リソースを表示したりできます。
サンプルアイコン、アバター、背景など、Android に付属する画像リソースがあります。これらのリソースの1つをアプリに追加します。
Design タブでレイアウトファイルを表示して ImageView を Palette ペインから Component Tree の
name_text
の下にドラッグします。Resources ダイアログが開きます。Drawable を選択します。
android を開き、btn_star_big_on を選択して OK をクリックします。
Star の画像が名前の下のレイアウトに追加されます。垂直方向の LinearLayout があるため、追加する View は垂直方向に整列されます。
- Text タブに切り替えて、生成された
ImageView
コードを確認します。幅はmatch_parent
に設定されているため、View は親要素と同じ幅になります。高さはwrap_content
に設定されているため、View はコンテンツと同じ高さになります。ImageView
はbtn_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" />
ImageView
のid
をリネームするために、"@+id/imageView"
を右クリックして Refactor > Rename を選択します。Rename ダイアログで、
id
に@+id/star_image
をセットして、Refactor をクリックします。
※ Refactor > Rename は、アプリプロジェクト内のすべての attribute または 変数名の名前を変更します。
Design タブの Component Tree で、
star_image
の横にある警告アイコンnをクリックします。この警告は、contentDescription
が不足していることに対するもので、screen readers はこれを使用してユーザに画像を説明します。Attributes ペインで、
contentDescription
attribute をクリックします。Resources ダイアログが開きます。Resources ダイアログで、Add new resource > New string Value を選択します。Resource name フィールドを
yellow_star
に設定し、Resource value フィールドをYellow star
に設定します。OK をクリックします。Attributes ペインを使用して、
16dp
の top margin を(@dimen/layout_margin
)をyellow_star
に追加し、name から start を分離します。アプリを実行します。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 を追加する
activity_main.xml
で Design タブを開きます。ScrollView をデザインエディターまたは ComponentTree にドラッグして、star image の下に ScrollView を配置します。
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_text
と star_image
画像 View がコンテンツを表示するのに十分な垂直スペースを使用すると、Android システムは ScrollView をレイアウトして、画面上の利用可能な残りのスペースを埋めます。
ScrollView
に ID を追加し、bio_scroll
と呼びます。ScrollView
に ID を追加すると、Android システムに View のハンドルが与えられるため、ユーザがデバイスを回転させた時に、システムはスクロール位置を保持します。アプリにはスクロール可能な View が1つしかないため、
ScrollView
内でLinearLayout
コードを削除します。TextView
を Palette から Component Tree にドラッグします。TextView
をbio_scroll
の子要素としてbio_scroll
の下に配置します。
TextView
の id をbio_text
にセットします。次に、新しい TextView のスタイルを追加します。Attributes ペインで、style attribute をクリックして、Resources ダイアログを開きます。
Resources ダイアログで、
NameStyle
を検索します。リストからNameStyle
を選択し、OK をクリックします。これで、TextView は、前のタスクで作成したNameStyle
を使用します。
新しい TextView に伝記を追加する
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>
bio_text
の TextView で、text attribute の値を、経歴を含むbio
文字列リソースに設定します。bio_text
テキストを読みやすくするには、行間にスペースを追加します。lineSpacingMultiplier attribute を使用して、値を1.2
にします。
デザインエディタで、bio
テキストが画面の端まで表示されていることに注目してください。この問題を修正するには、ルートの LinearLayout
に left, start, right, end padding attribute を追加します。最下部まで実行されるテキスト、テキストがスクロール可能であることをユーザに通知するため、下部 padding を追加する必要はありません。
ルート
LinearLayout
に16dp
の start padding と end padding を追加します。Text タブに切り替えて、ディメンションリソースを抽出し、
layout_padding
という名前を付けます。
Note:
API レベル17以降、Padding と Margin に left・right の代わりに start・end を使用して、アラビア語などの RTL 言語にアプリを適合させます。
- アプリを実行し、テキストをスクロールします。
まとめ
ViewGroup
は他の View を含むことができる View です。LinearLayout と ScrollView は 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 に再利用します。