カテゴリー:
レイアウト
閲覧数: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
package jp.mixi.assignment.layout.adv; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } } |
▼/res/layout/activity_main.xml
<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "match_parent" tools:context= ".MainActivity" > <!-- TODO: 左側から順に、下記の View を配置していき、そのまとまりを画面上部に揃える --> <!-- 1. プロフィール画像(ic_launcher)と、それを囲う四角形の枠、その下に プロフィール と書かれた文字 --> <!-- 2. 1. の右側の上半分に、ニックネームの表示と、そのさらに右端に設定アイコン --> <!-- 3. 1. の右側の下半分に、電話ボタン、メール送信ボタン、共有ボタンの 3 つを均等割付 --> <!-- 4. 2. と 3. の間に分割線 --> <!-- 条件: 3. 以外では LinearLayout を使ってはならない --> <!-- Hint: 1. 画像の表示には、android:src= "@drawable/ic_launcher" 属性を使います --> <!-- Hint: 2. 画像を表示しながら、ボタンとして機能させる特別なボタンの View があります --> <!-- Hint: 3. 区切り線を引く専用の UI はありません。背景色を android:background= "#393939" にして、区切り線ぽく扱う工夫が必要です --> <!-- Hint: 4. 均等割付するボタンの画像は、左から android:src= "@android:drawable/ic_menu_call" , android:src= "@android:drawable/ic_menu_send" , android:src= "@android:drawable/ic_menu_share" です --> <!-- TODO: 上記のまとまりの下に、幅 1 dp の区切り線を引く --> <RelativeLayout android:id= "@+id/ProfileImageContainer" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_alignParentLeft= "true" android:layout_alignParentTop= "true" android:layout_marginLeft= "10dp" android:paddingBottom= "10dp" > <FrameLayout android:id= "@+id/ProfileImageFrame" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_centerInParent= "true" android:background= "@drawable/frame" > <ImageView android:id= "@+id/ProfileImageView" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "center" android:src= "@drawable/ic_launcher" /> </FrameLayout> <TextView android:id= "@+id/ProfileImageLabel" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_below= "@+id/ProfileImageFrame" android:layout_centerHorizontal= "true" android:layout_marginTop= "25dp" android:text= "プロフィール" android:textSize= "12sp" /> </RelativeLayout> <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_width= "match_parent" android:layout_height= "wrap_content" android:layout_toRightOf= "@+id/ProfileHeaderSpacer" android:layout_alignParentTop= "true" android:layout_alignParentRight= "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" 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" android:textSize= "16sp" /> <ImageView android:id= "@+id/SettingIcon" android:layout_width= "25dp" android:layout_height= "25dp" android:layout_alignParentRight= "true" android:layout_centerVertical= "true" android:src= "@android:drawable/ic_menu_preferences" /> </RelativeLayout> <LinearLayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:layout_below= "@+id/ProfileViewDivider" android:layout_alignParentBottom= "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" /> </LinearLayout> </RelativeLayout> <View android:layout_width= "match_parent" android:layout_height= "1dp" android:layout_below= "@+id/ProfileImageContainer" android:background= "#393939" /> <!-- TODO: 左側から順に、下記の View を配置していき、そのまとまりを画面下部に揃える --> <!-- 1. ic_launcher のアイコンと、その下に メニュー の文字を表示し、アイコンの右肩に 30 と書かれたバッチを表示するボタン --> <!-- 2. 幅 1dp の 縦の区切り線 --> <!-- 3. ic_launcher のアイコンと、その右に つぶやきを投稿 の文字を表示しているボタン --> <!-- 4. 幅 1dp の 縦の区切り線 --> <!-- 5. ic_launcher のアイコンと、その下に 最近 の文字を表示しているボタン --> <!-- 条件: LinearLayout は一切使用しない --> <!-- Hint: 1. ボタンですが Button は使いません --> <!-- Hint: 2. ボタン用の背景は android:background= "@drawable/button_state_list" にします --> <!-- Hint: 3. バッチ用の背景は android:background= "@drawable/badge" にします --> <!-- Hint: 4. TextView には、文字の隣に drawable を表示する属性があります --> <!-- TODO: 上記の View の上に、お知らせを表示する View を配置する --> <!-- Hint: 1. お知らせを表示する View の背景は android:background= "@drawable/notify_button_state_list" にします --> <FrameLayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:layout_above= "@+id/FooterAreaDivider" android:padding= "10dp" android:clickable= "true" android:background= "@drawable/notify_button_state_list" > <TextView android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "30 件のお知らせがあります!" android:textColor= "#FFFFFF" android:textSize= "14sp" /> </FrameLayout> <View android:id= "@+id/FooterAreaDivider" android:layout_width= "match_parent" android:layout_height= "1dp" android:background= "#393939" android:layout_above= "@+id/FooterIconContainer" /> <RelativeLayout android:id= "@+id/FooterIconContainer" android:layout_width= "70dp" android:layout_height= "wrap_content" android:layout_alignParentBottom= "true" android:layout_alignParentLeft= "true" android:padding= "5dp" android:background= "@drawable/button_state_list" android:clickable= "true" > <TextView 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" /> </RelativeLayout> <View android:id= "@+id/FirstDivider" android:layout_width= "1dp" android:layout_height= "wrap_content" android:layout_alignTop= "@+id/FooterIconContainer" android:layout_alignBottom= "@+id/FooterIconContainer" android:layout_toRightOf= "@+id/FooterIconContainer" android:background= "#393939" /> <RelativeLayout android:id= "@+id/FooterRecentContainer" android:layout_width= "70dp" android:layout_height= "wrap_content" android:layout_alignTop= "@+id/FooterIconContainer" android:layout_alignBottom= "@+id/FooterIconContainer" android:layout_alignParentBottom= "true" android:layout_alignParentRight= "true" android:padding= "5dp" android:background= "@drawable/button_state_list" 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" android:gravity= "center" android:text= "最近" android:textSize= "12sp" android:drawableTop= "@drawable/ic_launcher" /> </RelativeLayout> <View android:id= "@+id/SecondDivider" android:layout_width= "1dp" android:layout_height= "wrap_content" android:layout_alignTop= "@+id/FooterRecentContainer" android:layout_alignBottom= "@+id/FooterRecentContainer" android:layout_toLeftOf= "@+id/FooterRecentContainer" android:background= "#393939" /> <RelativeLayout android:id= "@+id/FooterPostContainer" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_alignTop= "@+id/FooterIconContainer" android:layout_alignBottom= "@+id/FooterIconContainer" android:layout_alignLeft= "@+id/FirstDivider" android:layout_alignRight= "@+id/SecondDivider" android:layout_marginLeft= "1dp" android:layout_marginRight= "1dp" android:background= "@drawable/button_state_list" android:clickable= "true" > <TextView android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_centerInParent= "true" android:drawableLeft= "@drawable/ic_launcher" android:gravity= "center" android:text= "つぶやきを投稿" android:textSize= "12sp" /> </RelativeLayout> </RelativeLayout> |
▼/res/drawable/button_state_list.xml
<?xml version= "1.0" encoding= "utf-8" ?> <!-- View が押された状態の Drawable --> <item android:state_pressed= "true" > <shape android:shape= "rectangle" > <solid android:color= "#696969" /> </shape> </item> <!-- View が通常の状態の Drawable --> <item> <shape android:shape= "rectangle" > <solid android:color= "#f5f5f5" /> </shape> </item> </selector> |
▼res/drawable/frame.xml
<?xml version= "1.0" encoding= "utf-8" ?> <shape android:shape= "rectangle" > <solid android:color= "#f5f5f5" /> <stroke android:width= "1dp" android:color= "#000000" /> </shape> |
▼res/drawable/notify_button_state_list.xml
<?xml version= "1.0" encoding= "utf-8" ?> <!-- View が押された状態の Drawable --> <item android:state_pressed= "true" > <shape android:shape= "rectangle" > <solid android:color= "#bc8f8f" /> </shape> </item> <!-- View が通常の状態の Drawable --> <item> <shape android:shape= "rectangle" > <solid android:color= "#ffa07a" /> </shape> </item> </selector> |