選択 モバイル版に入る | PC版を継続
Android開発に助かるApkSchool版主募集中DISCUZ!X3.1 Japanese Version提供
表示: 1800|返信: 0

RelativeLayoutの基本

[リンクをコピー]
发表于 2013-11-1 17:16:42 | 显示全部楼层 |阅读模式
webhostingpad
相対レイアウト (RelativeLayout)

RelativeLayout は、表示用の部品を相対位置で表示するためのレイアウトです。
相対位置の配置方法は、以下の二つがあります。

  • 親のレイアウトに相対的に配置する (下図左側)
  • 特定の View を基準として配置する(下図右側)
親のレイアウトに相対的に配置する場合は、例えば LinearLayout 内の左上に配置する等の指定をします。
特定の View を基準として配置する場合は、例えばある Button の位置を基準として、その左に配置する等の指定をします。


     

RelativeLayout を使うと、LinearLayout を入れ子にして縦と横に配置するようなレイアウトも実現することができます。
レイアウトは階層が深くなると処理の負荷も増大しパフォーマンスが低下になりますので、

同じレイアウトを実現する場合、この相対レイアウト (RelativeLayout) も併用して、なるべく階層が深くならないように
したほうがパフォーマンスがよくなります。

リソースの定義 (親のレイアウトを基準とする場合)

リソースを定義するxml ファイル(main.xml等)は下記を示します。
  1. <RelativeLayout
  2.   xmlns:android="http://schemas.android.com/apk/res/android"
  3.   android:layout_width="match_parent"
  4.   android:layout_height="match_parent">

  5.   <!-- 親のレイアウトからの相対位置指定 -->
  6.   <Button
  7.     android:layout_width="wrap_content"
  8.     android:layout_height="wrap_content"
  9.     android:text="top left"
  10.     android:layout_alignParentTop="true"
  11.     android:layout_alignParentLeft="true"/>

  12.   <Button
  13.     android:layout_width="wrap_content"
  14.     android:layout_height="wrap_content"
  15.     android:text="top center"
  16.     android:layout_alignParentTop="true"
  17.     android:layout_centerInParent="true"/>

  18.   <Button
  19.     android:layout_width="wrap_content"
  20.     android:layout_height="wrap_content"
  21.     android:text="top right"
  22.     android:layout_alignParentTop="true"
  23.     android:layout_alignParentRight="true"/>

  24.   <Button
  25.     android:layout_width="wrap_content"
  26.     android:layout_height="wrap_content"
  27.     android:text="left"
  28.     android:layout_centerInParent="true"
  29.     android:layout_alignParentLeft="true"/>

  30.   <Button
  31.     android:id="@+id/btnCenter"
  32.     android:layout_width="wrap_content"
  33.     android:layout_height="wrap_content"
  34.     android:text="center"
  35.     android:layout_centerInParent="true"/>

  36.   <Button
  37.     android:layout_width="wrap_content"
  38.     android:layout_height="wrap_content"
  39.     android:text="right"
  40.     android:layout_centerInParent="true"
  41.     android:layout_alignParentRight="true"/>

  42.   <Button
  43.     android:layout_width="wrap_content"
  44.     android:layout_height="wrap_content"
  45.     android:text="bottom left"
  46.     android:layout_alignParentBottom="true"
  47.     android:layout_alignParentLeft="true"/>

  48.   <Button
  49.     android:layout_width="wrap_content"
  50.     android:layout_height="wrap_content"
  51.     android:text="bottom center"
  52.     android:layout_alignParentBottom="true"
  53.     android:layout_centerInParent="true"/>

  54.   <Button
  55.     android:layout_width="wrap_content"
  56.     android:layout_height="wrap_content"
  57.     android:text="bottom right"
  58.     android:layout_alignParentBottom="true"
  59.     android:layout_alignParentRight="true"/>
  60. </RelativeLayout>
コードコピー
属性の意味は、以下の通りです。

属性 位置 説明
layout_alignParentLeft 親レイアウトの左側に配置します。
layout_alignParentRight 親レイアウトの右側に配置します。
layout_alignParentTop 親レイアウトの上側に配置します。
layout_alignParentBottom 親レイアウトの下側に配置します。
layout_centerInParent 中央 親レイアウトの中央に配置します。

