勉強できること
LayoutとViewの関係性
基本的なLayout、Viewの種類
前提
AndroidStudioのバージョン：4.0.1
言語：Java
1. HelloWorldの実装内容の確認
前回の1. Android学習 AndroidStudioのインストール〜HelloWorld編 からの続きとなります。
上記で作成したプロジェクトを開きます。
MainActivityファイルを開きます。
このファイルがアプリの土台となっているActivityクラスとなります。
（Activityについては別の章で説明する予定なので、ここでは割愛します）
MainActivityファイルには下記のようにコードが書かれています。
末尾の行の"setContentView(R.layout.activity_main);"が
アプリで表示するレイアウトファイルを指定するコードです。
レイアウトのmain_activityファイルを開きます。
初期設定されているレイアウトが表示されます。
右上のタブで「Split」に切り替え、コードとレイアウトの両方が確認できる表示にします。
レイアウトはXMLでの記述となります。
Androidの画面レイアウトは基本的にLayout（土台） + View（パーツ）という構成となります。
初期設定のレイアウトの場合だと、
まず１行目にXMLの宣言を記述します。
（新しくファイルを作成する際は自動的に挿入されるため、あまり意識する必要はないです）
2行目に記載されている「androidx.constraintlayout.widget.ConstraintLayout〜」が土台となるレイアウトになります。
そのレイアウトに入れ子になっているもの（9行目から記載されているTextView）がViewです。
レイアウトの詳細
レイアウトの詳細な設定を見ていきます。
ConstraintLayoutは、Viewに対してConstraint(制約)を設定して画面を構成するレイアウトになります。
あるViewの上にこのViewを設置して、さらにそのViewの右にはこのViewを設置するという構成になります。
（少し慣れるまでは難しいので、後述の「２. Layoutの種類」で紹介するLinearLayoutなどの
扱いやすいものから初めていくといいかもしれません。）
<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"> //③
①XMLの名前空間の定義
XMLの名前空間を定義し、設定ファイルのタグや属性が正しく認識されるようにしています。
②レイアウトのサイズ設定
android:layout_width・・・レイアウトの横幅を指定します。
android:layout_height・・・レイアウトの高さを指定します。
この設定項目の設定値としては下記のような設定が可能です。
| 設定値 | 詳細 |
|---|---|
| match_parent | 表示できる最大のサイズで表示します。 土台となるLayoutであれば画面最大まで表示し、 子のViewであれば、親のLayout,Viewと同じサイズにします（最大） |
| wrap_content | 中身を表示するのに十分なサイズを表示します。 |
| 数値の指定 | 指定する単位はdpで、200dpといった感じで指定します。※ |
※ dpは端末の解像度に依存しない単位となります。
Androidは様々な解像度の端末が存在しており、どの端末で見てもレイアウトが崩れないようにするため、このdpを使って指定する必要があります。
dp以外にもpxで指定することも可能ですが、pxだと端末の解像度に依存するため端末により見え方が異なります。
基本的に数値を指定する場合はこのdpを指定してレイアウトを作成します。
③Activityとの関連付け
レイアウトを関連付けるActivityを指定します。
Viewの詳細
次にViewの詳細な設定を見ていきます。
TextViewなのでその名の通り、文字を表示するViewとなります。
<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" /> //⑥
④Viewのサイズ設定
レイアウトで説明したものと同じ属性となります。
wrap_contentが指定されているので、中身の"Hello World!"という文字列を表示することが可能なサイズとなっています。
エディターのデザインの"Hello World!"にカーソルを当てるとViewの大きさがわかります。
⑤表示する文字を設定
textに表示する文字を指定します。
⑥Viewの配置設定
親のレイアウトがConstraintLayoutなので、Viewの配置設定（制約設定）が必要となります。
他のレイアウトの場合はそのレイアウトに応じた設定が必要となる場合があります。
ConstraintLayoutの制約はViewのどの辺にどのViewを設置するかという制約があります。
TextViewの「layout_constraintBottom_toBottomOf="parent"」場合は、
TextViewの下辺に親レイアウトの下辺が設定されています。
他の属性も同じように設定されています。
この場合、親(parent)に対して中央に配置する制約となります。
試しに「layout_constraintBottom_toBottomOf="parent"」という制約を消してみます。
縦の中央配置の制約がなくなり、親レイアウトの上辺に配置され、
横の中央配置の制約は残ったままなので、横位置は中央配置のままとなります。
他にも色々な制約がありますが、一旦ここまでの説明とします。
２. Layoutの種類
次に基本的なLayoutの種類を紹介します。
レイアウトには大きく2種類あり、それぞれの特徴は下記の通りです。
| Layoutの種類 | Layout名 | 概要 | イメージ |
|---|---|---|---|
| 線形レイアウト | LinearLayout | すべての子ビューを、垂直または水平の一方向に揃えるレイアウトです。 |
 |
| 相対レイアウト | RelativeLayout ConstraintLayout |
Viewの位置を相対的に指定するレイアウトです。 ２つレイアウトを紹介しましたが、ConstraintLayoutの方がパフォーマンスが優れているためConstraintLayoutを使って開発することをお勧めします。 |
 |
３. Viewの種類
最後に基本的なViewの種類を紹介します。
| View名 | 概要 | イメージ |
|---|---|---|
| TextView | テキストを表示するViewです。 |  |
| ImageView | 画像を表示するViewです。 |  |
| Button | ボタンを表示するViewです。 |  |
| WebView | Webページを表示するViewです。 |  |
上記で紹介したLayout,View以外にも様々な種類があります。
開発しながら触っていくとだんだんそれぞれの特徴がわかってくるので、
作りたいレイアウトに応じて適したLayout、Viewを見つけてみてください。
今回はここまでとなります。
お疲れさまでした！d(´∀｀)b