MobileApp > Android > Layout



Layout's Overview

   The UI of application can be set by the combination of View and ViewGroup.



View and ViewGroup

   ・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   

    ViewGroup and the succession relation are described as follows.

  ViewGroup.gif


Kind of layout


    Typical View-Groups (layouts) are described as follows.

 Absolute layout  The layout placement which specifies the absolute coordinate. 
 Relative layout  The layout placement which specifies the relative coordinate. 
 Linear  layout  縦/横 指定の配置が可能 
 Table  layout  表形式の配置の配置が可能 
 Frame  layout  ビューの重ね合わせが可能 
 他色々 


Ⅰ.Absolute layout

    ・部品の配置を 【absolute coordinate】 で指定するLayout。
    ・SDK1.5から非推奨となった。(恐らく画面サイズの異なる複数のデバイスに対応できない為)


   absolute.gif  absolute2.gif


絶対座標の指定

   layout_x 
   layout_y 


部品の幅・高さ指定

   layout_width
   layout_height
   fill_parentは最大サイズ。wrap_contentは最小サイズ



Ⅱ.Relative layout

    相対的な位置指定をするレイアウト。また,上端や下端にレイアウトするといった指定を行うことも可能


   relative.gifrelative2.gif

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



Ⅲ.Linear layout

    Liner Layoutは、縦向きまたは横向きに一直線にウィジェットを並べるレイアウト

   liner.gif       liner2.gif



Ⅳ.Table layout

   表形式に並べるレイアウト

   tablelayout2.png    tablelayout.png
       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

    参考:次世代創造機構



Ⅴ.Frame layout

    Frame Layoutは、Viewを重ねる時に利用しやすいレイアウト
    例えば、画像を重ねる際に利用できる。


   FrameLayout01.gif    FrameLayout02.gif
         Outline                    画面



応用

半分半分

   hanbun.png
   半分半分にするときは、LinearLayoutを用いてlayout_widthを0にして、weightを1とする

  レイアウトの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

   参考 - Android Wiki

   ・nextFoxusDown - フォーカスが下方向に遷移した時の遷移先Viewを定義
   ・padding - 上下左右のパディングを設定
   ・scrollbarAlwaysDrawVerticalTrack - スクロールバーを表示するかどうか


Property of ViewGroup

   参考 - Android Wiki



  


表現単位

   レイアウト指定で利用可能な単位

px ピクセル
dp 密度非依存ピクセル
sp 倍率非依存ピクセル
mm ミリメータ
pt ポイント数
in インチ





縦向きレイアウトと横向きレイアウト

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

layout-land.jpg



  Back


Front page   New List of pages Search Recent changes   Help   RSS of recent changes