また、左上など斜めの位置に配置する場合は、以下のように左と上の両方の属性を指定します。
  1. android:layout_alignParentTop="true"
  2. android:layout_alignParentLeft="true"
コードコピー
リソースの定義 (特定のViewを基準とする場合)

リソースを定義するxml ファイル(main.xml等)は下記を示します。
  1. <RelativeLayout
  2.   xmlns:android="http://schemas.android.com/apk/res/android"
  3.   android:layout_width="match_parent"
  4.   android:layout_height="match_parent">

  5.   <!-- 他の View からの相対位置指定 -->
  6.   <Button
  7.     android:id="@+id/btnCenter"
  8.     android:layout_width="wrap_content"
  9.     android:layout_height="wrap_content"
  10.     android:text="Center"
  11.     android:layout_centerInParent="true"/>

  12.   <Button
  13.     android:layout_width="wrap_content"
  14.     android:layout_height="wrap_content"
  15.     android:text="Left"
  16.     android:layout_toLeftOf="@id/btnCenter"
  17.     android:layout_alignTop="@id/btnCenter"/>

  18.   <Button
  19.     android:layout_width="wrap_content"
  20.     android:layout_height="wrap_content"
  21.     android:text="Right"
  22.     android:layout_toRightOf="@id/btnCenter"
  23.     android:layout_alignTop="@id/btnCenter"/>

  24.   <Button
  25.     android:layout_width="wrap_content"
  26.     android:layout_height="wrap_content"
  27.     android:text="Top"
  28.     android:layout_above="@id/btnCenter"
  29.     android:layout_alignLeft="@id/btnCenter"/>

  30.   <Button
  31.     android:layout_width="wrap_content"
  32.     android:layout_height="wrap_content"
  33.     android:text="Btm"
  34.     android:layout_below="@id/btnCenter"
  35.     android:layout_alignRight="@id/btnCenter"/>

  36.   <Button
  37.     android:layout_width="wrap_content"
  38.     android:layout_height="wrap_content"
  39.     android:text="TopLeft"
  40.     android:layout_toLeftOf="@id/btnCenter"
  41.     android:layout_above="@id/btnCenter"/>

  42.   <Button
  43.     android:layout_width="wrap_content"
  44.     android:layout_height="wrap_content"
  45.     android:text="TopRight"
  46.     android:layout_toRightOf="@id/btnCenter"
  47.     android:layout_above="@id/btnCenter"/>

  48.   <Button
  49.     android:layout_width="wrap_content"
  50.     android:layout_height="wrap_content"
  51.     android:text="BtnLeft"
  52.     android:layout_toLeftOf="@id/btnCenter"
  53.     android:layout_below="@id/btnCenter"/>

  54.   <Button
  55.     android:layout_width="wrap_content"
  56.     android:layout_height="wrap_content"
  57.     android:text="BtnRight"
  58.     android:layout_toRightOf="@id/btnCenter"
  59.     android:layout_below="@id/btnCenter"/>
  60. </RelativeLayout>
コードコピー
属性の意味は、以下の通りです。
属性位置 説明
layout_toLeftOf 指定 View の左側に配置します。
layout_toRightOf 指定 View の右側に配置します。
layout_above 指定 View の上側に配置します。
layout_below 指定 View 下側に配置します。
layout_alignLeft 左基準 指定 View の左位置を基準として配置します。
layout_alignRight 右基準 指定 View の右位置を基準として配置します。
layout_alignTop 上基準 指定 View の上位置を基準として配置します。
layout_alignBottom 下基準 指定 View の下位置を基準として配置します。

左上等に配置する場合は、以下のように 左 と 上 両方の属性を指定します。
  1. android:layout_toLeftOf="@id/btnCenter"
  2. android:layout_above="@id/btnCenter"
コードコピー

この記事に更なる添付があります

貴方は ログイン 後、ダウンロード・閲覧が可能となる,アカウントない?直ぐ登録

x
返信

道具使用 レポート

返信は先にログインが必要 ログイン | 直ぐ登録

フォーラム点数規則

フリーランス

モバイル版|APK School Net  

GMT+8, 2017-12-12 06:49 , Processed in 0.116226 second(s), 25 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速返信 トップへ リストへ