''[[MobileApp>Mobile Application Guide]]'' > ''[[Android>Introduction to Android]]'' > ''Layout'' ~ ~ *Layout's Overview [#sb77194a] The UI of application can be set by the combination of View and ViewGroup. ~ ~ **View and ViewGroup [#y454ce88] ・The set of Veiw is ViewGroup. ~ ・ViewGroup contains two or more View. ~ ・ViewGroup can be contained in ViewGroup. ~ ・The layout inherit ViewGroup. ~ ※Refer to the following succession charts for the practical visualization. ~ **ViewGroup surrounding Class [#b370a8dc] ViewGroup and the succession relation are described as follows. &ref(ViewGroup.gif,nolink); ~ *Kind of layout [#k84d3564] ~ Typical View-Groups (layouts) are described as follows. #style(class=table_left){{ |Ⅰ| Absolute layout | The layout placement which specifies the absolute coordinate. | |Ⅱ| Relative layout | The layout placement which specifies the relative coordinate. | |Ⅲ| Linear layout | 縦/横 指定の配置が可能 | |Ⅳ| Table layout | The table form can be arranged. | |Ⅴ| Frame layout | Overlapping the VIEW is possible. | || 他色々 || ~ **Ⅰ.Absolute layout [#ye06868a] ・部品の配置を 【absolute coordinate】 で指定するLayout。~ ・SDK1.5から非推奨となった。(恐らく画面サイズの異なる複数のデバイスに対応できない為) ~ &ref(absolute.gif,nolink); &ref(absolute2.gif,nolink);~ ~ ***XML attribute which absolute coordinate is specified in [#kd3b4e95] layout_x ~ layout_y ~ ~ ***XML attribute in which width and height of parts are specified [#rbcc265f] layout_width~ layout_height~ fill_parentは最大サイズ。wrap_contentは最小サイズ ~ ~ **Ⅱ.Relative layout [#t95a1616] 相対的な位置指定をするレイアウト。また,上端や下端にレイアウトするといった指定を行うことも可能~ ~ &ref(relative.gif,nolink);&ref(relative2.gif,nolink);~ 「基準の位置を変更すれば、それに伴いほかのウィジェットも自動的に位置が調整できる」「斜めや円形にも配置が可能」というメリットがある一方、~ 「気軽にウィジェットを追加・削除できない」、「どのようにリレーションさせているか分からなくなってしまう」という点がデメリット。 ~ ~ **Ⅲ.Linear layout [#j52dd8c3] Liner Layoutは、縦向きまたは横向きに一直線にウィジェットを並べるレイアウト &ref(liner.gif,nolink); &ref(liner2.gif,nolink);~ ~ ~ **Ⅳ.Table layout [#w8af4a08] 表形式に並べるレイアウト &ref(tablelayout2.png,nolink); &ref(tablelayout.png,nolink);~ Outline 画面~ ~ ~ 参考:ボタンのレイアウト~ http://www.javadrive.jp/android/xml_layout/index7.html 参考:画面の作り方~ http://www.techfirm.co.jp/lab/android/view.html 参考:Android Developer~ http://www.techdoctranslator.com/android/guide/ui/declaring-layout [[参考:次世代創造機構>http://www.xn--rhq6sw9f0w7aevaf9ak89m.jp/android/androidLecture/GuiTutorial/GuiTutorial.html]] ~ ~ **Ⅴ.Frame layout [#p1539b7e] Frame Layoutは、Viewを重ねる時に利用しやすいレイアウト~ 例えば、画像を重ねる際に利用できる。 ~ &ref(FrameLayout01.gif,nolink); &ref(FrameLayout02.gif,nolink);~ Outline 画面~ ~ ~ ~ *応用 [#x63c4c9f] **半分半分 [#ycf583ce] &ref(hanbun.png); ~ 半分半分にするときは、LinearLayoutを用いてlayout_widthを0にして、weightを1とする ~ ~ Example of layout.xml <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:layout_width="0dip" android:layout_weight="1" android:text="前へ" android:id="@+id/Button01" android:layout_height="wrap_content" > </Button> <Button android:layout_width="0dip" android:layout_weight="1" android:text="次へ" android:id="@+id/Button02" android:layout_height="wrap_content" android:layout_alignParentRight="true"> </Button> </LinearLayout> ~ ~ ~ ~ *Property of View [#tcf6cd7d] [[参考 - Android Wiki>http://wikiwiki.jp/android/?UI%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8%2FView]] ・nextFoxusDown - フォーカスが下方向に遷移した時の遷移先Viewを定義~ ・padding - 上下左右のパディングを設定~ ・scrollbarAlwaysDrawVerticalTrack - スクロールバーを表示するかどうか ~ **Property of ViewGroup [#tcf6cd7d] [[参考 - Android Wiki>http://wikiwiki.jp/android/?UI%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8%2FViewGroup]] ~ ~ ~ ~ **表現単位 [#ya5409d4] Unit that can be used by layout~ #style(class=table_left){{ |px| pixel| |dp| 密度非依存ピクセル| |sp| 倍率非依存ピクセル| |mm| millimeter | |pt| ポイント数| |in| インチ| ~ ~ ~ ~ *縦向きレイアウトと横向きレイアウト [#z4bb8c77] 横向き画面には、"Layout-land"用フォルダを用意する。 #ref(layout-land.jpg,nolink); ~ //*その他 [#t9aed44b] //リソースマネージャで各解像度毎のレイアウトを切り替えが出来 るよう ~ ''[[Back>Introduction to Android]]''