- The added line is THIS COLOR.
- The deleted line is THIS COLOR.
''[[MobileApp>Mobile Application 入門]]'' > ''[[Android>Android]]'' > ''Layout''
''[[MobileApp>Mobile Application Guide]]'' > ''[[Android>Introduction to Android]]'' > ''Layout''
~
*レイアウト [#sb77194a]
**ＶｉｅｗとＶｉｅｗＧｒｐｕｐ [#y454ce88]
・Ｖｉｅｗの集まりをＶｉｅｗＧｒｏｕｐという~
・ＶｉｅｗＧｒｏｕｐは複数のＶｉｅｗを含む~
・ＶｉｅｗＧｒｏｕｐの中にＶｉｅｗＧｒｏｕｐを含むこともできる~
・レイアウトはＶｉｅｗＧｒｏｕｐを継承している~
~
※具体的なイメージは以下の継承図をご参照下さい。
*Layout's Overview [#sb77194a]
The UI of application can be set by the combination of View and ViewGroup.
~
**ＶｉｅｗＧｒｏｕｐ を取り巻くクラス [#b370a8dc]
~
**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.
&ref(ViewGroup.gif);
~
**ViewGroup surrounding Class [#b370a8dc]
"ViewGroup" and its succession relations are described as follows.
**表現単位 [#ya5409d4]
&ref(ViewGroup.gif,nolink);
レイアウト指定で利用可能な単位~
px (ピクセル)~
dp (密度非依存ピクセル)~
sp (倍率非依存ピクセル)~
in (インチ)~
mm (ミリメータ)
~
*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 | Horizontal direction and the vertical direction can be specified. |
|Ⅳ| Table layout | The table form can be arranged. |
|Ⅴ| Frame layout | Overlapping the VIEW is possible. |
|| the others ||
~
*レイアウトの種類 [#k84d3564]
-absolute layout 絶対座標指定の配置が可能
-relative layout 相対座標指定の配置が可能
-Linear layout 縦／横 指定の配置が可能
-Table layout 表形式の配置の配置が可能
-他色々
**Ⅰ．Absolute layout [#ye06868a]
・Layout specified by using [absolute coordinate]~
・It became non-recommendation from SDK1.5. （Because this layout cannot support multiple devices for different screen sizes.）
~
**Absolute layout [#ye06868a]
・部品の配置を 【絶対座標】 で指定するレイアウト。~
・SDK1.5から非推奨となった。（恐らく画面サイズの異なる複数のデバイスに対応できない為）
&ref(absolute.gif,nolink); &ref(absolute2.gif,nolink);~
~
***絶対座標の指定 [#kd3b4e95]
ｌａｙｏｕｔ_ｘ ~
ｌａｙｏｕｔ_ｙ ~
***XML attribute which absolute coordinate is specified in [#kd3b4e95]
ｌａｙｏｕｔ_ｘ ~
ｌａｙｏｕｔ_ｙ ~
~
***部品の幅・高さ指定 [#rbcc265f]
ｌａｙｏｕｔ_ｗｉｄｔｈ~
ｌａｙｏｕｔ_ｈｅｉｇｈｔ~
ｆｉｌｌ_ｐａｒｅｎｔは最大サイズ。ｗｒａｐ_ｃｏｎｔｅｎｔは最小サイズ
***XML attribute which width and height of parts are specified in[#rbcc265f]
ｌａｙｏｕｔ_ｗｉｄｔｈ~
ｌａｙｏｕｔ_ｈｅｉｇｈｔ~
ｆｉｌｌ_ｐａｒｅｎｔ is MAX size. ｗｒａｐ_ｃｏｎｔｅｎｔ is minimum size.
~
**Relative layout [#t95a1616]
~
工事中
**Ⅱ．Relative layout [#t95a1616]
Layout which specify the relative position of widget. Can be specified placed in the top or bottom.~
「基準の位置を変更すれば、それに伴いほかのウィジェットも自動的に位置が調整できる」「斜めや円形にも配置が可能」というメリットがある一方、「気軽にウィジェットを追加・削除できない」という点や、「どのようにリレーションさせているかが自分でも分からなくなってしまう」という点がデメリット。
~
&ref(relative.gif,nolink);&ref(relative2.gif,nolink);~
**Linear layout [#j52dd8c3]
縦に並べたり~
横に並べたり
Liner Layoutは、縦向きまたは横向きに一直線にウィジェットを並べるレイアウトです。
「基準の位置を変更すれば、それに伴いほかのウィジェットも自動的に位置が調整できる」「斜めや円形にも配置が可能」というメリットがある一方、~
「気軽にウィジェットを追加・削除できない」、「どのようにリレーションさせているか分からなくなってしまう」という点がデメリット。
~
**Table layout [#w8af4a08]
表形式に並べるレイアウト
&ref(tablelayout2.png);&ref(tablelayout.png);~
Outline 画面~
~
**Ⅲ．Linear layout [#j52dd8c3]
Liner Layout is the layout which arrange widgets at straight vertical or horizontal.
ボタンのレイアウト~
http://www.javadrive.jp/android/xml_layout/index7.html
&ref(liner.gif,nolink); &ref(liner2.gif,nolink);~
画面の作り方~
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]]
~
**Ⅳ．Table layout [#w8af4a08]
This layout can arranged widget in a tabular.
&ref(tablelayout2.png,nolink); &ref(tablelayout.png,nolink);~
Outline Screen~
~
*Ｖｉｅｗのプロパティ [#tcf6cd7d]
[[参考 - Android Wiki>http://wikiwiki.jp/android/?UI%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8%2FView]]
~
・ｎｅｘｔＦｏｘｕｓＤｏｗｎ - フォーカスが下方向に遷移した時の遷移先Viewを定義~
・ｐａｄｄｉｎｇ - 上下左右のパディングを設定~
・ｓｃｒｏｌｌｂａｒＡｌｗａｙｓＤｒａｗＶｅｒｔｉｃａｌＴｒａｃｋ - スクロールバーを表示するかどうか
~
~
**ＶｉｅｗＧｒｏｕｐのプロパティ [#tcf6cd7d]
**Ⅴ．Frame layout [#p1539b7e]
[[参考 - Android Wiki>http://wikiwiki.jp/android/?UI%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8%2FViewGroup]]
Frame layout is easy to use when stacking the View.~
For example, when overlaying images is available.
~
&ref(FrameLayout01.gif,nolink); &ref(FrameLayout02.gif,nolink);~
Outline Screen~
~
~
~
*Practical use [#x63c4c9f]
**Half-and-half [#ycf583ce]
&ref(hanbun.png);
~
*縦向きレイアウトと横向きレイアウト [#z4bb8c77]
If you want to set half-and-half to buttons layout ,~
Use "LinearLayout",and assign 0 to "layout_width",and assign 1 to "weight".
~
~
横向き画面には、"Layout-land"用フォルダを用意する。
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="before"
android:id="@+id/Button01"
android:layout_height="wrap_content" >
</Button>
<Button
android:layout_width="0dip"
android:layout_weight="1"
android:text="next"
android:id="@+id/Button02"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
</Button>
</LinearLayout>
#ref(layout-land.jpg);
~
~
~
~
*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]]
・ｎｅｘｔＦｏｘｕｓＤｏｗｎ - フォーカスが下方向に遷移した時の遷移先Viewを定義~
・ｐａｄｄｉｎｇ - 上下左右のパディングを設定~
・ｓｃｒｏｌｌｂａｒＡｌｗａｙｓＤｒａｗＶｅｒｔｉｃａｌＴｒａｃｋ - スクロールバーを表示するかどうか
~
**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]]
~
~
~
~
**Units of represent [#ya5409d4]
Unit that can be used by layout~
#style(class=table_left){{
|px| pixels |
|dp| Density Independent Pixels |
|sp| Scale Independent Pixels |
|mm| millimeter |
|pt| Point |
|in| Inch |
~
~
~
~
*Portrait and landscape layout [#z4bb8c77]
The Horizontal screen, Use "Layout-land" Folder.
#ref(layout-land.jpg,nolink);
~
//*その他 [#t9aed44b]
//リソースマネージャで各解像度毎のレイアウトを切り替えが出来 るよう
~
''[[Back>Introduction to Android]]''
''[[戻る>Android]]''
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
