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  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

    ・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.gif  absolute2.gif


XML attribute which absolute coordinate is specified in

   layout_x 
   layout_y 


XML attribute in which width and height of parts are specified

   layout_width
   layout_height
   fill_parent is MAX size. wrap_content is minimum size.



Ⅱ.Relative layout

    Layout which specify the relative position of widget. Can be specified placed in the top or bottom.


   relative.gifrelative2.gif

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



Ⅲ.Linear layout

    Liner Layout is the layout which arrange widgets at straight vertical or horizontal.

   liner.gif       liner2.gif



Ⅳ.Table layout

   This layout can arranged widget in a tabular.

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

    参考:次世代創造機構



Ⅴ.Frame layout

    Frame layout is easy to use when stacking the View.
    For example, when overlaying images is available.


   FrameLayout01.gif    FrameLayout02.gif
         Outline                    Screen



Practical use

Half-and-half

   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: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



  


Units of represent

   Unit that can be used by layout

px pixels 
dp Density Independent Pixels 
sp Scale Independent Pixels 
mm millimeter
pt Point 
in Inch 





Portrait and landscape layout

   The Horizontal screen, Use "Layout-land" Folder.

layout-land.jpg



  Back


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