はじめに
みなさんAndroidアプリを作ったことがありますか？
Androidアプリを作るときはxmlをごにょごにょして作ります。
しかしこれが結構難しくて初心者はここで心が折れます。そう私が折れてます。
今回は初心者でもなるべく苦にならずにレイアウトを組めるように解説した記事です。
環境
- MacOS Monterey (12.1)
- AndroidStudio (2021.1 Patch2)
レイアウトファイルを開く
手始めに xmlファイル をダブルクリック
そうしたら↓の画面が表示されると思います。
xmlのプログラムを駆使してレイアウト作るというのもできるんですが、
正直コードベースでレイアウト作るのは初心者には厳しいので、
右上にあるDesignというボタンをクリックしてください。
そうすると↓の画面が表示されます
各パネルについて
① ツールパレット
使えるUIパーツの一覧が表示されています。
③のパネルにドラッグアンドドロップすることでUIを置けます。
本来はxmlでそのUI名を知っていないといけないのですがプログラムを知らなくてもいいという機能です。
置くだけで細かい配置はここではできません。
①の基本操作はパーツを選んで③に置くだけと覚えましょう。
② コンポーネントツリー
現在のレイアウトの配置状況を簡潔に表示してくれます
xmlだとすごく分かりづらい階層構造もこれなりすっきりして見れます。
③ プレビュー
Android端末でどのように表示されるかをプレビュー画面です
④ アトリビュート
UIパーツが持つプロパティを設定できる
レイアウト方法の前提
ConstrainLayoutを使う
パーツを並べるためのパーツというものがあります。それがLayoutパーツです。
このLayoutはいろんなものがあります。
この記事では主にConstrainLayoutを使ってレイアウト作るのを前提とします。
もちろん他のLayoutで作るというのもできますが、いろんな端末で綺麗に表示するためにという観点みるとConstrainLayoutが良きです。
ConstrainLayoutは制約をつけて位置決めするものです。後ほど細かくします。
プログラムはなるべく書かない方法でやる
レイアウトはxmlエディタで直接コードを書くこともできます。
昔はそれしかできませんでしたが、
AndroidStudioのおかげでGUIベースでレイアウト組めるようになっているので、コードは書かないスタイルで説明していきます。
ConstrainLayoutについて
考え方
ConstrainLayoutはLayoutという種類のパーツで子要素としてImageとかButtonなどのパーツを配置します。
HTML言語でいうdivみたいなものです。
子要素の位置を決めるために制約をつける必要があります。
制約というのは親に対しての左寄せとか右寄せなどのどこに引っ付いてるかのスタート位置の話です。
簡単にいうと位置の基準点を作るのが制約です
親以外にも同列の子要素に対して制約をつけるというものもできます。
この辺は言葉では理解できないと思うので実際にやってみればなんとなく理解できるようになります。
制約をつけてみる
③のパネルでつまみの部分をドラッグして親の端にドロップして付けます
上下のどちらか、左右のどちらの２個の制約がないと位置が決まらないためエラーとなります
左右(上下)の両方に制約をつけたらどうなるか
左右の２つを親に対して付けた場合はその親の中心になります。中央寄せってやつです。
文字列リソースの入れ方
おわりに
iOSのレイアウト制作でも制約を使ってレイアウトを作るというのが一般的です。