''[[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 its succession relations 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　|　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　||

~
**Ⅰ．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.）

~

　　　&ref(absolute.gif,nolink);　　&ref(absolute2.gif,nolink);~


~
***XML attribute which absolute coordinate is specified in [#kd3b4e95]
　　　ｌａｙｏｕｔ_ｘ　~
　　　ｌａｙｏｕｔ_ｙ　~

~
***XML attribute which width and height of parts are specified in[#rbcc265f]
　　　ｌａｙｏｕｔ_ｗｉｄｔｈ~
　　　ｌａｙｏｕｔ_ｈｅｉｇｈｔ~
　　　ｆｉｌｌ_ｐａｒｅｎｔ is MAX size. ｗｒａｐ_ｃｏｎｔｅｎｔ is minimum size.

~

~
**Ⅱ．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 is the layout which arrange widgets at straight vertical or horizontal.

　　　&ref(liner.gif,nolink);　　　　　　　&ref(liner2.gif,nolink);~


~

~

**Ⅳ．Table layout [#w8af4a08]
　　　This layout can arranged widget in a tabular.

　　　&ref(tablelayout2.png,nolink);　　　　&ref(tablelayout.png,nolink);~
　　　　　　　Outline　　　　　　　　　　　　　　　　　　　　Screen~
~

~

~

~
**Ⅴ．Frame layout [#p1539b7e]

　　　　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);
~
　　　If you want to set half-and-half to buttons layout ,~
　　　Use "LinearLayout",and assign 0 to "layout_width",and assign 1 to "weight".
~
~

　　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:text="before" 
            android:id="@+id/Button01"
            android:layout_height="wrap_content" >
        </Button>
 
        <Button 
            android:layout_width="0dip"
            android:layout_weight="1"
            android:text="次へ" 
            android:text="next" 
            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]]

　　　・ｎｅｘｔＦｏｘｕｓＤｏｗｎ - フォーカスが下方向に遷移した時の遷移先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]]''
Front page   Edit Diff Backup Upload Copy Rename Reload   New List of pages Search Recent changes   Help   RSS of recent changes