手机开å‘æŒ‡å— > Android > 布局



レイアウトã®æ¦‚è¦

   Viewã¨ï¼¶ï½‰ï½…wGrï½ï½•ï½ã®çµ„ã¿åˆã‚ã›ã§ã€ã‚¢ãƒ—リã«é…ç½®ã™ã‚‹éƒ¨å“ã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆè¨­å®šãŒå¯èƒ½


Viewã¨ï¼¶ï½‰ï½…wGrï½ï½•ï½

   ・Viewã®é›†ã¾ã‚Šã‚’ViewGrï½ï½•ï½ã¨ã„ã†
   ・ViewGrï½ï½•ï½ã¯è¤‡æ•°ã®ï¼¶ï½‰ï½…ï½—ã‚’å«ã‚€
   ・ViewGrï½ï½•ï½ã®ä¸­ã«ï¼¶ï½‰ï½…wGrï½ï½•ï½ã‚’å«ã‚€ã“ã¨ã‚‚ã§ãã‚‹
   ・レイアウトã¯ï¼¶ï½‰ï½…wGrï½ï½•ï½ã‚’継承ã—ã¦ã„ã‚‹
   ※具体的ãªã‚¤ãƒ¡ãƒ¼ã‚¸ã¯ä»¥ä¸‹ã®ç¶™æ‰¿å›³ã‚’å‚照。


ViewGrï½ï½•ï½ ã‚’å–ã‚Šå·»ãクラス   

    ViewGrï½ï½•ï½ã¨ãã®ç¶™æ‰¿é–¢ä¿‚を以下ã«è¨˜è¿°ã™ã‚‹

  ViewGroup.gif


レイアウトã®ç¨®é¡ž


    代表的ãªãƒ“ューグループ(レイアウト)を以下ã«è¨˜è¿°ã™ã‚‹

Ⅰ Absolute layout  絶対座標指定ã®é…ç½®ãŒå¯èƒ½ã€€
Ⅱ Relative layout  相対座標指定ã®é…ç½®ãŒå¯èƒ½ã€€
Ⅲ Linear  layout  縦ï¼æ¨ªã€€æŒ‡å®šã®é…ç½®ãŒå¯èƒ½ã€€
Ⅳ Table  layout  表形å¼ã®é…ç½®ã®é…ç½®ãŒå¯èƒ½ã€€
Ⅴ Frame  layout  ビューã®é‡ã­åˆã‚ã›ãŒå¯èƒ½ã€€
 他色々 


Ⅰ.Absolute layout

    ・部å“ã®é…置を ã€çµ¶å¯¾åº§æ¨™ã€‘ ã§æŒ‡å®šã™ã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã€‚
    ・SDK1.5ã‹ã‚‰éžæŽ¨å¥¨ã¨ãªã£ãŸã€‚(æらãç”»é¢ã‚µã‚¤ã‚ºã®ç•°ãªã‚‹è¤‡æ•°ã®ãƒ‡ãƒã‚¤ã‚¹ã«å¯¾å¿œã§ããªã„為)


   absolute.gif  absolute2.gif


絶対座標ã®æŒ‡å®š

   lï½ï½™ï½ï½•ï½”_x 
   lï½ï½™ï½ï½•ï½”_y 


部å“ã®å¹…・高ã•æŒ‡å®š

   lï½ï½™ï½ï½•ï½”_width
   lï½ï½™ï½ï½•ï½”_height
   fill_ï½ï½ï½’entã¯æœ€å¤§ã‚µã‚¤ã‚ºã€‚ï½—ï½’ï½ï½_cï½ï½Žï½”entã¯æœ€å°ã‚µã‚¤ã‚º



Ⅱ.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ã‚’ï¼ã«ã—ã¦ã€weightを1ã¨ã™ã‚‹

  レイアウトã®ï½˜ï½ï½Œä¾‹

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





Viewã®ãƒ—ロパティ

   å‚考 - Android Wiki

   ・nextFï½ï½˜ï½•ï½“Dï½ï½—n - フォーカスãŒä¸‹æ–¹å‘ã«é·ç§»ã—ãŸæ™‚ã®é·ç§»å…ˆViewを定義
   ・ï½ï½ï½„ding - 上下左å³ã®ãƒ‘ディングを設定
   ・scrï½ï½Œï½Œï½‚ï½ï½’Alwï½ï½™ï½“Drï½ï½—Verticï½ï½Œï¼´ï½’ï½ï½ƒï½‹ - スクロールãƒãƒ¼ã‚’表示ã™ã‚‹ã‹ã©ã†ã‹


ViewGrï½ï½•ï½ã®ãƒ—ロパティ

   å‚考 - Android Wiki



  


表ç¾å˜ä½

   レイアウト指定ã§åˆ©ç”¨å¯èƒ½ãªå˜ä½

px ピクセル
dp 密度éžä¾å­˜ãƒ”クセル
sp å€çŽ‡éžä¾å­˜ãƒ”クセル
mm ミリメータ
pt ãƒã‚¤ãƒ³ãƒˆæ•°
in インãƒ





縦å‘ãレイアウトã¨æ¨ªå‘ãレイアウト

   横å‘ãç”»é¢ã«ã¯ã€"Layout-land"用フォルダを用æ„ã™ã‚‹ã€‚

layout-land.jpg



  戻る

     




Front page   Edit Unfreeze Diff Backup Upload Copy Rename Reload   New List of pages Search Recent changes   Help   RSS of recent changes