MobileApp > Android > Layout



レイアウトの概要 †

   ViewとViewGroupの組み合わせで、アプリに配置する部品のレイアウト設定が可能


ViewとViewGroup †

   ・Viewの集まりをViewGroupという
   ・ViewGroupは複数のViewを含む
   ・ViewGroupの中にViewGroupを含むこともできる
   ・レイアウトはViewGroupを継承している
   ※具体的なイメージは以下の継承図を参照。


ViewGroup を取り巻くクラス    †

    ViewGroupとその継承関係を以下に記述する

  ViewGroup.gif


レイアウトの種類 †


    代表的なビューグループ(レイアウト)を以下に記述する

 Absolute layout  絶対座標指定の配置が可能 
 Relative layout  相対座標指定の配置が可能 
 Linear  layout  縦/横 指定の配置が可能 
 Table  layout  表形式の配置の配置が可能 
 Frame  layout  ビューの重ね合わせが可能 
 他色々 


Ⅰ.Absolute 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>





Viewのプロパティ &dagger;

   参考 - Android Wiki

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


ViewGroupのプロパティ &dagger;

   参考 - Android Wiki



  


表現単位 &dagger;

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

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





縦向きレイアウトと横向きレイアウト &dagger;

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

layout-land.jpg

横向き画面にしたくない場合 &dagger;

  ManifestFile.xmlで横画面にしたくない該当Activityに「android:screenOrientation="portrait"」を加えてやることで、横回転しなくなる。


 AndroidManifest.xml

   <application android:icon="@drawable/icon" android:label="@string/app_name">
       <activity android:name=".Activity1"
                 android:label="@string/app_name"
                 android:screenOrientation="portrait">    ←★コレ★
       </activity>
            ・
            ・
   </application>



  戻る


Wiki TOP   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS