contentAndroidのレイアウト👶初心者向けざっくり理解Android初心者この投稿は、Androidアプリ開発を学び始めたばかりの初心者向けに、ざっくりとレイアウトについて説明をするために記述しました。レイアウトの中からRelativeLayout/LinearLayoutの基本についてピックアップしています。はじめにandroidのアプリは基本的に、実際にアプリを動かす中身の部分と見た目の部分の二種類のファイルで作られています。中身の部分は、javaというプログラミング言語で書かれていて、見た目の部分はxmlというマークアップ言語で書かれています。この、見た目を作るxmlファイルのことをレイアウトファイルと呼び、ここで作ったレイアウト(見た目)をjava(中身)で動かしていきます。レイアウトについてレイアウトの中には、WidgetsとLayoutsの2種類があります。Widgetsは部品、Layoutsは枠と考えてください。Widgets(部品)は必ずLayouts(枠)の中にしか配置できません。Layouts(枠)の中にLayouts(枠)を入れることも可能です。WidgetsWidgetsには、TextView文字を表示する部品ImageView画像を表示する部品ListView要素をリストのように並べて表示させる部品Buttonユーザーからのクリックの入力を得ることのできる部品などがあります。android:layout_height="wrap_content"/>このように作成されています。(話をわかりやすくするために、位置関係やサイズのプロパティは省いています。)逆に、xmlファイルに同様の記述をすれば、GUI上に同じようにWidgetsが描画されます。LayoutsLayoutsにはRelativeLayout中の要素の位置関係を相対的に決めるレイアウトLinearLayout縦か横1列に要素を整列させるレイアウトFrameLayout要素を重ねて表示することのできるレイアウトConstraintLayout要素に制約を持たせて位置を決めることのできるレイアウト(去年くらいに出た新しいレイアウト)などがあります。これらをまとめてViewと呼び、このView自体はjavaで書かれています。レイアウトファイルはxmlで書かれていると説明しました。/>などの部品はViewであり、これらの大もとはjavaで書かれています。よって、これらをjavaから描画することも可能です。それについてはまた別の機会に説明します。Layouts(枠)の種類によって、Widgets(部品)の並び方が変わってきます。この投稿では、まず理解しておくと良い、RelativeLayoutとLinearLayoutの並び方を中心に解説していきます。レイアウトのプロパティ各LayoutsによってWidgetsの並び方が変われば、設定できるプロパティも変わってきます。様々なLayoutsで共通して設定できるプロパティについて解説します。id例えば、同じLayoutの中に複数のButtonがあったとします。それぞれのButtonに対して役割を持たせたいですよね。このように、Button1つ1つを識別したい時にidを使います。簡単に言うと、それぞれのButtonに対して名前をつけてあげる役割を持っているのが、idです。Viewにidを追加するViewに対して、idを追加(名前をつける)したいときには、android:id="@+id/【つけたいid(名前)】"というふうに記述します。〜〜中略〜〜/>このように記述します。width/heightwidth・heightはそれぞれ、幅・高さを表します。このプロパティで、各Viewの大きさを決めることが出来ます。match_parentmatch_parentは、親のViewに対していっぱいに、幅・高さを調節することができるプロパティです。wrap_contentwrap_contentは、Viewの内容の大きさに合わせて、幅・高さを調節することができるプロパティです。dpdpは、大きさを数字で絶対的に決める時に用いる単位です。Androidの端末には色々な画面サイズがあるので、色々な画面サイズに対応させるためには、相対的に大きさを決めたほうが好ましいです。LinarLayoutLinearLayoutは、縦か横1列に要素を整列させることのできるレイアウトです。orientation縦に整列させるか、横に整列させるかを決めるには、orientationというプロパティを設定します。horizontal横に整列させる事ができます。android:orientation="horizontal"vertical縦に整列させる事ができます。android:orientation="vertical"layout_weightlayout_weightは、余白部分をそれぞれのViewが指定した比率で分け合って使うことのできるプロパティです。LinearLayoutには、画面いっぱいに均等にViewの大きさを決めてくれる、という特徴があります。layout_weightを使うと、均等にViewの大きさを決めることができます。この場合、それぞれにandroid:layout_weight="1"を設定しているため、ブタの横の大きさがすべて等しくなります。app:srcCompat="@drawable/icon"/>layout_weightを使うときの注意点layout_weightによって、比でViewの幅・高さを決める場合、その方向の長さを0dpにする必要があります。horizontalのときは、横方向に整列させるため、android:layout_width="0dp"とし、横方向の長さ(幅・width)を0dpとします。verticalのときは、縦方向に整列させるため、android:layout_height="0dp"とし、縦方向の長さ(高さ・height)を0dpとします。RelativeLayoutRelativeLayoutは、各Viewの位置関係を相対的に決めることのできるレイアウトです。それぞれのブタの色で名前をつけました。名前はピンク→ImaveViewPink青→ImaveViewBlueオレンジ→ImaveViewOrange緑→ImaveViewGreenこれらのブタは、一見バラバラに適当に並んでいるように見えますが、実はそれぞれに配置のプロパティが割り振られています。この場合のコードは以下のようになっています。app:srcCompat="@drawable/icon"/>親Viewに対するプロパティまずは親View2に対するプロパティです。親のViewの右に寄せて配置する他のViewに対するプロパティ次は他のViewに対するプロパティです。指定したidのViewのベースラインの位置とプロパティを設定するViewのベースラインを揃えて配置するここで、先ほどのxmlを見てみましょう。app:srcCompat="@drawable/icon"/>imageViewPinkピンクのブタは、android:layout_alignParentTop="true"親Viewの上寄せで配置する。android:layout_centerHorizontal="true"垂直方向の中心に寄せて配置する。imageViewBlue青のブタは、android:layout_below="@+id/imageViewPink"ピンクのブタの下に配置する。android:layout_toEndOf="@+id/imageViewPink"ピンクのブタの右に合わせて配置する。imageViewOrangeオレンジのブタは、android:layout_centerInParent="true"親Viewのど真ん中に配置する。-android:layout_below="@+id/imageViewOrange"オレンジのブタの下に配置する。android:layout_toStartOf="@+id/imageViewOrange"オレンジのブタの左に合わせて配置する。このように、配置したい場所を決めることが出来ます。○○の下に、とか、左に合わせる、という設定(相対的に位置を決めている)をしているため、基準となるViewが動いたら他のViewも動いてしまいます。以下のようなレイアウトを作ってみましょう。~~spのspが文字サイズの単位です。(スクリーンショットのサイズはTextViewが60sp、Buttonが30sp)画面いっぱいにきっちりViewを並べるときLinearLayoutを使うのがGoodAndroidスマホには色々な画面サイズの機種があるので、相対的にサイズが決まるLinearLayoutを使うと、どの端末でも画面いっぱいにViewが並びます。コードで操作するのではなくて、AndroidStudioでxmlファイルを開いたときのDesignタブのように、アイコンをクリックやドラッグするなどして操作できるユーザーインターフェイスのこと。↩そのViewが入っているViewのことを親Viewと呼びます。Okabe@mii-changモバイルアプリエンジニアFollowIoTLTIoT縛りの勉強会です。IoTというワードがバズワードになりつつあります。いえ、IoT領域には関連する幅広い知識や技術があります。アイディアやインスピレーションも重要です。この会は個々が持っている知識や開発していることの情報共有や発信の場になります。upLoginユーザーは見つかりませんでした。