レイアウト例

Android用語集

カテゴリー: レイアウト  閲覧数:556 配信日:2014-08-02 08:37




shape


背景形状(shape)定義
・shapeタグを使用することにより、グラデーションや枠線、角丸などの効果を持った背景形状を定義可能
・定義した形状は、backgroundで指定して使用


アイコン


・Android側では、すぐ使用できるよう、予めシステムリソースアイコンを用意している
SDK 内の Drawable リソースが一覧できる「Android Drawables」が便利!
R.drawable


特徴


・Footer左領域と右領域のwidthは70pxで固定だが、Footer真ん中領域は異なる。具体的には"wrap_content"


構成概要


RelativeLayout … 大枠
 ┃ 
 ┣RelativeLayout … 一番上左のプロフィール領域
 ┣View … 「一番上左のプロフィール領域」右にある縦空きスペース 
 ┣RelativeLayout … 一番上の右半分以上を占めるメイン領域 


構成


・1つのRelativeLayoutの中に、複数の「RelativeLayout、View、LinearLayout」を配置

RelativeLayout
 ┃ 
 ┣RelativeLayout … 一番上左のプロフィール領域
 ┃│├android:id="@+id/ProfileImageContainer"
 ┃│├android:layout_alignParentLeft="true" … trueの場合、このビューの左端は、親の左端に一致
 ┃│└android:layout_alignParentTop="true" … trueの場合、このビューの上端は、親の上端に一致
 ┃│
 ┃├FrameLayout
 ┃││├android:id="@+id/ProfileImageFrame"
 ┃││├android:layout_centerInParent="true" … trueの場合、水平方向および垂直方向の位置が親のビューの中央になるように配置
 ┃││└android:background="@drawable/frame"
 ┃││
 ┃│└ImageView
 ┃│  ├ android:id="@+id/ProfileImageView"
 ┃│  ├android:layout_gravity="center" … 上下左右中央にオブジェクトを配置。サイズは変更しない
 ┃│  └android:src="@drawable/ic_launcher" … プロフィール画像ファイル(ic_launcher.png)
 ┃│
 ┃└TextView
 ┃ ├android:id="@+id/ProfileImageLabel"
 ┃ ├android:layout_below="@+id/ProfileImageFrame"
 ┃ ├android:layout_centerHorizontal="true" … 水平方向の位置が親のビューの中央になるように配置
 ┃ ├android:layout_marginTop="25dp"
 ┃ └android:text="プロフィール"
 ┃
 ┣View … 「一番上左のプロフィール領域」右にある縦空きスペース 
 ┃ ├android:id="@+id/ProfileHeaderSpacer"
 ┃ ├android:layout_width="10dp"
 ┃ ├android:layout_height="wrap_content"
 ┃ ├android:layout_toRightOf="@+id/ProfileImageContainer" … 指定したビュー(プロフィール画像)の右に配置
 ┃ └android:layout_alignBottom="@+id/ProfileImageContainer" … ビュー下辺が「指定ビュー(プロフィール画像)」の下辺に揃うように配置
 ┃ 
 ┣RelativeLayout … 一番上の右半分以上を占めるメイン領域 
 ┃│├android:layout_toRightOf="@+id/ProfileHeaderSpacer" … 指定したビューの右に配置
 ┃│├android:layout_alignParentTop="true" … trueの場合、このビューの上端は、親の上端に一致
 ┃│├android:layout_alignParentRight="true" … trueの場合、このビューの右端は、親の右端に一致
 ┃│├android:layout_alignBottom="@+id/ProfileImageContainer" … ビュー下辺が「指定ビュー(プロフィール画像)」の下辺に揃うように配置
 ┃│├android:layout_marginRight="10dp"
 ┃│├android:paddingTop="10dp"
 ┃│└android:paddingBottom="10dp"
 ┃│
 ┃├View「一番上の右半分以上を占めるメイン領域」の上部分と下部分を区別する水平線領域
 ┃│├android:id="@+id/ProfileViewDivider"
 ┃│├android:layout_width="match_parent"
 ┃│├android:layout_height="1dp"
 ┃│├android:layout_centerVertical="true" … 垂直方向の位置が親のビューの中央になるように配置
 ┃│└android:background="#393939"
 ┃│
 ┃├RelativeLayout … 「一番上の右半分以上を占めるメイン領域」の上部分領域 
 ┃││├android:layout_width="match_parent"
 ┃││├android:layout_height="wrap_content"
 ┃││├android:layout_above="@+id/ProfileViewDivider" … 指定したビューの上に配置
 ┃││├android:layout_alignParentTop="true" … trueの場合、このビューの上端は、親の上端と一致
 ┃││└android:layout_alignBottom="@+id/ProfileViewDivider"
 ┃││
 ┃│├TextView
 ┃││├android:id="@+id/ProfileNickName"
 ┃││├android:layout_width="match_parent"
 ┃││├android:layout_height="wrap_content"
 ┃││├android:layout_centerVertical="true" … 垂直方向の位置が親のビューの中央になるように配置
 ┃││├android:layout_alignRight="@+id/SettingIcon"
 ┃││└android:text="KeithYokoma"
 ┃││
 ┃│└ImageView
 ┃│ ├android:id="@+id/SettingIcon"
 ┃│ ├android:layout_width="25dp"
 ┃│ ├android:layout_height="25dp"
 ┃│ │android:layout_alignParentRight="true" … trueの場合、このビューの右端は、親の右端に一致
 ┃│ ├android:layout_centerVertical="true" … 垂直方向の位置が親のビューの中央になるように配置
 ┃│ └android:src="@android:drawable/ic_menu_preferences"
 ┃│
 ┃└LinearLayout … 「一番上の右半分以上を占めるメイン領域」の下部分領域 
 ┃ │├ android:layout_width="match_parent"
 ┃ │├android:layout_height="wrap_content"
 ┃ │├android:layout_below="@+id/ProfileViewDivider"
 ┃ │└android:layout_alignParentBottom="true" … trueの場合、このビューの下端は、親の下端と一致
 ┃ │
 ┃ ├ImageButton
 ┃ │├android:layout_width="0dp"
 ┃ │├android:layout_height="wrap_content"
 ┃ │├ android:layout_weight="1"
 ┃ │└android:src="@android:drawable/ic_menu_call" … システムリソースアイコン
 ┃ │
 ┃ ├ImageButton
 ┃ │├android:layout_width="0dp"
 ┃ │├android:layout_height="wrap_content"
 ┃ │├android:layout_weight="1"
 ┃ │└android:src="@android:drawable/ic_menu_send" … システムリソースアイコン
 ┃ │
 ┃ └ImageButton
 ┃   ├android:layout_width="0dp"
 ┃   ├android:layout_height="wrap_content"
 ┃   ├android:layout_weight="1"
 ┃   └android:src="@android:drawable/ic_menu_share" … システムリソースアイコン
 ┃ 
 ┣View … 「一番上領域」下にある水平線
 ┃├android:layout_width="match_parent"
 ┃├android:layout_height="1dp"
 ┃├android:layout_below="@+id/ProfileImageContainer" … ビュー下辺が「指定ビュー(プロフィール画像)」の下辺に揃うように配置
 ┃└android:background="#393939"
 ┃ 
 ┣FrameLayout
 ┃│├android:layout_width="match_parent"
 ┃│├android:layout_height="wrap_content"  
 ┃│├android:layout_above= "@+id/FooterAreaDivider" … 指定したビュー(Footer上との境界線)の上に配置
 ┃│├android:padding="10dp"
 ┃│├android:clickable="true"
 ┃│└android:background="@drawable/notify_button_state_list" … notify_button_state_list.xmlで「押された状態」と「通常状態」の四角形の色を変更
 ┃│
 ┃└TextView
 ┃   ├android:layout_width="wrap_content"
 ┃   ├android:layout_height="wrap_content"
 ┃   ├android:text="30 件のお知らせがあります!"
 ┃   ├android:textColor="#FFFFFF"
 ┃   └android:textSize="14sp"
 ┃
 ┣View … Footer上との境界線
 ┃├android:id= "@+id/FooterAreaDivider"
 ┃├android:layout_width="match_parent"
 ┃├android:layout_height="1dp"
 ┃├android:background="#393939"
 ┃└android:layout_above="@+id/FooterIconContainer" … 指定したビュー(Footer左領域)の上に配置
 ┃ 
 ┣RelativeLayout … Footer(左領域)
 ┃│├android:id="@+id/FooterIconContainer"
 ┃│├android:layout_width="70dp"
 ┃│├android:layout_height="wrap_content"
 ┃│├android:layout_alignParentBottom="true" … trueの場合、このビューの下端は、親の下端と一致
 ┃│├android:layout_alignParentLeft="true"
 ┃│├android:padding="5dp"
 ┃│├android:background="@drawable/button_state_list" … button_state_list.xmlで「押された状態」と「通常状態」の四角形の色を変更
 ┃│└android:clickable="true"
 ┃│
 ┃├TextView … Footer一番左のテキスト(メニュー)
 ┃│├android:id="@+id/FooterIcon"
 ┃│├android:layout_width="wrap_content"
 ┃│├android:layout_height="wrap_content"
 ┃│├android:layout_centerHorizontal="true"
 ┃│├android:layout_below="@+id/FooterIcon"
 ┃│├android:gravity="center"
 ┃│├android:drawableTop="@drawable/ic_launcher"
 ┃│├android:text="メニュー"
 ┃│└android:textSize="12sp"
 ┃│
 ┃└TextView
 ┃  ├android:id="@+id/FooterIconBadge"
 ┃  ├android:layout_width="wrap_content"
 ┃  ├android:layout_height="wrap_content"
 ┃  ├android:layout_alignTop="@+id/FooterIcon" … このビューの上端が、指定したビュー(メニュー)の上端と一致するように配置
 ┃  ├android:layout_alignRight="@+id/FooterIcon" … このビューの右端を、指定したビュー(メニュー)の右端と一致するように配置
 ┃  ├android:gravity="center"
 ┃  ├android:text="30"
 ┃  ├android:textSize="12sp"
 ┃  └android:background="@drawable/badge"
 ┃
 ┣View … Footer左の縦境界線
 ┃   ├android:id="@+id/FirstDivider"
 ┃   ├android:layout_width="1dp"
 ┃   ├android:layout_height="wrap_content"
 ┃   ├android:layout_alignTop= "@+id/FooterIconContainer" … このビューの上端が、指定したビュー(Footer左領域)の上端と一致するように配置
 ┃   ├android:layout_alignBottom="@+id/FooterIconContainer" … ビューの下辺が指定したビュー(Footer左領域)の下辺に揃うように配置
 ┃   ├android:layout_toRightOf="@+id/FooterIconContainer" … 指定したビュー(Footer左領域)の右に隣接配置。重ねない
 ┃   └android:background="#393939"
 ┃ 
 ┣RelativeLayout … Footer(右領域)
 ┃│├android:id= "@+id/FooterRecentContainer"
 ┃│├android:layout_width="70dp"
 ┃│├android:layout_height="wrap_content"
 ┃│├android:layout_alignTop="@+id/FooterIconContainer" … このビューの上端が、指定したビュー(Footer左領域)の上端と一致するように配置
 ┃│├android:layout_alignBottom="@+id/FooterIconContainer" … ビューの下辺が指定したビュー(Footer左領域)の下辺に揃うように配置
 ┃│├android:layout_alignParentBottom="true" … trueの場合、このビューの下端は、親の下端と一致
 ┃│├android:layout_alignParentRight="true"
 ┃│├android:padding="5dp"
 ┃│├android:background="@drawable/button_state_list" … button_state_list.xmlで「押された状態」と「通常状態」の四角形の色を変更
 ┃│└android:clickable="true"
 ┃│
 ┃└TextView
 ┃   ├android:id="@+id/FooterRecentLabel"
 ┃   ├android:layout_width="wrap_content"
 ┃   ├android:layout_height="wrap_content"
 ┃   ├android:layout_centerHorizontal="true" … 水平方向の位置が親ビューの中央になるように配置
 ┃   ├android:layout_below="@+id/FooterRecent" … このidが何なのか不明
 ┃   ├android:gravity="center" … 水平方向と垂直方向の中央に配置
 ┃   ├android:text="最近"
 ┃   ├android:textSize="12sp"
 ┃   └android:drawableTop="@drawable/ic_launcher"
 ┃
 ┣View … Footer右の縦境界線
 ┃   ├android:id= "@+id/SecondDivider"
 ┃   ├android:layout_width="1dp"
 ┃   ├android:layout_height="wrap_content"
 ┃   ├android:layout_alignTop=  "@+id/FooterRecentContainer" … このビューの上端が、指定したビュー(Footer右領域)の上端と一致するように配置
 ┃   ├android:layout_alignBottom=  "@+id/FooterRecentContainer" … ビューの下辺が指定したビュー(Footer右領域)の下辺に揃うように配置
 ┃   ├android:layout_toLeftOf=  "@+id/FooterRecentContainer" …指定したビュー(Footer右領域)の左に隣接して配置。重ねない
 ┃   └android:background="#393939"
 ┃ 
 ┗RelativeLayout … Footer(真ん中領域)
  │├android:id="@+id/FooterPostContainer"
  │├android:layout_width="wrap_content"
  │├android:layout_height="wrap_content"
  │├android:layout_alignTop="@+id/FooterIconContainer" … このビューの上端が、指定したビュー(Footer左領域)の上端と一致するように配置
  │├android:layout_alignBottom="@+id/FooterIconContainer" … ビューの下辺が指定したビュー(Footer左領域)の下辺に揃うように配置
  │├android:layout_alignLeft="@+id/FirstDivider" … 指定したView(Footer左の縦境界線)の左端と、このViewの左端を重ねる
  │├android:layout_alignRight= "@+id/SecondDivider" … このビューの右端を、指定したビュー(Footer右の縦境界線)の右端と一致するように配置
  │├android:layout_marginLeft="1dp"
  │├android:layout_marginRight="1dp"
  │├android:background="@drawable/button_state_list" … button_state_list.xmlで「押された状態」と「通常状態」の四角形の色を変更
  │└android:clickable="true"
  │
  └TextView
     ├android:layout_centerInParent="true" … trueの場合、水平方向および垂直方向の位置が親のビューの中央になるように配置
     ├android:drawableLeft="@drawable/ic_launcher"
     ├android:gravity="center" … 水平方向と垂直方向の中央に配置
     └android:text="つぶやきを投稿"


コード


▼/MainActivity.java


▼/res/layout/activity_main.xml


▼/res/drawable/button_state_list.xml


▼res/drawable/frame.xml


▼res/drawable/notify_button_state_list.xml