●用語の整理をする。
Android で配置するラベルとかボタンなどの部品は View と呼ばれる。
主なものとしてはテキストを表示させるための TextView、
その他テキストを入力させるための EditText、Button、
画像を表示させるための ImageView などがある。
→View を複数まとめて配置したい場合には、それらをグループ化もできる。
その際にはView Groupという入れ物を準備する。
View Groupにはいくつか種類があり、その種類によってViewの配置方法が決まることもある。
主なVIewGroupだと、
View を横方向や縦方向に並べて配置することができる Linear Layout、
表組みのように配置することができる Table Layout、
ある View からの位置を相対的に指定できる Relative Layout、
View を重ねて配置することができる FrameLayout などがあります。
Viewを配置する時に、サイズや余白も設定可能。
Viewの縦サイズはandroid:layout_height
横の幅に関しては android:layout_width
余白に関しては内側の余白が android:padding、外側の余白が android:layout_margin で管理していく
View の中の、この中身を上下左右に寄せたい；android:gravity
View 自体を親要素に対して上下左右に寄せたい場合に使える属性が android:layout_gravity
●Linear Layoutを使ってみよう
「Option + Command + L」でコードのフォーマットができる、
Activity_main.xmlにて
xmlns というのは名前空間の指定で、android: や tools: で始まるいろいろな属性を使えるようにするためのもの
LinearLayout は内包する要素を縦か横か並べていく View グループ。
どちら方向に並べていくかを指定する必要があり、そのための属性が
「android:orientation」というもので、「vertical」にすると内包する要素を縦に並べられる。
android:orientation="vertical"
horizontalにすれば横に並ぶ。
●Viewの高さを指定する。
match parent は親要素の幅に合わせるという意味、
wrap_content は中身の幅に合わせるという意味
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!">
これは中身である @string/hellow_world（つまり Hello World ですね）と同じ幅に合わせなさいという意味
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World!">
横は親要素の幅と同じになる。
●余白と寄せ方について理解しよう
上述している通り、
余白に関しては内側の余白が android:padding、
外側の余白が android:layout_margin で管理していく
外側に余白を作りたい
android:layout_margin="60dp"
下にだけ余白をつくりたい
android:layout_marginButtom="100dp"
要素の内側に余白をつくりたい
android:padding="30dp"
要素の内側に下だけ余白をつくりたい
android:paddingButtom="30dp"
要素の寄せ方
要素の中身を上下左右に寄せたい時 android:gravity
android android:gravity="bottom"
要素自体を親要素に対して上下左右に寄せたい時 layout_gravity
android:layout_gravity="right"
●android:layout_weightを使おう
...LinearLayout で要素を並べる時にできる余白を各要素に割り振るための属性
例えば２番目のButtonに下の余白を割り当てたい時、
２番目のButtonに
android:layout_weight="1" と指定する。
layout_weightは指定しないとその値は０になるため、
Buttonが仮に4つあった場合、余白の割り当ては
0:1:0:0となる。
ただ、この layout_weight にはひとつ注意点がある。
vertical の場合には layout_height、
そして horizontal の場合には layout_width の指定には意味がないので、ここを 0dp にするのを忘れないこと。
●RelativeLayoutを見てみよう
親要素とか他の子要素に対して数値を相対的に指定することができる。
実際に配置してい要素は、相対的に位置を指定する際にどの要素に対して
指定していくかがわからないといけないので、それぞれの要素に ID をつけてあげる必要がある。
ID のつけ方は、id 属性に対して、@+id/ とした後に自分の好きな名前を付ける。
android:id="@+id/a"
aというIDをつけるという意味
elativeLayout で位置指定するための属性はたくさんある。
ex.上下中央に配置する
android:layout_centerInParent という属性を true にしてあげれば OK
android:layout_centerInParent="true"
ex.B は A に左端に合わせて、A の下に配置する
android:layout_alignLeft="@id/a" ...id/aと左を揃える
android:layout_below="@id/a" ...id/aの下に来る。
ex.CはBの横に少し間隔をあけて配置する。
android:layout_alignTop="@id/b"...id/bと上を揃える
android:layout_toRightOf="@id/b"...id/bの右に来る。
android:layout_marginLeft="20dp"...左との間隔を20dp開ける。
●FrameLayoutを使ってみよう
内包される View を重ねて表示することができる。
*背景の色の変更
android:background="#f8bbd0"
それぞれのViewを重ねて表示することができる。
ずらしたい時は一つ前のレッスンでも使用した
android:layout_marginLeft="50dp"
を使うことによって、ずらすことが可能。
●TableLayoutを使ってみよう
表組のようなレイアウトを作ることができる。
レイアウトの中に、
<TableRow というViewGroupを作ることで行を表現できる。
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f8bbd0" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
で、１というボタンが表形式で一つできる。
隣り合った列を結合することはでき
android:layout_span="2" で２列分であると示すことが可能。
間を空けたい時、
任意の表に列数を指定することで空白を開けることが可能。
android:layout_column="2" で２列目（0から数えて）に表が移動する。
親要素に対して表の幅が大きくなったりとか、逆に足りなくなったりしたときに、
特定の列を広げたり狭めたりすることができます。
広げたい時
android:stretchColumns="2" 余った余白を２列目で埋めてくれる。
狭めたい時
android:shrinkColumns="0" ０列目だけ縮める。