Backup diff of Android Layout(No. 35)

The added line is THIS COLOR.
The deleted line is THIS COLOR.
''[[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　|　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. （恐らく画面サイズの異なる複数のデバイスに対応できない為）
　　　　・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 in which width and height of parts are specified [#rbcc265f]
　　　ｌａｙｏｕｔ_ｗｉｄｔｈ~
　　　ｌａｙｏｕｔ_ｈｅｉｇｈｔ~
　　　ｆｉｌｌ_ｐａｒｅｎｔは最大サイズ。ｗｒａｐ_ｃｏｎｔｅｎｔは最小サイズ
　　　ｆｉｌｌ_ｐａｒｅｎｔ is MAX size. ｗｒａｐ_ｃｏｎｔｅｎｔ is minimum size.

~

~
**Ⅱ．Relative layout [#t95a1616]

　　　　相対的な位置指定をするレイアウト。また，上端や下端にレイアウトするといった指定を行うことも可能~
　　　　Layout  which specify the relative position of widget. また，上端や下端にレイアウトするといった指定を行うことも可能~

~
　　　&ref(relative.gif,nolink);&ref(relative2.gif,nolink);~


　　　「基準の位置を変更すれば、それに伴いほかのウィジェットも自動的に位置が調整できる」「斜めや円形にも配置が可能」というメリットがある一方、~
　　　「気軽にウィジェットを追加・削除できない」、「どのようにリレーションさせているか分からなくなってしまう」という点がデメリット。

~

~

**Ⅲ．Linear layout [#j52dd8c3]

　　　　Liner Layoutは、縦向きまたは横向きに一直線にウィジェットを並べるレイアウト
　　　　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　　　　　　　　　　　　　　　　　　　　画面~
　　　　　　　Outline　　　　　　　　　　　　　　　　　　　　Screen~
~

~


　　　　参考：ボタンのレイアウト~
　　　　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を重ねる時に利用しやすいレイアウト~
　　　　例えば、画像を重ねる際に利用できる。
　　　　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　　　　　　　　　　　　　　　　　　　　画面~
　　　　　　　　　Outline　　　　　　　　　　　　　　　　　　　　Screen~
~

~
~
*応用 [#x63c4c9f]
*Practical use [#x63c4c9f]

**半分半分 [#ycf583ce]
**Half & half [#ycf583ce]
　　　&ref(hanbun.png);
~
　　　半分半分にするときは、LinearLayoutを用いてlayout_widthを０にして、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: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]]

　　　・ｎｅｘｔＦｏｘｕｓＤｏｗｎ - フォーカスが下方向に遷移した時の遷移先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]]

~

~

~　　

~
**表現単位 [#ya5409d4]
**Units of represent  [#ya5409d4]

　　　Unit that can be used by layout~
#style(class=table_left){{
|px|　pixel|
|dp|　密度非依存ピクセル|
|sp|　倍率非依存ピクセル|
|mm|　millimeter |
|pt|　ポイント数|
|in|　インチ|
|in|　Inch|

~

~

~


~




*縦向きレイアウトと横向きレイアウト [#z4bb8c77]
*Portrait and landscape layout [#z4bb8c77]

　　　横向き画面には、"Layout-land"用フォルダを用意する。

#ref(layout-land.jpg,nolink);


~
//*その他 [#t9aed44b]
//リソースマネージャで各解像度毎のレイアウトを切り替えが出来 るよう
~
　　''[[Back>Introduction to Android]]''
Backup diff of Android Layout (No. 35)
