仕事の関係でAndroidを触る機会がとても増えたので、基本をしっかり抑えようと公式チュートリアルをはじめました。
今回やったのはインタラクティブなUIの作成チュートリアルです。このチュートリアルで学んだことをまとめます。
プロジェクトの作成
プロジェクトの構成は以下の通りです。
エミュレータの設定は以下の通りです。
プロジェクトを作成した段階で起動してみると以下のようにエミュレータが起動してアプリが立ち上がりました。エミュレータは初回起動はマシンパワーが必要な感じでしたが、一度起動させて放っておくと負荷はかからない印象です。
最初のUI
レイアウトエディタを使ってUIを作成します。レイアウトエディタを使用することでXMLを直接編集せずに直感的にUIを作成できます。Layout Editor による UI の作成に詳しい操作方法が載っています。
Constraint レイアウト
Constraint とは制約という意味です。AndroidのUIではこのConstraintと言われるものを使うことで、UI要素のレイアウトを決定することができます。Constraintは現実のバネのようなもので、要素と要素の間にスペースを開ける・詰める役割を果たします。レイアウトエディタ上でConstraintは以下の図のようにみることができます。
Constraint レイアウトの詳しい内容についてはConstraintLayoutに分かりやすい図とともに説明があります。
要素のサイズ
UIの要素にはそれぞれ大きさを設定することができます。大きさは縦・横に対して設定することができます。Androidのような実際の画面の大きさが環境ごとに変わる場合には固定値を設定するのではなく、画面の大きさの変更を見越して設定をするようにします。
要素の大きさは以下の３種類の方法で指定できます。
- dp : 固定値です。単位についてはさまざまな画面密度のサポートに詳しい記載があります。
- match_constraint : 親要素を元に可能な限り広がります。
- wrap_content : 内部の要素を元に可能な限り縮まります。内部の要素がない場合、見えなくなります。
これらの設定は、対象のUI要素を選択し [Attributes] パネルで変更することができます。
チュートリアルでは以上の図のように横に対して match_constraint を、縦に対して wrap_content を設定しました。
要素の属性値
UIの要素には上記のサイズの他にも様々な設定をすることができます。これらは要素を選択すると出てくる [Attribute] パネルから設定することができます。この [Attribute] パネルは全ての設定可能な値が表示されているわけではありません。全てを表示させるには右上の矢印をクリックします。
作成した画面
ここまでの作業で、チュートリアルでは以下のような画面を作成できました。
UIのチュートリアルは以上の基本的な内容で終了でした。JavaコードをGithubのリポジトリからコピーしてくれば実際に動作するアプリができますが、今回はUIのチュートリアルなのでコードの説明はありませんでした。（次のステップかな？）今後もチュートリアルを続けてAndroidアプリ開発をしていきたいと思います。
