Android UIデザイン入門

11,299 views
12,513 views

Published on

OESF公認
Android UIデザイン入門
公式トレーニングテキスト

Contributed by:
【作成】株式会社リーディング・エッジ社
    
【ご注意】
本テキストは、Creative Commons License BY-NC-SA 4.0のもとで提供されます。OESF会員またはコンソーシアムメンバーでない場合、本編の改変の有無にかかわらず、いかなる形態でも商用目的での利用は禁止されています。

Published in: Technology
0 Comments
35 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,299
On SlideShare
0
From Embeds
0
Number of Embeds
6,070
Actions
Shares
0
Downloads
0
Comments
0
Likes
35
Embeds 0
No embeds

No notes for slide

Android UIデザイン入門

  1. 1. UIデザイントレーニング
  2. 2. Ⅶ - 2 トレーニングの目的 ! トレーニングの目的 ! プログラマとデザイナが共有するべきAndroidのためのデザインノウハウを 習得します ! UI単体のカスタマイズ •  Viewのどんな要素を変更すればよいか •  Androidはどんな仕組みでリッチなUI実現させるのか、そのために必要な 技術、知識はなにか ! 統一されたデザインの作成方法 •  アプリケーションで扱うUIの一括管理 •  ボタンのデザイン、フォント、カラーの統一 ! デザイン手法、デザイン工学などのようなデザインガイダンスではありません This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  3. 3. Ⅶ - 3 トレーニングの目的 ! トレーニングの目的 ! プログラマとデザイナが共有するべきAndroidのためのデザインノウハウを 習得します ! UI単体のカスタマイズ •  Button、ImageView、Dialogに独自の装飾を加える方法 •  Androidはどんな仕組みでリッチなUI実現させるのか、そのために必要な 技術、知識はなにか ! Dialogのカスタマイズ ! 統一されたデザインの作成方法 •  アプリケーションで扱うUIの一括管理 •  ボタンのデザイン、フォント、カラーの統一 ! デザイン手法、デザイン工学などのようなデザインガイダンスではありません ! ソースコードの修正は殆ど無いため、デザイナ職の方でも気軽に受講すること ができます This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  4. 4. Ⅶ - 4 トレーニングスケジュール ! 目次 ! Viewプロパティ ! Buttonのカスタマイズ ! Style, Theme ! Dialogのカスタマイズ ! Animation ! 実習 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  5. 5. Ⅶ - 5 開発環境 ! 開発環境の説明 ! 本トレーニングでは下記の開発ツールを用いる ! トレーニング用マシンは既に開発環境は構築済みです ソフトウェア バージョン Eclipse Eclipse IDE with built-in ADT Java SDK JDK 1.6 Android Platform SDK Android 2.3.3(API 10) Android Plug-in Android Development Tools (ADT) Ver.21.X.X This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  6. 6. Ⅶ - 6 開発環境 ! 開発環境の説明 ! ディレクトリ構成 ! トレーニングに必要なファイルは全てandroid_traing_uiに用意してあります。 ! 以下はandroid_traing_uiのディレクトリ構成になります パス(c:¥android_trainig_ui以下) 内容 adt-bundle-windows-x86-[日付]¥sdk AndroidSDK adt-bundle-windows-x86-[日付]¥eclipse eclipse workspace eclipseのworkspace answer_docs/html 実習の解答ドキュメント This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  7. 7. Viewプロパティ
  8. 8. Ⅶ - 8 概要 ! アプリケーション開発手順 ! 画面デザインの作成 ! View ! Viewプロパティについて ! 代表的なプロパティ ! ImageView ! ImageViewのプロパティ ! ViewGroup ! ViewGroupの代表的なプロパティ ! 実習 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  9. 9. Ⅶ - 9 アプリケーション開発の手順 ! 開発手順 ! Eclipseでプロジェクト作成 ! 画面デザインの作成 •  Button、CheckBoxなどのパーツの配置 ! ソースコードを書く •  例)ボタンクリック時の処理など ! ビルド ! Androidアプリが出来上がる(apk) ! エミュレータ、実機に転送 ! アプリケーションの起動 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  10. 10. Ⅶ - 10 プロジェクト構成 ! 画面デザインの作成 ! Androidはソースコードとリソースファイルを管理するディレクトリが別れており 、それぞれ独立して作業を行うことができる ! 画面デザインの作成は専用のエディタを使いドラッグ&ドロップなどで直感 的な画面作成ができる This material is licensed under the Creative Commons License BY-NC-SA 4.0. UIパーツ一覧 画面プレビュー
  11. 11. Ⅶ - 11 View ! Viewとは ! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです ! 複数のViewをまとめる機能を持つViewをViewGroupといいます This material is licensed under the Creative Commons License BY-NC-SA 4.0. View ImageButton ImageView TextView Button ViewGroup FrameLayout
  12. 12. Ⅶ - 12 Viewの描画領域(1) ! Viewの描画領域 ! コンテンツエリア ! Viewは自分が画面上で占める領域を持っていて, 複数のViewを持つViewGroup はそれらの領域をすべて含んだ領域を持っています ! 一つのViewGroupの子である複数のViewは同じ領域を重複して含んでいてかま いません This material is licensed under the Creative Commons License BY-NC-SA 4.0. ViewGroup ImageView 子Viewは重なっていても良い TextView Button Button Buttonの場合は テキストの表示部 分がコンテツエリ アになる ViewGroup ViewGroupのコンテツ エリアは子Viewの領域 TextView Button
  13. 13. Ⅶ - 13 Viewの描画領域(2) ! Viewの描画領域 ! バックグラウンドエリア ! 背景として利用する描画領域の設定をします。 ! 描画領域を利用するリソース(画像、XML等)を指定するか、色を指定します This material is licensed under the Creative Commons License BY-NC-SA 4.0. Button Buttonの場合は テキスト以外が バックグラウンド エリアになる ViewGroup ViewGroupでは子View の領域意外がバックグ ラウンドエリアになる TextView Button
  14. 14. Ⅶ - 14 Viewプロパティ ! Viewのプロパティ ! Viewをどのように表示するかを決定する ! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画 像や色、余白をどのくらい使うかなどの情報をプロパティとして設定する ! どんなプロパティが使えるかはViewによって様々だが、共通するプロパティも存 在する ! プロパティはレイアウトリソースのxmlの属性で指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  15. 15. Ⅶ - 15 Viewプロパティ ! 代表的なビューのプロパティ This material is licensed under the Creative Commons License BY-NC-SA 4.0. プロパティ 設定値 説明 layout_width ・wrap_content
 ・match_parent ビューの幅を指定します layout_height ・wrap_content
 ・match_parent ビューの高さを指定します android:gravity ・top ・bottom ・left ・right
 ・center_vertical ・center_horizontal
 ・center ・start ・end レイアウト内に配置した全てのViewに、指定した方向に 配列させる android:layout_gravity ・top ・bottom ・left ・right
 ・center_vertical ・center_horizontal
 ・center ・start ・end レイアウトに配置した個々のViewに、指定した方向に配 列させる ※ layout_gravityで指定したのが優先される layout_weight ※親ViewがLinerLayoutの時のみ 数値 余白を埋めるために、ウィジェットのサイズをそれぞれ引 き延ばす割合 android:weightSum 数値 ViewGroupにweightSum属性を指定すると、余白部分を 含めたLayoutの合計値を指定できる android:layout_margin px , dp, sp, in, mm 数値+単位 (例)20dp ウィジェットの外側の余白の設定をおこなう。単位は主に dpで指定する android:padding px , dp, sp, in, mm
 数値+単位 (例)20dp ウィジェットの内側の余白の設定をおこなう。単位は主に dpで指定する ※ウィジェット間の余白スペースを広げる android:enabled true, false ビューの有効、無効を設定する visiblity ・visible ・gone ・invisible ビューの表示、非表示を設定します
  16. 16. Ⅶ - 16 layout_width、 layout_height ! layout_widthとlayout_height ! Viewの幅、高さを設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. layout_width:wrap_content layout_height:wrap_content layout_width:wrap_content layout_height:match_parent layout_width:match_parent layout_height:wrap_content
  17. 17. Ⅶ - 17 gravity、 layout_gravity ! gravityとlayout_gravity ! Viewの配置する方向を設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="right" android:orientation="vertical" > <!-- 位置指定:無し --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="無し" /> <!-- 位置指定:左 --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:text="左" /> <!-- 位置指定:中央 --> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="中央" /> </LinearLayout>
  18. 18. Ⅶ - 18 layout_weight ! layout_weight ! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合 ! 設定例(weightなし) This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button2" android:layout_width="wrap_content " android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout>
  19. 19. Ⅶ - 19 layout_weight ! layout_weight ! 設定例(weightあり) This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button" android:layout_weight="1" /> <Button android:id="@+id/button1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button" android:layout_weight="1" /> </LinearLayout> ボタンの幅が画面 の横幅いっぱいの 等分に広がってい る
  20. 20. Ⅶ - 20 weightSum ! weightSum ! 余白部分を含めたLayoutの合計値を指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="5" > <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:text="Button1" /> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:text="Button2" /> </LinearLayout> 1 2 2(5-1-2) 全体割合 =5
  21. 21. Ⅶ - 21 layout_margin、 padding ! layout_marginとpadding ! layout_magin:外側の余白の設定する ! padding : 内側の余白の設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- デフォルト --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <!-- margin --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="50dp" android:text="Button" /> <!-- padding --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="50dp" android:text="Button" /> ボタンの周囲の 余白が50dps テキストの周囲 の余白が50dps
  22. 22. Ⅶ - 22 enabled ! enabled ! ビューの有効、無効を設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout > <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:enabled="true" android:text="true" /> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="wrap_content" android:enabled="false" android:text="false" /> </LinearLayout>  
  23. 23. Ⅶ - 23 visibility ! visibility ! ビューの表示、非表示を設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <TextView android:text="visible" /> <Button android:text="Button" android:visibility="visible" /> <TextView android:text="invisible" /> <Button android:text="Button" android:visibility="invisible" /> <TextView android:text="gone" /> <Button android:text="Button" android:visibility="gone" /> <TextView android:text="↑goneは幅高さが無効化され、存在し ないものとして扱われる" /> 幅と高さを維持する 幅と高さを維持しないため、 前後のViewが詰め込まれる
  24. 24. Ⅶ - 24 ImageView ! ImageViewとは ! 画像を表示する際に使用するViewクラス ! 配置したImageViewにdrawableから画像を読み込んで表示を行う ! srcプロパティで表示する画像を指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. ImageViewに画 像が設定される 読み込ませたい画 像を設定すると
  25. 25. Ⅶ - 25 ImageViewプロパティ ! 代表的なImageViewプロパティ This material is licensed under the Creative Commons License BY-NC-SA 4.0. プロパティ 設定値 説明 android:minHeight px , dp, sp, in, mm
 数値+単位
 例)20dp Viewの高さの最小値を指定 ※ImageViewではなくViewのプロパティ android:minWidth px , dp, sp, in, mm
 数値+単位
 例)20dp Viewの幅の最小値を指定 ※ImageViewではなくViewのプロパティ android:maxHeight px , dp, sp, in, mm
 数値+単位
 例)20dp ImageViewの高さの最大値を指定 android:maxWidth px , dp, sp, in, mm
 数値+単位
 例)20dp ImageViewの幅の最大値を指定 android:scaleType Matrix,fit_xy,
 fix_start,fix_center,fix_end,
 center,center_crop,center_inside 画像がImageViewのサイズに応じてどのよう にリサイズされるかを指定 android:src リソース指定 ImageViewに表示する内容を指定 android:adjustViewBounds true, false 画像の縦横比を維持するかどうかを指定。 falseだと、端末のサイズに縦横比が合わさ れる。 デフォルトはfalse。
  26. 26. Ⅶ - 26 minHeight、minWidth ! minHeightとminWidth ! Viewの高さ、幅の最小値を指定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!--minWidth・minHeight使用--> <ImageView android:id="@+id/ImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100dp" android:minHeight="100dp" android:src="@drawable/android" /> <!--デフォルト--> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </LinearLayout> 実際の画像サイズはもっと小 さいが、minWidth/minHeight がそれより大きいため、その サイズで表示される ※ImageViewではなくViewのプロパティ
  27. 27. Ⅶ - 27 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!--maxWidth・maxHeight使用--> <ImageView android:id="@+id/ImageView“ android:adjustViewBounds= "true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100dp" android:minHeight="100dp" android:src="@drawable/android" /> <!--デフォルト--> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/android" /> </LinearLayout> maxHeight、maxWidth ! maxHeightとmaxWidth ! ImageViewの高さの最大値を指定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 実際の画像サイ ズもっと大きいが、 maxWidth/ maxHeightがそれ より小さいため、 そのサイズで表 示される
  28. 28. Ⅶ - 28 scaleType ! scaleType ! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <LinearLayout          xmlns:android="http://schemas.android.com/apk/res/android"          android:orientation="vertical"          android:layout_width="match_parent"          android:layout_height="match_parent">                    <TextView                  android:text="TextView"                  android:id="@+id/textView1"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"></TextView>            <ImageView                  android:adjustViewBounds="true"                  android:scaleType="matrix"                  android:background="#aaaaaa"                  android:id="@+id/imageView1"                  android:layout_width="wrap_content"                  android:src="@drawable/big_droid"                  android:layout_height="wrap_content"></ImageView>            <TextView                  android:text=""                  android:background="#0000ff"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"></TextView>   </LinearLayout> このプロパティの値を変更する ImageViewの背景色を#aaaaaaに設定している (縮小などがわかりやすくするため)
  29. 29. Ⅶ - 29 scaleType ! scaleType ! 設定例(adjustViewBounds=false) This material is licensed under the Creative Commons License BY-NC-SA 4.0. scaleType=“matrix” scaleType=“fitCenter” scaleType=“cetner” scaleType=“fitXY” ImageViewの領域は、画像の幅/高さと画面サイ ズのうちそれぞれ小さい方が使用される 画像のサイズはそのまま で表示されるが、画面幅 より画像が大きいので右 側が見切れている 高さ・幅が画面内に収まるよ うそれぞれ別の比率で縮小 される(今回高さは縮小され ていない) 画像サイズはそのままで、 画像の中心がImageView の中心に合うよう配置さ れる。 画像の幅が画面幅に合うよう、 高さも同率で縮小され、 ImageView領域の中心に配置 されるため、ImageViewの背景 色が見えている
  30. 30. Ⅶ - 30 scaleType ! scaleType ! 設定例(adjustViewBounds=true) This material is licensed under the Creative Commons License BY-NC-SA 4.0. scaleType=“matrix” scaleType=“fitCenter” scaleType=“cetner” scaleType=“fitXY” ImageViewの領域は、false時と同じように求めた 後、画像のアスペクト比(縦横比)に調整される =ImageViewの領域は画像より大きくならない 画像のサイズはそのまま だが、画面幅に応じたア スペクト比で高さが制限さ れる 高さ・幅がどちらも画面内に 収まるよう、元のアスペクト 比を維持したまま縮小され る 画像サイズはそのままで、 画像の中心がImageView の中心に合うよう配置さ れる 画像の幅が画面幅に合うよう 縮小され、高さはその幅に対し てアスペクト比を維持したまま 縮小される
  31. 31. Ⅶ - 31 ViewGroup ! ViewGroupとは ! 複数のビューをまとめる機能を持つビューである ! ビューグループを使用する事により、複雑なレイアウトを作成することが可 能になる ! ViewGroupの例:LinearLayout ! Viewを縦方向または横方向に配置します This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  32. 32. Ⅶ - 32 ViewGroupの種類 ! 代表的なビューグループ This material is licensed under the Creative Commons License BY-NC-SA 4.0. 名前 説明 RelativeLayout View(親)の位置を決め、その位置を元に View(子)の位置を相対的(Relative)に指定する LinearLayout Viewを垂直または水平に配置 FrameLayout FrameLayoutは一つのViewを配置することを目的 としたViewGroup 複数配置した場合は重って表示される ListView 縦方向に行を並べたリストを表示 GridLayout グリッド表示に特化したレイアウト。セルの列方向、 または行方向への結合ができる(GridViewでは出 来ない)。 ※Android4.0以降で利用可能
  33. 33. Ⅶ - 33 RelativeLayout ! RelativeLayout ! View(親)の位置を決め、その位置を元にView(子)の位置を相対的に指定 する構成 This material is licensed under the Creative Commons License BY-NC-SA 4.0. テキスト プロパティ 説明 中 android:layout_centerInParent="true" 指定したViewを画面の中心に 配置する 上 android:layout_above="@+id/center" 基準となるViewの上に表示します android:layout_alignLeft="@+id/center" 指定したViewの左側の境界に合わせ て整列します 下 android:layout_below="@+id/center" 基準となるViewの下に表示します android:layout_alignRight="@+id/center" 指定したViewの右側の境界に合わせ て整列します 左 android:layout_toLeftOf="@+id/center" 基準となるViewの左側に表示します android:layout_alignBottom="@+id/center" 指定したViewの下側の境界に合わせ て整列します 右 android:layout_toRightOf="@+id/center" 基準となるViewの右側に表示します android:layout_alignTop="@+id/center" 指定したViewの上側の境界に合わせ て整列します
  34. 34. Ⅶ - 34 RelativeLayout ! RelativeLayout This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"  >   <Button                  android:id="@+id/center"                  android:layout_width="100dp"                  android:layout_height="100dp"                  android:layout_centerHorizontal="true"                  android:layout_centerVertical="true"                  android:padding="20dp"                  android:text="中"  />   <Button                  android:id="@+id/right"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_alignTop="@+id/center"                  android:layout_toRightOf="@+id/center"                  android:text="右"/>  
  35. 35. Ⅶ - 35 RelativeLayout ! RelativeLayout This material is licensed under the Creative Commons License BY-NC-SA 4.0.        <Button                  android:id="@+id/below"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_alignRight="@+id/center"                  android:layout_below="@+id/center"                  android:text="下"  />   <Button                  android:id="@+id/above"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_above="@+id/center"                  android:layout_alignLeft="@+id/center"                  android:text="上"  />   <Button                  android:id="@+id/left"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_alignBottom="@+id/center"                  android:layout_toLeftOf="@+id/center"                  android:text="左"  />   </RelativeLayout>
  36. 36. Ⅶ - 36 LinearLayout ! LinearLayout ! Viewを垂直または水平に配置する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/padding_medium" android:text="@string/hello_world" tools:context=".MainActivity" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_android" /> </LinearLayout> horizontalまたは verticalを指定する
  37. 37. Ⅶ - 37 ViewGroupの種類 ! 配置方向の設定 ! orientationでLinearLayoutの内部のViewを配置する方向を決定する ! vertical:垂直方向に配置 ! horizontal:水平方向に配置 This material is licensed under the Creative Commons License BY-NC-SA 4.0. verticalの場合  「垂直方向」 horizontalの場合   「水平方向」
  38. 38. Ⅶ - 38 FrameLayout ! FrameLayout ! FrameLayoutは一つのViewを配置することを目的としたViewGroup ! 複数配置した場合は重って表示される This material is licensed under the Creative Commons License BY-NC-SA 4.0. <FrameLayout xmlns:android="http://schemas.android.com/apk/ res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/padding_medium" android:text="@string/hello_world" android:textColor="#FF0000" tools:context=".MainActivity" /> </FrameLayout> ImageViewとTextViewが 重なっている
  39. 39. Ⅶ - 39 ListView ! ListView ! 縦方向に行を並べたリストを表示する This material is licensed under the Creative Commons License BY-NC-SA 4.0. ※行要素は、別途行用のレイアウトリソースを用意し、プログラムで設定することもできる <?xml  version="1.0"  encoding="utf-­‐8"?>   <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"  >   <ListView                  android:id="@+id/listView1"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  android:entries="@array/list_datas"  > </ListView>   </FrameLayout>
  40. 40. Ⅶ - 40 ListView ! ListView This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"  >   <ListView                  android:id="@+id/listView1"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  android:entries="@array/list_datas"  > </ListView>   </FrameLayout> strings.xml
  41. 41. Ⅶ - 41 GridLayout ! GridLayout ! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合 ができる This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <GridLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"          android:columnCount="3"          android:rowCount="4"          android:useDefaultMargins="true"  >   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center“                  android:layout_column="0"                  android:layout_row="0"                  android:background="#eee"                  android:text="Item  1"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp"          android:layout_gravity="center“                  android:layout_column="1"          android:layout_row="0"                  android:background="#ddd"                  android:text="Item  2"                  android:textAppearance="?android:attr/textAppearanceLarge"  /> セルを列方向 に結合 セルを行方向 に結合
  42. 42. Ⅶ - 42 GridLayout ! GridLayout(つづき 1) This material is licensed under the Creative Commons License BY-NC-SA 4.0.        <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center"                  android:layout_column="2"                  android:layout_row="0"                  android:background="#eee"                  android:text="Item  3"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center"                  android:layout_column="0"                  android:layout_row="1"                  android:layout_rowSpan="2"                  android:background="#ddd"                  android:text="Item  4"                  android:textAppearance="?android:attr/textAppearanceLarge"  />            <TextView                  android:layout_width="92dp"                  android:layout_height="92dp"          android:layout_gravity="center“                  android:layout_column="1“          android:layout_row="1“                  android:layout_columnSpan="2“  
  43. 43. Ⅶ - 43 GridLayout ! GridLayout(つづき 2) This material is licensed under the Creative Commons License BY-NC-SA 4.0.                android:background="#eee"                  android:text="Item  5"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp"          android:layout_gravity="center“                  android:layout_column="1"          android:layout_row="2"                  android:background="#ccc"                  android:text="Item  6"                  android:textAppearance="?android:attr/textAppearanceLarge"  />          <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center"                  android:layout_column="2"                  android:layout_row="2"                  android:background="#ddd"                  android:text="Item  7"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   </GridLayout>
  44. 44. Ⅶ - 44 レイアウトの作成 ! 実習 1 ! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ アウトを作成する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 周囲の余白『10dp』 を設定
  45. 45. Ⅶ - 45 レイアウトの作成 ! プロジェクト概要 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 項目 設定値 Project name UISample Build Target ※ トレーニングで指定したバージョン Application name UISample Package name jp.oesf.uisample Create Activity MainActivity
  46. 46. Ⅶ - 46 レイアウトの作成 ! 手順 ! res/drawble-hdpi/に「android.png」の画像を追加する ! 画像は解答ドキュメントより取得する ! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパティを設定し レイアウトを完成させる ! 実習で使用するViewGroupとプロパティは各自で考えること ! 検索ボタンのリソースは、@android:drawable/ic_menu_searchを使用する。 This material is licensed under the Creative Commons License BY-NC-SA 4.0. View EditText ImageButton ImageView Button Button
  47. 47. Ⅶ - 47 レイアウトの作成 ! 確認 ! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する This material is licensed under the Creative Commons License BY-NC-SA 4.0. nexus one nexus7
  48. 48. Ⅶ - 48 レイアウトの作成 -解答- ! 解答例 This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" android:orientation="horizontal" > <EditText android:id="@+id/editText1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </EditText> <ImageButton android:id="@+id/imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/ic_menu_search" /> </LinearLayout>
  49. 49. Ⅶ - 49 レイアウトの作成 -解答- ! 解答例(続き) This material is licensed under the Creative Commons License BY-NC-SA 4.0. <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:scaleType="fitCenter" android:src="@drawable/android" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" android:orientation="horizontal" > <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> </LinearLayout> </LinearLayout>
  50. 50. Ⅶ - 50 レイアウトの作成 [補足実習] ! 実習[補足] ! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する ! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存 在する。他にどんな実装方法があるかを考え組み立てる This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  51. 51. Viewプロパティ
  52. 52. Ⅶ - 52 概要 ! アプリケーション開発手順 ! 画面デザインの作成 ! View ! Viewプロパティについて ! 代表的なプロパティ ! ImageView ! ImageViewのプロパティ ! ViewGroup ! ViewGroupの代表的なプロパティ ! 実習 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  53. 53. Ⅶ - 53 アプリケーション開発の手順 ! 開発手順 ! Eclipseでプロジェクト作成 ! 画面デザインの作成 •  Button、CheckBoxなどのパーツの配置 ! ソースコードを書く •  例)ボタンクリック時の処理など ! ビルド ! Androidアプリが出来上がる(apk) ! エミュレータ、実機に転送 ! アプリケーションの起動 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  54. 54. Ⅶ - 54 プロジェクト構成 ! 画面デザインの作成 ! Androidはソースコードとリソースファイルを管理するディレクトリが別れており 、それぞれ独立して作業を行うことができる ! 画面デザインの作成は専用のエディタを使いドラッグ&ドロップなどで直感 的な画面作成ができる This material is licensed under the Creative Commons License BY-NC-SA 4.0. UIパーツ一覧 画面プレビュー
  55. 55. Ⅶ - 55 View ! Viewとは ! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです ! 複数のViewをまとめる機能を持つViewをViewGroupといいます This material is licensed under the Creative Commons License BY-NC-SA 4.0. View ImageButton ImageView TextView Button ViewGroup FrameLayout
  56. 56. Ⅶ - 56 Viewの描画領域(1) ! Viewの描画領域 ! コンテンツエリア ! Viewは自分が画面上で占める領域を持っていて, 複数のViewを持つViewGroup はそれらの領域をすべて含んだ領域を持っています ! 一つのViewGroupの子である複数のViewは同じ領域を重複して含んでいてかま いません This material is licensed under the Creative Commons License BY-NC-SA 4.0. ViewGroup ImageView 子Viewは重なっていても良い TextView Button Button Buttonの場合は テキストの表示部 分がコンテツエリ アになる ViewGroup ViewGroupのコンテツ エリアは子Viewの領域 TextView Button
  57. 57. Ⅶ - 57 Viewの描画領域(2) ! Viewの描画領域 ! バックグラウンドエリア ! 背景として利用する描画領域の設定をします。 ! 描画領域を利用するリソース(画像、XML等)を指定するか、色を指定します This material is licensed under the Creative Commons License BY-NC-SA 4.0. Button Buttonの場合は テキスト以外が バックグラウンド エリアになる ViewGroup ViewGroupでは子View の領域意外がバックグ ラウンドエリアになる TextView Button
  58. 58. Ⅶ - 58 Viewプロパティ ! Viewのプロパティ ! Viewをどのように表示するかを決定する ! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画 像や色、余白をどのくらい使うかなどの情報をプロパティとして設定する ! どんなプロパティが使えるかはViewによって様々だが、共通するプロパティも存 在する ! プロパティはレイアウトリソースのxmlの属性で指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  59. 59. Ⅶ - 59 Viewプロパティ ! 代表的なビューのプロパティ This material is licensed under the Creative Commons License BY-NC-SA 4.0. プロパティ 設定値 説明 layout_width ・wrap_content
 ・match_parent ビューの幅を指定します layout_height ・wrap_content
 ・match_parent ビューの高さを指定します android:gravity ・top ・bottom ・left ・right
 ・center_vertical ・center_horizontal
 ・center ・start ・end レイアウト内に配置した全てのViewに、指定した方向に 配列させる android:layout_gravity ・top ・bottom ・left ・right
 ・center_vertical ・center_horizontal
 ・center ・start ・end レイアウトに配置した個々のViewに、指定した方向に配 列させる ※ layout_gravityで指定したのが優先される layout_weight ※親ViewがLinerLayoutの時のみ 数値 余白を埋めるために、ウィジェットのサイズをそれぞれ引 き延ばす割合 android:weightSum 数値 ViewGroupにweightSum属性を指定すると、余白部分を 含めたLayoutの合計値を指定できる android:layout_margin px , dp, sp, in, mm 数値+単位 (例)20dp ウィジェットの外側の余白の設定をおこなう。単位は主に dpで指定する android:padding px , dp, sp, in, mm
 数値+単位 (例)20dp ウィジェットの内側の余白の設定をおこなう。単位は主に dpで指定する ※ウィジェット間の余白スペースを広げる android:enabled true, false ビューの有効、無効を設定する visiblity ・visible ・gone ・invisible ビューの表示、非表示を設定します
  60. 60. Ⅶ - 60 layout_width、 layout_height ! layout_widthとlayout_height ! Viewの幅、高さを設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. layout_width:wrap_content layout_height:wrap_content layout_width:wrap_content layout_height:match_parent layout_width:match_parent layout_height:wrap_content
  61. 61. Ⅶ - 61 gravity、 layout_gravity ! gravityとlayout_gravity ! Viewの配置する方向を設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="right" android:orientation="vertical" > <!-- 位置指定:無し --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="無し" /> <!-- 位置指定:左 --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:text="左" /> <!-- 位置指定:中央 --> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="中央" /> </LinearLayout>
  62. 62. Ⅶ - 62 layout_weight ! layout_weight ! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合 ! 設定例(weightなし) This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button2" android:layout_width="wrap_content " android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout>
  63. 63. Ⅶ - 63 layout_weight ! layout_weight ! 設定例(weightあり) This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button" android:layout_weight="1" /> <Button android:id="@+id/button1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button" android:layout_weight="1" /> </LinearLayout> ボタンの幅が画面 の横幅いっぱいの 等分に広がってい る
  64. 64. Ⅶ - 64 weightSum ! weightSum ! 余白部分を含めたLayoutの合計値を指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="5" > <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:text="Button1" /> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:text="Button2" /> </LinearLayout> 1 2 2(5-1-2) 全体割合 =5
  65. 65. Ⅶ - 65 layout_margin、 padding ! layout_marginとpadding ! layout_magin:外側の余白の設定する ! padding : 内側の余白の設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- デフォルト --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <!-- margin --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="50dp" android:text="Button" /> <!-- padding --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="50dp" android:text="Button" /> ボタンの周囲の 余白が50dps テキストの周囲 の余白が50dps
  66. 66. Ⅶ - 66 enabled ! enabled ! ビューの有効、無効を設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout > <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:enabled="true" android:text="true" /> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="wrap_content" android:enabled="false" android:text="false" /> </LinearLayout>  
  67. 67. Ⅶ - 67 visibility ! visibility ! ビューの表示、非表示を設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <TextView android:text="visible" /> <Button android:text="Button" android:visibility="visible" /> <TextView android:text="invisible" /> <Button android:text="Button" android:visibility="invisible" /> <TextView android:text="gone" /> <Button android:text="Button" android:visibility="gone" /> <TextView android:text="↑goneは幅高さが無効化され、存在し ないものとして扱われる" /> 幅と高さを維持する 幅と高さを維持しないため、 前後のViewが詰め込まれる
  68. 68. Ⅶ - 68 ImageView ! ImageViewとは ! 画像を表示する際に使用するViewクラス ! 配置したImageViewにdrawableから画像を読み込んで表示を行う ! srcプロパティで表示する画像を指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. ImageViewに画 像が設定される 読み込ませたい画 像を設定すると
  69. 69. Ⅶ - 69 ImageViewプロパティ ! 代表的なImageViewプロパティ This material is licensed under the Creative Commons License BY-NC-SA 4.0. プロパティ 設定値 説明 android:minHeight px , dp, sp, in, mm
 数値+単位
 例)20dp Viewの高さの最小値を指定 ※ImageViewではなくViewのプロパティ android:minWidth px , dp, sp, in, mm
 数値+単位
 例)20dp Viewの幅の最小値を指定 ※ImageViewではなくViewのプロパティ android:maxHeight px , dp, sp, in, mm
 数値+単位
 例)20dp ImageViewの高さの最大値を指定 android:maxWidth px , dp, sp, in, mm
 数値+単位
 例)20dp ImageViewの幅の最大値を指定 android:scaleType Matrix,fit_xy,
 fix_start,fix_center,fix_end,
 center,center_crop,center_inside 画像がImageViewのサイズに応じてどのよう にリサイズされるかを指定 android:src リソース指定 ImageViewに表示する内容を指定 android:adjustViewBounds true, false 画像の縦横比を維持するかどうかを指定。 falseだと、端末のサイズに縦横比が合わさ れる。 デフォルトはfalse。
  70. 70. Ⅶ - 70 minHeight、minWidth ! minHeightとminWidth ! Viewの高さ、幅の最小値を指定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!--minWidth・minHeight使用--> <ImageView android:id="@+id/ImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100dp" android:minHeight="100dp" android:src="@drawable/android" /> <!--デフォルト--> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </LinearLayout> 実際の画像サイズはもっと小 さいが、minWidth/minHeight がそれより大きいため、その サイズで表示される ※ImageViewではなくViewのプロパティ
  71. 71. Ⅶ - 71 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!--maxWidth・maxHeight使用--> <ImageView android:id="@+id/ImageView“ android:adjustViewBounds= "true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100dp" android:minHeight="100dp" android:src="@drawable/android" /> <!--デフォルト--> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/android" /> </LinearLayout> maxHeight、maxWidth ! maxHeightとmaxWidth ! ImageViewの高さの最大値を指定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 実際の画像サイ ズもっと大きいが、 maxWidth/ maxHeightがそれ より小さいため、 そのサイズで表 示される
  72. 72. Ⅶ - 72 scaleType ! scaleType ! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <LinearLayout          xmlns:android="http://schemas.android.com/apk/res/android"          android:orientation="vertical"          android:layout_width="match_parent"          android:layout_height="match_parent">                    <TextView                  android:text="TextView"                  android:id="@+id/textView1"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"></TextView>            <ImageView                  android:adjustViewBounds="true"                  android:scaleType="matrix"                  android:background="#aaaaaa"                  android:id="@+id/imageView1"                  android:layout_width="wrap_content"                  android:src="@drawable/big_droid"                  android:layout_height="wrap_content"></ImageView>            <TextView                  android:text=""                  android:background="#0000ff"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"></TextView>   </LinearLayout> このプロパティの値を変更する ImageViewの背景色を#aaaaaaに設定している (縮小などがわかりやすくするため)
  73. 73. Ⅶ - 73 scaleType ! scaleType ! 設定例(adjustViewBounds=false) This material is licensed under the Creative Commons License BY-NC-SA 4.0. scaleType=“matrix” scaleType=“fitCenter” scaleType=“cetner” scaleType=“fitXY” ImageViewの領域は、画像の幅/高さと画面サイ ズのうちそれぞれ小さい方が使用される 画像のサイズはそのまま で表示されるが、画面幅 より画像が大きいので右 側が見切れている 高さ・幅が画面内に収まるよ うそれぞれ別の比率で縮小 される(今回高さは縮小され ていない) 画像サイズはそのままで、 画像の中心がImageView の中心に合うよう配置さ れる。 画像の幅が画面幅に合うよう、 高さも同率で縮小され、 ImageView領域の中心に配置 されるため、ImageViewの背景 色が見えている
  74. 74. Ⅶ - 74 scaleType ! scaleType ! 設定例(adjustViewBounds=true) This material is licensed under the Creative Commons License BY-NC-SA 4.0. scaleType=“matrix” scaleType=“fitCenter” scaleType=“cetner” scaleType=“fitXY” ImageViewの領域は、false時と同じように求めた 後、画像のアスペクト比(縦横比)に調整される =ImageViewの領域は画像より大きくならない 画像のサイズはそのまま だが、画面幅に応じたア スペクト比で高さが制限さ れる 高さ・幅がどちらも画面内に 収まるよう、元のアスペクト 比を維持したまま縮小され る 画像サイズはそのままで、 画像の中心がImageView の中心に合うよう配置さ れる 画像の幅が画面幅に合うよう 縮小され、高さはその幅に対し てアスペクト比を維持したまま 縮小される
  75. 75. Ⅶ - 75 ViewGroup ! ViewGroupとは ! 複数のビューをまとめる機能を持つビューである ! ビューグループを使用する事により、複雑なレイアウトを作成することが可 能になる ! ViewGroupの例:LinearLayout ! Viewを縦方向または横方向に配置します This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  76. 76. Ⅶ - 76 ViewGroupの種類 ! 代表的なビューグループ This material is licensed under the Creative Commons License BY-NC-SA 4.0. 名前 説明 RelativeLayout View(親)の位置を決め、その位置を元に View(子)の位置を相対的(Relative)に指定する LinearLayout Viewを垂直または水平に配置 FrameLayout FrameLayoutは一つのViewを配置することを目的 としたViewGroup 複数配置した場合は重って表示される ListView 縦方向に行を並べたリストを表示 GridLayout グリッド表示に特化したレイアウト。セルの列方向、 または行方向への結合ができる(GridViewでは出 来ない)。 ※Android4.0以降で利用可能
  77. 77. Ⅶ - 77 RelativeLayout ! RelativeLayout ! View(親)の位置を決め、その位置を元にView(子)の位置を相対的に指定 する構成 This material is licensed under the Creative Commons License BY-NC-SA 4.0. テキスト プロパティ 説明 中 android:layout_centerInParent="true" 指定したViewを画面の中心に 配置する 上 android:layout_above="@+id/center" 基準となるViewの上に表示します android:layout_alignLeft="@+id/center" 指定したViewの左側の境界に合わせ て整列します 下 android:layout_below="@+id/center" 基準となるViewの下に表示します android:layout_alignRight="@+id/center" 指定したViewの右側の境界に合わせ て整列します 左 android:layout_toLeftOf="@+id/center" 基準となるViewの左側に表示します android:layout_alignBottom="@+id/center" 指定したViewの下側の境界に合わせ て整列します 右 android:layout_toRightOf="@+id/center" 基準となるViewの右側に表示します android:layout_alignTop="@+id/center" 指定したViewの上側の境界に合わせ て整列します
  78. 78. Ⅶ - 78 RelativeLayout ! RelativeLayout This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"  >   <Button                  android:id="@+id/center"                  android:layout_width="100dp"                  android:layout_height="100dp"                  android:layout_centerHorizontal="true"                  android:layout_centerVertical="true"                  android:padding="20dp"                  android:text="中"  />   <Button                  android:id="@+id/right"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_alignTop="@+id/center"                  android:layout_toRightOf="@+id/center"                  android:text="右"/>  
  79. 79. Ⅶ - 79 RelativeLayout ! RelativeLayout This material is licensed under the Creative Commons License BY-NC-SA 4.0.        <Button                  android:id="@+id/below"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_alignRight="@+id/center"                  android:layout_below="@+id/center"                  android:text="下"  />   <Button                  android:id="@+id/above"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_above="@+id/center"                  android:layout_alignLeft="@+id/center"                  android:text="上"  />   <Button                  android:id="@+id/left"                  android:layout_width="50dp"                  android:layout_height="50dp"                  android:layout_alignBottom="@+id/center"                  android:layout_toLeftOf="@+id/center"                  android:text="左"  />   </RelativeLayout>
  80. 80. Ⅶ - 80 LinearLayout ! LinearLayout ! Viewを垂直または水平に配置する This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/padding_medium" android:text="@string/hello_world" tools:context=".MainActivity" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_android" /> </LinearLayout> horizontalまたは verticalを指定する
  81. 81. Ⅶ - 81 ViewGroupの種類 ! 配置方向の設定 ! orientationでLinearLayoutの内部のViewを配置する方向を決定する ! vertical:垂直方向に配置 ! horizontal:水平方向に配置 This material is licensed under the Creative Commons License BY-NC-SA 4.0. verticalの場合  「垂直方向」 horizontalの場合   「水平方向」
  82. 82. Ⅶ - 82 FrameLayout ! FrameLayout ! FrameLayoutは一つのViewを配置することを目的としたViewGroup ! 複数配置した場合は重って表示される This material is licensed under the Creative Commons License BY-NC-SA 4.0. <FrameLayout xmlns:android="http://schemas.android.com/apk/ res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/padding_medium" android:text="@string/hello_world" android:textColor="#FF0000" tools:context=".MainActivity" /> </FrameLayout> ImageViewとTextViewが 重なっている
  83. 83. Ⅶ - 83 ListView ! ListView ! 縦方向に行を並べたリストを表示する This material is licensed under the Creative Commons License BY-NC-SA 4.0. ※行要素は、別途行用のレイアウトリソースを用意し、プログラムで設定することもできる <?xml  version="1.0"  encoding="utf-­‐8"?>   <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"  >   <ListView                  android:id="@+id/listView1"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  android:entries="@array/list_datas"  > </ListView>   </FrameLayout>
  84. 84. Ⅶ - 84 ListView ! ListView This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"  >   <ListView                  android:id="@+id/listView1"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  android:entries="@array/list_datas"  > </ListView>   </FrameLayout> strings.xml
  85. 85. Ⅶ - 85 GridLayout ! GridLayout ! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合 ができる This material is licensed under the Creative Commons License BY-NC-SA 4.0. <?xml  version="1.0"  encoding="utf-­‐8"?>   <GridLayout  xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"          android:columnCount="3"          android:rowCount="4"          android:useDefaultMargins="true"  >   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center“                  android:layout_column="0"                  android:layout_row="0"                  android:background="#eee"                  android:text="Item  1"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp"          android:layout_gravity="center“                  android:layout_column="1"          android:layout_row="0"                  android:background="#ddd"                  android:text="Item  2"                  android:textAppearance="?android:attr/textAppearanceLarge"  /> セルを列方向 に結合 セルを行方向 に結合
  86. 86. Ⅶ - 86 GridLayout ! GridLayout(つづき 1) This material is licensed under the Creative Commons License BY-NC-SA 4.0.        <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center"                  android:layout_column="2"                  android:layout_row="0"                  android:background="#eee"                  android:text="Item  3"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center"                  android:layout_column="0"                  android:layout_row="1"                  android:layout_rowSpan="2"                  android:background="#ddd"                  android:text="Item  4"                  android:textAppearance="?android:attr/textAppearanceLarge"  />            <TextView                  android:layout_width="92dp"                  android:layout_height="92dp"          android:layout_gravity="center“                  android:layout_column="1“          android:layout_row="1“                  android:layout_columnSpan="2“  
  87. 87. Ⅶ - 87 GridLayout ! GridLayout(つづき 2) This material is licensed under the Creative Commons License BY-NC-SA 4.0.                android:background="#eee"                  android:text="Item  5"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   <TextView                  android:layout_width="92dp"                  android:layout_height="92dp"          android:layout_gravity="center“                  android:layout_column="1"          android:layout_row="2"                  android:background="#ccc"                  android:text="Item  6"                  android:textAppearance="?android:attr/textAppearanceLarge"  />          <TextView                  android:layout_width="92dp"                  android:layout_height="92dp“          android:layout_gravity="center"                  android:layout_column="2"                  android:layout_row="2"                  android:background="#ddd"                  android:text="Item  7"                  android:textAppearance="?android:attr/textAppearanceLarge"  />   </GridLayout>
  88. 88. Ⅶ - 88 レイアウトの作成 ! 実習 1 ! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ アウトを作成する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 周囲の余白『10dp』 を設定
  89. 89. Ⅶ - 89 レイアウトの作成 ! プロジェクト概要 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 項目 設定値 Project name UISample Build Target ※ トレーニングで指定したバージョン Application name UISample Package name jp.oesf.uisample Create Activity MainActivity
  90. 90. Ⅶ - 90 レイアウトの作成 ! 手順 ! res/drawble-hdpi/に「android.png」の画像を追加する ! 画像は解答ドキュメントより取得する ! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパティを設定し レイアウトを完成させる ! 実習で使用するViewGroupとプロパティは各自で考えること ! 検索ボタンのリソースは、@android:drawable/ic_menu_searchを使用する。 This material is licensed under the Creative Commons License BY-NC-SA 4.0. View EditText ImageButton ImageView Button Button
  91. 91. Ⅶ - 91 レイアウトの作成 ! 確認 ! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する This material is licensed under the Creative Commons License BY-NC-SA 4.0. nexus one nexus7
  92. 92. Ⅶ - 92 レイアウトの作成 -解答- ! 解答例 This material is licensed under the Creative Commons License BY-NC-SA 4.0. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" android:orientation="horizontal" > <EditText android:id="@+id/editText1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </EditText> <ImageButton android:id="@+id/imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/ic_menu_search" /> </LinearLayout>
  93. 93. Ⅶ - 93 レイアウトの作成 -解答- ! 解答例(続き) This material is licensed under the Creative Commons License BY-NC-SA 4.0. <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:scaleType="fitCenter" android:src="@drawable/android" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" android:orientation="horizontal" > <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> </LinearLayout> </LinearLayout>
  94. 94. Ⅶ - 94 レイアウトの作成 [補足実習] ! 実習[補足] ! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する ! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存 在する。他にどんな実装方法があるかを考え組み立てる This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  95. 95. StyleとTheme This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  96. 96. Ⅶ - 96 StyleとTheme ! StyleとTheme ! アプリケーションをデザインする場合に、 UIを統一感をもたせるときにstyleと Themeを使用します ! StyleとはUIのプロパティを複数持ったリソースです ! Styleは個々のビュー に設定でき、ThemeはActivityやアプリケーション全体 に設定できます。 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  97. 97. Ⅶ - 97 Styleの作成 ! Styleの作成方法 ! res/values以下にstyles.xmlを作成する ! styles.xmlにUIのプロパティを定義する ! プロパティはViewで定義されているプロパティが設定できる ! android:textSize 、android:textColor など ! Viewのandroid:styleプロパティに作成したStyleを指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  98. 98. Ⅶ - 98 Styleの作成 (書式) ! Styleリソースの書式 ! ルートノードに<resources>を指定する ! 子ノードに<style>を指定する ! styleのプロパティに、Style名、親Style名(Styleを継承する場合)を指定する ! ※親StyleはAndroid標準のUIスタイルを指定すると良い ! <style>の子ノードに<item>を指定する ! itemのプロパティにViewで設定したいプロパティを設定する <?xml version="1.0" encoding="utf-8"?> <resources> <style name="MyButton" parent="android:Widget.Button"> <item name="android:textSize">18sp</item> <item name="android:textColor">#ddaa00</item> <item name="android:background">@drawable/my_selector</item> </style> </resources> styles.xml ※最初の親StyleはAndroid標準のUIスタイルを指定すると良い。 クリック時の状態対応やテキストの位置などの設定が不要になる This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  99. 99. Ⅶ - 99 Styleの作成 (設定例) ! Styleを使用したサンプル ! Styleに文字サイズと、文字カラーを設定し、背景以外も統一したボタンを作 成する ! Sylteの名前を設定する •  styleタグのnameプロパティで設定する •  name=“Styleの名前” ! Viewのプロパティを設定する •  itemタグのname属性でViewのプロパティを指定する •  文字サイズ:name=“android:textSize” •  文字カラー:name=“android:textColor” <?xml version="1.0" encoding="utf-8"?> <resources> <style name="MyButton" parent="android:Widget.Button"> <item name="android:textSize">18sp</item> <item name="android:textColor">#ddaa00</item> <item name="android:background">@drawable/my_selector</item> </style> </resources> styles.xml This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  100. 100. Ⅶ - 100 Styleの作成 (適用) ! ViewにStyleを適用する ! 作成したStyleをViewのstyleプロパティに指定する <Button style="@style/MyButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button01" > </Button> <Button style="@style/MyButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button02" > </Button> <ToggleButton style="@style/MyButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ToggleButton" > </ToggleButton> <EditText style="@style/MyButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="EditText" > </EditText> This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  101. 101. Ⅶ - 101 Styleの作成 (実行結果) ! 実行結果 ! Viewの文字サイズが18spで統一 ! Viewの文字カラーが#ddaa00で統一 ! 背景画像がmy_selectorで統一 ※Button以外のViewも同じデザインになっているため それぞれのViewに特化したStyleを用意するのが一般的 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  102. 102. Ⅶ - 102 Styleの作成(1) ! 実習1 ! サンプルで解説したStyleを作成する ! 前回の実習で作成したselectorを使ってStyleを作成する ! 実行結果 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  103. 103. Ⅶ - 103 Styleの作成(2) ! プロジェクト概要 項目 設定値 Project name MyStyelSample Build Target ※トレーニングで指定したバージョン Application name MyStyleSample Package name com.example.mystylesample Create Activity MainActivity ※前章で作成した「MySelectorSample」を修正して作業しても良い This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  104. 104. Ⅶ - 104 Styleの作成(3) ! 手順 ! リソースファイルの準備 ! Styleリソースを作成する ! 画面デザインを変更しViewにStyleを設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  105. 105. Ⅶ - 105 Styleの作成(4) ! リソースファイルの準備 ! 前回作成したリソースファイルを追加する 3.2 実習 Themeを作成する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  106. 106. Ⅶ - 106 Styleの作成(5) ! Styleリソースを作成する ! res/values以下のstyles.xmlファイルを修正する ! styles.xmlに以下の設定をする ! style名:MyButton ! parent:Widget.Button ! android:textSize:18sp ! android:textColor:#ddaa00 ! android:background:@drawable/my_selector <?xml version="1.0" encoding="utf-8"?> <resources> ...略... <style name="MyButton" parent="android:Widget.Button"> <item name="android:textSize">18sp</item> <item name="android:textColor">#ddaa00</item> <item name="android:background">@drawable/my_selector</item> </style> </resources> This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  107. 107. Ⅶ - 107 Styleの作成(6) ! 画面デザインを変更する ! レイアウトリソースの内容を以下のように変更する ! 各ViewのstyleにMyButtonを指定する View Properties Button style="@style/MyButton" android:text="Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" Button style="@style/MyButton" android:text="Button02" android:layout_width="wrap_content" android:layout_height="wrap_content" ToggleButton style="@style/MyButton" android:text="ToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" EditText style="@style/MyButton" android:text="EditText" android:layout_height="wrap_content" android:layout_width="match_parent" アウトライン This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  108. 108. Ⅶ - 108 Styleの作成(7) ! 確認 ! Viewの文字サイズが統一されていることを確認する ! Viewの文字カラーが統一されていることを確認する ! Viewの背景が統一されていることを確認する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  109. 109. Ⅶ - 109 Theme ! Themeとは ! UIのプロパティを複数持ったリソース ! Styleは個々のビュー に設定するが、ThemeはActivityやDialogやアプリケー ション全体に設定する ! リソースの書式はStyleと同じ This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  110. 110. Ⅶ - 110 Themeの作成方法 ! Themeの作成方法 ! res/values以下にthemes.xmlを作成する(styles.xmlに追加しても良い) ! themes.xmlにUIのプロパティを定義する ! ActivityまたはApplicationのandroid:theme プロパティに作成したThemeを指定する ! 独自のThemeを最初から作成することはできるが、Androidはデフォルトで複数のThemeが用 意されているので、既存のThemeを継承して必要な部分のデザインを変更する •  ※最新のADTでは標準テーマを継承したAppThemeが定義されている Theme.Light Theme.Translucent Theme.Black This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  111. 111. Ⅶ - 111 Themeの作成方法(書式) ! Themeリソースの書式 ! ルートノードに<resources>を指定する ! 子ノードに<style>を指定する ! styleのプロパティに、Style名、親Style名(Styleを継承する場合)を指定する ! <style>の子ノードに<item>を指定する ! itemのプロパティにViewで設定したいプロパティを設定する <?xml version="1.0" encoding="utf-8"?> <resources> <style name="CustomTheme" parent="android:Theme.Light"> <item name="android:windowBackground">@drawable/panel_picture_frame_bg_pressed_blue</item>   </style> </resources> themes.xml This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  112. 112. Ⅶ - 112 Themeの作成方法(定義) ! Themeを使用したサンプル ! Android標準で用意されているTheme.Lightを継承した独自のCustomTheme を定義 ! android:windowBackground •  背景画像を「activity_background.png」に設定 ! android:buttonStyle •  デフォルトのButtonのStyleを「MyButton」に設定 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="CustomTheme" parent="AppTheme"> <item name="android:windowBackground">@drawable/activity_background</item> <item name="android:buttonStyle">@style/MyButton</item> </style> </resources> themes.xml This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  113. 113. Ⅶ - 113 Themeの作成方法(適用) ! ActivityにThemeを設定する ! AndroidManifestファイルのactivityタグのthemeプロパティに適用させたい Themeを指定する <activity android:name=".MyStyleSample" android:theme="@style/CustomTheme" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  114. 114. Ⅶ - 114 Themeの作成方法(実行結果) ! 実行結果 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  115. 115. Ⅶ - 115 Themeを作成する(1) ! 実習2 ! 前回作成したプロジェクトにThemeを追加する ※解答ドキュメントでは「MyThemeSample」で提供 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  116. 116. Ⅶ - 116 Themeを作成する(2) ! 手順 1.  リソースファイルの準備 2.  Themeリソースを作成する 3.  activity_main.xmlで設定したstyleプロパティを削除する 4.  ActivityにThemeを設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  117. 117. Ⅶ - 117 Themeを作成する(3) 1.  リソースファイルの準備 ! 新規に使用するリソースファイルを追加する •  activity_background.png This material is licensed under the Creative Commons License BY-NC-SA 4.0.

×