読者です 読者をやめる 読者になる 読者になる

【Android Studio入門】これでわかるレイアウト(layout)の使い方まとめ!XML編

今回はAndroidStudioにおけるxmlの書き方、特にレイアウトに着目してまとめました。リファレンスのように参照したり、ざっと眺めて機能の確認をするのに役立つでしょう。

 

レイアウト(layout)の種類

RelativeLayout

レラティブと読みます。

AndroidStudioを立ち上げたときに自動で設置されているレイアウトがこれでしょう。

relativeの意味は「相対」。つまりRelativeLayoutは相対的に位置を決めるレイアウトです。

え、全然ピンとこない?

 

簡単に言うと1つの部品を設置した後、それをもとに位置を決める方式です。親がいたら子どもは連れ添って歩く。そんな感じにイメージしておいてください。

 

LinearLayout

リニアと読みます。どの入門書でも最も使われているレイアウトですので、これだけは使えるようにしておかないと話になりません。

 

android:orientation="vertical"とすれば縦に要素が並び、android:orientation="horizontal"とすれば横に要素が並びます。

これはverticalが垂直、horizontalが水平という意味であることを考慮すれば容易に理解できるでしょう。はい、次。

 

FrameLayout

フレームです。どんどん上に重ねていくレイアウトですね。

例えばAというViewを設置した後、BというViewを設置したとすれば、Aの上にBが設置されるということです。このときAの大きさをBよりも大きくすればAが画面上に表示されるようになります。

 

TableLayout

テーブルです。格子状(表組)でレイアウトを作ります。

わかりやすいイメージは計算機の配置でしょうか。

 

<TableLayoutの中に<TableRowを記述することで「行」を設定できますし、android:layout_span="2"のように記述すると1つのViewが2行に渡って配置されたりします。このあたりは下にまとめておくので必要でしたら読み込んでおいてください。

 

android:layout_span="*" → 1つのViewを*行分に渡って配置する

android:layout_column="*" → *列目を空白にする

android:strechCoumns="*" → *(数値)だけ広げる

android:shrinkColumns="*" → *(数値)だけ狭める

 

 

レイアウトをもっと詳しく設定しよう

android:layout_margin

以前にも出てきたlayout_margin。外側の余白を決めるんでしたね。

しかしこのままでは全方向の余白が空いてしまいます。さて、一方向だけの余白を作りたかったらどうしたら良いのでしょう?

 

答えはmarginの後ろにさらに方向を記述するのです。

例えばandroid:layout_marginTopとすれば上の余白を設定できます。同じようにTopの位置にBottom(下)、Left(左)、Right(右)と書けばそれぞれの方向に余白を作ることができます。便利なのでぜひ覚えておきましょう。

 

android:layout_weight

weightはわざわざ言う必要もないでしょうが「重量」ですよね。今回は比重のようなものだと思ってください。

android:layout_heightで高さを決める代わりに、ほかの部品との比重で大きさを変更するのです。

 

例えば部品Aがandroid:layout_weight="1"、部品Bがandroid:layout_weight="2"と設定されていたとしましょう。このときAの比重が1、Bの比重が2なので、Aが画面の1/3、Bが画面の2/3を占めることになります。

当然1、1にすれば1:1の大きさで配置されます。

このときandroid:layout_hegihtは0にしておくとよいでしょう。

 

 RelativeLayoutで使える設定

RelativeLayoutで使える便利な属性をいくつか紹介します。

 

android:layout_centerinParent

="true"と繋げれば上下中央に配置することができます。親に対するセンターですのでわかりやすいですよね。

 

android:layoutalignTop

="@+id/合わせたい部品のID"とすることで指定したIDの上の高さに合わせることができます。

ここまで読んできた賢い皆さんならお気づきでしょうが、TopをRight,Left,Bottomなどと変更することでそれぞれに合わせることができます。

 

android:layout_above

="@+id/a"とすることでaというIDを持つ部品の上に配置できます。もちろんIDはあらかじめ指定しておいたものをお使いください。

 

android:layout_below

aboveの下バージョン。

 

android:layout_toRightOf

右バージョン。上下と記述が異なることに注意。

 

android:layout_toLeftOf

左バージョン。

 

 

あとがき

 AndroidStudioを使っていない人にとっては「何言ってるんだこいつ…」系の記事が続いてしまって恐縮です。

できればもっと面白おかしく「このパンツがすごい!」とか言っていたいんですけど技術系を書くとどうしても真面目になっちゃいます。うーん、もっと面白い記述ができたらいいんだけどなあ…。

 

XML編とタイトルにつけたということは…そう、Java編もいつか投稿するつもりです。XMLはわからないからJavaだけで書きたいんだよおっ!って人は必見ですね。

 

Viewの使い方を知りたい人はこちら

広告を非表示にする