夜子まま塾講義9(androidの画面デザイン)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

夜子まま塾講義9(androidの画面デザイン)

on

  • 7,868 views

Androidの画面デザイン3 レイアウトタグの使い方から各レイアウト調整用のタグまで解説

Androidの画面デザイン3 レイアウトタグの使い方から各レイアウト調整用のタグまで解説

Statistics

Views

Total Views
7,868
Views on SlideShare
7,866
Embed Views
2

Actions

Likes
2
Downloads
18
Comments
0

2 Embeds 2

https://si0.twimg.com 1
http://blog.local-c.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

夜子まま塾講義9(androidの画面デザイン) Presentation Transcript

  • 1. Now Loading. Please Wait ... Twitter @yokmama Androidの画面デザイン③ 夜子まま塾 講義9(レイアウトの基本 レイアウト編) Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 2. 自己紹介 氏名   :寺園聖文(てらぞの まさふみ) 肩書   :株式会社Re:Kayo-System 代表取締役社長 活動拠点 :神戸近郊∼日本→海外行きたい 著書   :「10日でおぼえるAndroidアプリ開発入門教室」著(翔泳社)       「HTML5によるAndroidアプリ開発入門」監修(日経BP) アプリ  :「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等 好きなもの:アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環 嫌いなもの:とくになし 最近のテーマ:電子工作、運動すること、英語 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 3. レイアウトタグ 画面デザインをする際、それぞれのボタンや テキスト等の位置を決定するためにはレイア ウトを使う必要があります。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 4. レイアウトの必要性 隙間を少し開けたい Button このように画面にボタンを置く場 合、 Button Buttonを画面の中心に置くのか? それとも右上におくのか? 隙間はどれぐらい?といったこと を設定する必要がある。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 5. マルチデバイス対応 部品の配置について考える場合。もっとも重 要なのはちゃんと意図した通りに表示される ことです。 Android端末は複数のデバイスタイプが存在 するためそれは容易なことではありません。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 6. 固定の配置だと 70ピクセル 70ピクセル 50ピクセル 50ピクセル Button Button 左から50ピクセル 上から70ピクセルでちょうど真ん中に 真ん中ではなくなる なった。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 7. 例えば中心の場合 Button どれに対して中心にするのか? 画面全体なのか、左上の領域な Button のか? ということを決めるだけでよい はず。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 8. レイアウトを使う LinearLayoutの android:gravity属性に  center を設定すると、LinearLayoutの子タグ (ここではButton)が中心に配置される。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 9. レイアウトタグとは このようにレイアウトタグは、 内包する子タグの配置を設定す るためのタグです。 レイアウトタグには5つの種類 があり、それぞれを駆使して画 面デザインを行います。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 10. LinearLayoutタグ リニアレイアウト タグは縦または横に内包す るタグを並べます。また他に右寄せ、左寄 せ、中央といった配置指定ができます。 top  ←上 <?xml version="1.0" encoding="utf-8"?> bottom ←下 <LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android" left   ←左 android:layout_width="fill_parent" right  ←右 android:layout_height="fill_parent" android:gravity="center" 等 android:orientation="vertical" > </LinearLayout> vertical:縦 horizontal:横 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 11. < LinearLayout具体例 <LinearLayout <LinearLayout android:layout_width="fill_parent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" > android:orientation="vertical" > <LinearLayout <LinearLayout android:layout_width="fill_parent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_height="fill_parent" android:gravity="right" android:orientation="horizontal" > android:orientation="vertical" > Re:Kayo-System Co.,Ltd. <LinearLayout2012年2月29日水曜日 android:layout_width="fill_parent"
  • 12. RelatveLayoutタグ レラティブレイアウト タグはレラティブレイ アウトとの相対関係、あるいは子タグ同士の 相対関係をもって位置を設定できます。 <RelativeLayout android:id="@+id/relativeLayout1" このように内包する子タグをどう android:layout_width="fill_parent" する、ではなくタグそれぞれに相 android:layout_height="fill_parent" > <Button 対設定を設定する。 android:id="@+id/button1" この例では親である android:layout_width="wrap_content" RelativeLayoutの中心に表示する android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button" /> </RelativeLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 13. RelativeLayoutの具体例 使用例 <Button android:layout_centerInParent=”true” ←中心 android:id="@+id/button3" android:layout_width="wrap_content" android:layout_toLeftOf=”他のID” ←左上 android:layout_height="wrap_content" android:layout_above=”他のID” android:layout_above="@+id/button2" android:layout_alignLeft="@+id/button2" android:layout_above=”他のID” ←上 android:text="Button" /> android:layout_alignLeft=”他のID” android:layout_above=”他のID” ←右上 <Button android:layout_toRightOf=”他のID” android:id="@+id/button2" android:layout_width="wrap_content" android:layout_toLeftOf=”他のID” ←左 android:layout_height="wrap_content" android:layout_alignTop=”他のID” android:layout_alignBottom="@+id/button1" android:layout_toRightOf="@+id/button1" android:layout_toRightOf=”他のID” ←右 android:text="Button" /> android:layout_alignTop=”他のID” android:layout_below=”他のID” ←左下 <Button android:layout_toLeftOf=”他のID” android:id="@+id/button4" android:layout_width="wrap_content" android:layout_below=”他のID” ←下 android:layout_height="wrap_content" android:layout_below="@+id/button1" android:layout_alignLeft=”他のID” android:layout_toLeftOf="@+id/button1" android:text="Button" /> android:layout_below=”他のID” ←右下 android:layout_toRightOf=”他のID” Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 14. LinearLayoutと RelativLayoutの使い分け 横 縦 横 LineaLayout RelativeLayout 横と縦を複数組み合わせるようなレイアウトは RelativeLayoutのほうが構成がシンプルになる Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 15. Tablelayoutタグ テーブルレイアウト タグは表のように部品を 配置することができるレイアウトです。 <TableLayout android:id="@+id/tableLayout1" android:layout_width="wrap_content" android:layout_height="fill_parent" > <TableRow android:id="@+id/tableRow1" 左並びにしたい部品をTableRowに android:layout_width="wrap_content" にいれることで表のレイアウトに android:layout_height="wrap_content" > <Button することができます。 android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </TableRow> </TableLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 16. TableLayoutの具体例 2つのカラムを使う カラムの位置を指定 <TableRow <TableRow android:id="@+id/tableRow2" android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_width="wrap_content" android:layout_height="wrap_content" > android:layout_height="wrap_content" > <Button <Button android:id="@+id/button4" android:id="@+id/button6" android:layout_width="wrap_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_height="wrap_content" android:text="Button" /> android:layout_column="1" android:text="Button" /> <Button android:id="@+id/button5" <Button android:layout_width="wrap_content" android:id="@+id/button7" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_span="2" android:layout_height="wrap_content" android:text="Button" /> android:text="Button" /> </TableRow> </TableRow> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 17. FrameLayoutタグ フレームレイアウト タグは部品を重ねあわせ ることができるレイアウトです。 <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/button1" この2つの部品は左上のを起点 android:layout_width="wrap_content" android:layout_height="wrap_content" に重ねて並べられる android:text="Button" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </FrameLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 18. FrameLayoutの具体例 上から順に重ねていくため後に定義され た部品が上にきます。 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 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/aaa" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Button" /> </FrameLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 19. GridLayoutタグ GridLayoutはTableLayoutと似ていますが TableRowを必要としない上、縦の結合が できるレイアウトです。 <GridLayout android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="3" > <Button 直接、行(row)と列(column) android:id="@+id/button1" android:layout_column="0" を指定します。 android:layout_row="0" android:text="Button" /> <Button android:id="@+id/button2" android:layout_column="1" android:layout_row="0" 注)AndroidSDK4.0から利用で android:text="Button" /> </GridLayout> きるレイアウトです Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 20. GridLayoutの具体例 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:columnCount="4" 横方向に4つで折り返す android:orientation="horizontal" > <Button android:layout_width="50dip" android:layout_column="3" 先頭から3番目の位置を指定 android:text="/" /> <Button android:layout_width="50dip" 幅を指定しないと文字列の幅に影 android:text="1" /> <省略> 響されるので固定値をいれること <Button android:layout_gravity="fill" android:layout_rowSpan="3" でそれ以降の幅をリードする。 android:text="+" /> <Button android:layout_columnSpan="2" android:layout_gravity="fill" 縦を3つ消費する android:text="0" /> <Button android:layout_gravity="fill" android:text="00" /> 横を2つ消費する <Button android:layout_columnSpan="3" android:layout_gravity="fill" android:text="=" /> </GridLayout> マス一杯まで高さ幅を設定する。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 21. よく使う属性 下記の属性はレイアウトの際に よく使う属性です。 •android:id •android:layout_width、android:layout_height •android:layout_weight •android:gravity、android:layout_gravity •android:layout_marginとandroid:padding Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 22. android:id <IDの値>/<IDの名前> android:idはタグにIDを設定する属性です。IDをを設 定することで、他のタグから指定したり、プログラム からタグのインスタンスを取得する際に使います。 <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> @+idは自動で採番するという意味です。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 23. idの参照例 RelativeLayoutから Javaプログラムからの の使用例 使用例 <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" Button button1 = (Button)findViewById(R.id.button1); android:layout_centerInParent="true" android:text="Button" /> <Button R.idはリソースのIDの名前を指 android:id="@+id/button2" android:layout_width="wrap_content" している。 android:layout_height="wrap_content" android:layout_alignBottom="@+id/button1" これはbutton1のインスタンス android:layout_toRightOf="@+id/button1" android:text="Button" /> を取得するという意味 @+id/button1を指している。 これはbutton1の右下に配置す るという意味 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 24. android:layout_width android: layout_height layout_width,layout_heightはそれぞれ幅、高さを指 定する属性です。 <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="match_parent" android:text="Button" /> wrap_content ←必要な大きさを自動計算する mach_parent←使用できる大きさを全て使う Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 25. wrap_contentと match_parent wrap_content あいうえお 余白があっても、文字の大きさ に合わせた大きさになる。 match_parent あいうえお 余白を全て使った大きさになる Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 26. 使用できる単位 幅や高さに直接値を指定する場合は次のど れかの単位を使わなければなりません。 •dp(dip: density-independent pixel) 解像度に依存しないように単位ピクセルと解像度から単位辺りのピクセル算 出した単位。 例)hdpiの場合 240/160 = 1.5px = 1dp •sp(scaled pixel) 解像度に依存しない文字の大きさを指定する際に使用する単位 •px(pixel) ピクセル数。解像度に左右されレイアウトが崩れるおそれがあるのであまり 使用するべきではないです。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 27. android:layout_weight layout_weight属性は余白の使い方を指 定する属性です。 <Button android:id="@+id/button1" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button buttn1とbuttn2で余白を1:1 android:id="@+id/button2" android:layout_weight="1" の割合で分け合う android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 28. 余白指定のポイント layout_weight属性は余白を分配する仕組みになっています。 ここで失敗しやすいのは、幅を自動的に領域にあわせて計算する仕 組みではないので少し工夫をしないといけない点です。 上段 <Button android:layout_width="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" android:text="ABCDEFGHIJ" /> <Button android:layout_width="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" android:text="ABC" /> 下段 <Button android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" 1:1なのに android:text="ABCDEFGHIJ" /> わざと幅を0にして、余 <Button 均等ではない android:layout_width="0dip" 白を全幅にしている。 android:layout_height="wrap_content" android:layout_weight="1" android:text="ABC" /> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 29. android:gravityと android:layout_gravity gravity、layout_gravityは領域に対してどこ に配置するのかを指定する属性です。 •top •clip_vertical top •bottom •clip_horizontal •left •start •right •end •center_vertical •fill_vertical left center right •center_horizontal •fill_horizontal •center •fill 複数指定する場合は ¦ を使います。 bottom 例)left¦center_vertical Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 30. android:gravityは内包する 部品に対して設定する android:gravityは部品を内包できるタグに設定できる属性です。 例えばレイアウトタグ等、ただし例外としてTextViewにも設定でき る。TextViewの場合中身のTextの文字列に対して指定される。 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" 内包するbutton1,button2 android:text="Button" /> <Button が中心に配置される。 android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 31. android:layout_gravityは親のタグの 領域において自分の位置を指定する 親のタグの領域に対して位置を指定するため、もともとwrap_contentsのよう な値で最少の大きさが設定されている場合は効果がないので注意してください。 上段 下段 <LinearLayout <LinearLayout android:layout_width="wrap_content" android:layout_width="match_parent" android:layout_height="wrap_content"> android:layout_height="match_parent"> <Button <Button android:layout_gravity="right" android:layout_gravity="right" android:text="Button1" /> android:text="Button3" /> <Button <Button android:layout_gravity="right" android:layout_gravity="right" android:text="Button2" /> android:text="Button4" /> </LinearLayout> </LinearLayout> 親の領域が広いのでlayout_gravity の効果がでている。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 32. android:layout_marginと android:padding layout_marginとpaddingは隙 間を設定する属性です。 Text Text margin属性によって余白を作る padding属性によって内側に余白を作る Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 33. margin属性 margin属性は全方向に設定したり、1方 向にだけ設定することができます。 上段 <Button android:id="@+id/button1" android:layout_margin="10dip" •android:layout_margin android:layout_width="wrap_content" android:layout_height="wrap_content" •android:layout_marginTop android:text="Button" /> •android:layout_marginBottom 下段 •android:layout_marginLeft <Button •android:layout_marginRight android:id="@+id/button2" android:layout_marginLeft="20dip" •android:layout_marginStart android:layout_width="wrap_content" •android:layout_marginEnd android:layout_height="wrap_content" android:text="Button" /> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 34. padding属性 paddingは自身の中の部品あるいは文字 列などとの距離を設定する属性です。 上段 <Button android:id="@+id/button1" android:padding="50dip" •android:padding android:layout_width="wrap_content" android:layout_height="wrap_content" •android:paddingTop android:text="Button" /> •android:paddingBottom 下段 •android:paddingLeft <LinearLayout android:id="@+id/linearLayout1" •android:paddingRight android:paddingLeft="50dip" android:layout_width="match_parent" •android:paddingStart android:layout_height="wrap_content" > <Button •android:paddingEnd android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 35. marginとpaddingの違い marginは自身と他の部品あるいは親との距離を設 定する属性であるため、内包するべき親に依存して います。 一方paddingはそれ自身に設定するため親は不要で すが、背景や外観のある部品は形状が変形するので 注意が必要です。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 36. marginとpaddingの 使用例 上段 <TextView android:id="@+id/textView1" android:background="@drawable/round_shape" android:textColor="@android:color/black" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dip" android:text="TextView" /> 全体にマージンを設定することで、 下段 <TextView ボタン同士の間隔を広げた android:id="@+id/textView2" android:background="@drawable/round_shape" android:textColor="@android:color/black" android:paddingLeft="10dip" android:paddingRight="10dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dip" android:text="TextView" /> 左と右にpaddingに設定することで 背景とテキストの間に余白を作った。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 37. 実際に使ってみる ここまでで紹介したレイアウトタグや、各 設定属性を実際に使ってみてください。 ここまで紹介したレイアウトのサンプルは Ykmjuku005でみることができます。 http://bit.ly/w1dJr1 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 38. 中級者向け 電卓アプリ(再) 以前作成した電卓アプリを改造し、 もっと立派な電卓に仕上げてみましょう。 電卓(再)のサンプルは ykmjuku006でみることができます。 http://bit.ly/wrjJxv Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  • 39. イベント処理は? 続きは夜子まま塾オンライン(無料)にて 毎週水曜日夜10:30∼11:00 (都合によりない場合もあります) 夜子まま塾 http://bit.ly/wTjjix GoogleID:101190223376062765723 上記アカウントをサークルに追加していると、 ハングアウトのお誘いが届きます。 是非ご参加ください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日