marunomaruno-memo

marunomaruno-memo

[Android] レイアウト (4) RelativeLayout レイアウト

2012年03月23日 | Android
[Android] レイアウト (4) RelativeLayout レイアウト
================================================================================

他のウィジェットの横や下にどの程度離れて配置するか、を示すルールベース・モデルの
レイアウト。
他のウィジェットとの相対位置を基にして、自分の位置を決める。
他のウィジェットは、自分の隣りである必要はなく、離れていても OK。
相対位置は、RelativeLayout に組み込まれているいくつかの属性を利用することで指定
する。

この RelativeLayout を使うと、ウィジェットの上にウィジェットを重ねられる。


XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
android:gravity        setGravity(int)        ウィジェットの配置方法
android:ignoreGravity  setIgnoreGravity(int)  gravityで 指定した配置方法の影響を
受けない Widget を指定
---


・コンテナを基準とする位置

これらの値は論理値(true/false)。

android:layout_alignParentBottom  ウィジェットの下辺とコンテナの下辺をそろえる
android:layout_alignParentLeft    ウィジェットの左辺とコンテナの左辺をそろえる
android:layout_alignParentRight   ウィジェットの右辺とコンテナの右辺をそろえる
android:layout_alignParentTop     ウィジェットの上辺とコンテナの上辺をそろえる

android:layout_centerHorizontal   ウィジェットをコンテナの中央に水平に配置
android:layout_centerVertical     ウィジェットをコンテナの中央に垂直に配置
android:layout_centerInParent     ウィジェットをコンテナの中央に水平・垂直に配置


・他のウィジェットを基準とする位置

他のウィジェットは、@id/リソースID で参照する。

android:layout_above        指定されたビューの上辺にこのビューを配置
android:layout_below        指定されたビューの下辺にこのビューを配置
android:layout_toLeftOf     指定されたビューの左辺にこのビューを配置
android:layout_toRightOf    指定されたビューの右辺にこのビューを配置

android:layout_alignBottom  指定されたビューの下辺にこのビューの下辺をそろえる
android:layout_alignLeft    指定されたビューの左辺にこのビューの左辺辺をそろえる
android:layout_alignRight   指定されたビューの右辺にこのビューの右辺をそろえる
android:layout_alignTop     指定されたビューの上辺にこのビューの上辺をそろえる


マージンについては、ViewGroup.MarginLayoutParams を参照。
レイアウト (1) レイアウトの概要
http://blog.goo.ne.jp/marunomarunogoo/d/20120320


▲ レイアウト

一部のウィジェットが重なって表示される。

□ res/layout/main.xml
---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="5dip"
        android:weightSum="1" >

        <ToggleButton
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textOff="1¥nParentLeft¥nParentTop"
            android:textOn="1¥nParentLeft¥nParentTop" />

        <ToggleButton
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/button1"
            android:layout_below="@id/button1"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textOff="2¥nbelow=1"
            android:textOn="2¥nbelow=1" />

        <ToggleButton
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/button2"
            android:layout_below="@id/button2"
            android:layout_toRightOf="@id/button2"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textOff="3¥nalignTop=2¥nbelow=2¥ntoRightOf=2"
            android:textOn="3¥nalignTop=2¥nbelow=2¥ntoRightOf=2" />

        <ToggleButton
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/button3"
            android:layout_below="@id/button3"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textOff="4¥nalignRight=3¥nbelow=3"
            android:textOn="4¥nalignRight=3¥nbelow=3" />

        <ToggleButton
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@id/button2"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textOff="5¥nParentRight¥nbelow=2"
            android:textOn="5¥nParentRight¥nbelow=2" />
        
        <ToggleButton
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/button2"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textOff="6¥nbelow=2"
            android:textOn="6¥nbelow=2" />
        
        </RelativeLayout>

</LinearLayout>
---


□ 表示
---
1
ParentLeft
ParenTop

2               3
below=1         alignTop=2
                below=2
6               toRightOf=2              5
below=2                                  ParentRight
                4                        bwlow=2
                alignRight=3
                below=3
---


設定値のまとめ
------------------------- --- --- --- --- --- --- 
                           1   2   3   4   5   6
------------------------- --- --- --- --- --- --- 
layout_alignParentBottom 
layout_alignParentLeft     x
layout_alignParentRight                x
layout_alignParentTop      x      
------------------------- --- --- --- --- --- --- 
layout_above             
layout_below                   1   2   3   2   2
layout_toLeftOf          
layout_toRightOf                   2
------------------------- --- --- --- --- --- --- 
layout_alignBottom       
layout_alignLeft         
layout_alignRight                      3
layout_alignTop                    2
------------------------- --- --- --- --- --- --- 

[1] は、親レイアウトの左端と上端に合わせる。

[2] は、[1] の下端に、自身の上端を合わせる。

[3] は、layout_below="2" と layout_alignTop="2" が指定されているが、[2] の上端と
自身の上端が合っている。また、layout_toRightOf="2" なので、[2] の右端が自身の左
端と合っている。

[4] は、[3] の下端に、自身の上端を合わせ、左端を合わせている。

[5] は、[2] の下端に、自身の上端を合わせ、親レイアウトの右端と自身の右端を合わせ
ている。

[6] は、[2] の下端に、自身の上端を合わせる。


□ RelativeLayout クラス

java.lang.Object
   +   android.view.View
        +   android.view.ViewGroup
             +   android.widget.RelativeLayout

相対レイアウトを定義するクラス。


XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
android:gravity
android:ignoreGravity
---

それぞれ、以下のメソッドで動的に変更できる。
    setGravity(int)
    setIgnoreGravity(int)


□ RelativeLayout.LayoutParams クラス

java.lang.Object
   +   android.view.ViewGroup.LayoutParams
        +   android.view.ViewGroup.MarginLayoutParams
             +   android.widget.RelativeLayout.LayoutParams

相対レイアウトのパラメーターを定義するクラス。


XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
android:layout_above
android:layout_alignBaseline
android:layout_alignBottom
android:layout_alignLeft
android:layout_alignParentBottom
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignRight
android:layout_alignTop
android:layout_alignWithParentIfMissing
android:layout_below
android:layout_centerHorizontal
android:layout_centerInParent
android:layout_centerVertical
android:layout_toLeftOf
android:layout_toRightOf
---

それぞれに対するメソッドはない。説明は上記を参照。


▲ アクティビティ

ボタンがクリックされたら、その状態によって、ボタンの幅と高さを倍にするか半分にす
る。

□ RelativeLayout01Activity.java

※ クラス名が上記の名前になっているだけで、コードは LinearLayout01Activity.java 
と同じ。

                                                                            以上