Now Loading. Please Wait ...                               Twitter @yokmama Androidの画面デザイン③ 夜子まま塾 講義9(レイアウトの基本 レイアウト編)    ...
自己紹介       氏名   :寺園聖文(てらぞの まさふみ)       肩書   :株式会社Re:Kayo-System 代表取締役社長       活動拠点 :神戸近郊∼日本→海外行きたい       著書   :「10日でおぼえるAn...
レイアウトタグ         画面デザインをする際、それぞれのボタンや         テキスト等の位置を決定するためにはレイア             ウトを使う必要があります。                        Re:Kayo...
レイアウトの必要性                            隙間を少し開けたい                   Button                             このように画面にボタンを置く場       ...
マルチデバイス対応         部品の配置について考える場合。もっとも重         要なのはちゃんと意図した通りに表示される                    ことです。         Android端末は複数のデバイスタイプが...
固定の配置だと                                         70ピクセル                    70ピクセル                             50ピクセル       ...
例えば中心の場合                    Button                             どれに対して中心にするのか?                             画面全体なのか、左上の領域な  ...
レイアウトを使う                  LinearLayoutの android:gravity属性に                 center を設定すると、LinearLayoutの子タグ                 ...
レイアウトタグとは                このようにレイアウトタグは、                内包する子タグの配置を設定す                   るためのタグです。                レイアウトタグには...
LinearLayoutタグ         リニアレイアウト タグは縦または横に内包す          るタグを並べます。また他に右寄せ、左寄           せ、中央といった配置指定ができます。                    ...
<           LinearLayout具体例                                                           <LinearLayout                 <Linea...
RelatveLayoutタグ         レラティブレイアウト タグはレラティブレイ         アウトとの相対関係、あるいは子タグ同士の          相対関係をもって位置を設定できます。        <RelativeLay...
RelativeLayoutの具体例                                                                使用例                <Button              ...
LinearLayoutと                RelativLayoutの使い分け      横               縦                       横                LineaLayout ...
Tablelayoutタグ         テーブルレイアウト タグは表のように部品を          配置することができるレイアウトです。    <TableLayout        android:id="@+id/tableLayou...
TableLayoutの具体例  2つのカラムを使う                                                カラムの位置を指定   <TableRow                           ...
FrameLayoutタグ         フレームレイアウト タグは部品を重ねあわせ            ることができるレイアウトです。    <FrameLayout        android:layout_width="match_...
FrameLayoutの具体例                   上から順に重ねていくため後に定義され                       た部品が上にきます。                   <FrameLayout xmlns...
GridLayoutタグ          GridLayoutはTableLayoutと似ていますが          TableRowを必要としない上、縦の結合が                  できるレイアウトです。          ...
GridLayoutの具体例                <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"                    an...
よく使う属性                下記の属性はレイアウトの際に                   よく使う属性です。        •android:id        •android:layout_width、android:l...
android:id                       <IDの値>/<IDの名前>        android:idはタグにIDを設定する属性です。IDをを設        定することで、他のタグから指定したり、プログラム    ...
idの参照例    RelativeLayoutから                                     Javaプログラムからの         の使用例                                  ...
android:layout_width           android: layout_height       layout_width,layout_heightはそれぞれ幅、高さを指                       定す...
wrap_contentと                   match_parent          wrap_content                あいうえお      余白があっても、文字の大きさ               ...
使用できる単位           幅や高さに直接値を指定する場合は次のど            れかの単位を使わなければなりません。         •dp(dip: density-independent pixel)         解像...
android:layout_weight                layout_weight属性は余白の使い方を指                         定する属性です。          <Button           ...
余白指定のポイント                 layout_weight属性は余白を分配する仕組みになっています。                ここで失敗しやすいのは、幅を自動的に領域にあわせて計算する仕                ...
android:gravityと                android:layout_gravity                gravity、layout_gravityは領域に対してどこ                   に配...
android:gravityは内包する             部品に対して設定する                 android:gravityは部品を内包できるタグに設定できる属性です。                例えばレイアウトタ...
android:layout_gravityは親のタグの           領域において自分の位置を指定する       親のタグの領域に対して位置を指定するため、もともとwrap_contentsのよう       な値で最少の大きさが設定...
android:layout_marginと                   android:padding                 layout_marginとpaddingは隙                    間を設定する...
margin属性            margin属性は全方向に設定したり、1方              向にだけ設定することができます。                上段                <Button          ...
padding属性                paddingは自身の中の部品あるいは文字                 列などとの距離を設定する属性です。                    上段                    ...
marginとpaddingの違い         marginは自身と他の部品あるいは親との距離を設         定する属性であるため、内包するべき親に依存して                      います。         一方pa...
marginとpaddingの                      使用例                    上段                   <TextView                     android:id=...
実際に使ってみる           ここまでで紹介したレイアウトタグや、各            設定属性を実際に使ってみてください。        ここまで紹介したレイアウトのサンプルは         Ykmjuku005でみることができ...
中級者向け                電卓アプリ(再)             以前作成した電卓アプリを改造し、           もっと立派な電卓に仕上げてみましょう。                      電卓(再)のサンプルは ...
イベント処理は?           続きは夜子まま塾オンライン(無料)にて                毎週水曜日夜10:30∼11:00                 (都合によりない場合もあります)                  ...
Upcoming SlideShare
Loading in …5
×

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

9,216 views

Published on

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

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

No Downloads
Views
Total views
9,216
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Now Loading. Please Wait ... Twitter @yokmama Androidの画面デザイン③ 夜子まま塾 講義9(レイアウトの基本 レイアウト編) Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  2. 2. 自己紹介 氏名   :寺園聖文(てらぞの まさふみ) 肩書   :株式会社Re:Kayo-System 代表取締役社長 活動拠点 :神戸近郊∼日本→海外行きたい 著書   :「10日でおぼえるAndroidアプリ開発入門教室」著(翔泳社)       「HTML5によるAndroidアプリ開発入門」監修(日経BP) アプリ  :「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等 好きなもの:アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環 嫌いなもの:とくになし 最近のテーマ:電子工作、運動すること、英語 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  3. 3. レイアウトタグ 画面デザインをする際、それぞれのボタンや テキスト等の位置を決定するためにはレイア ウトを使う必要があります。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  4. 4. レイアウトの必要性 隙間を少し開けたい Button このように画面にボタンを置く場 合、 Button Buttonを画面の中心に置くのか? それとも右上におくのか? 隙間はどれぐらい?といったこと を設定する必要がある。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  5. 5. マルチデバイス対応 部品の配置について考える場合。もっとも重 要なのはちゃんと意図した通りに表示される ことです。 Android端末は複数のデバイスタイプが存在 するためそれは容易なことではありません。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  6. 6. 固定の配置だと 70ピクセル 70ピクセル 50ピクセル 50ピクセル Button Button 左から50ピクセル 上から70ピクセルでちょうど真ん中に 真ん中ではなくなる なった。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  7. 7. 例えば中心の場合 Button どれに対して中心にするのか? 画面全体なのか、左上の領域な Button のか? ということを決めるだけでよい はず。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  8. 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. 9. レイアウトタグとは このようにレイアウトタグは、 内包する子タグの配置を設定す るためのタグです。 レイアウトタグには5つの種類 があり、それぞれを駆使して画 面デザインを行います。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  10. 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. 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. 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. 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. 14. LinearLayoutと RelativLayoutの使い分け 横 縦 横 LineaLayout RelativeLayout 横と縦を複数組み合わせるようなレイアウトは RelativeLayoutのほうが構成がシンプルになる Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. wrap_contentと match_parent wrap_content あいうえお 余白があっても、文字の大きさ に合わせた大きさになる。 match_parent あいうえお 余白を全て使った大きさになる Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  26. 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. 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. 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. 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. 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. 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. 32. android:layout_marginと android:padding layout_marginとpaddingは隙 間を設定する属性です。 Text Text margin属性によって余白を作る padding属性によって内側に余白を作る Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  33. 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. 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. 35. marginとpaddingの違い marginは自身と他の部品あるいは親との距離を設 定する属性であるため、内包するべき親に依存して います。 一方paddingはそれ自身に設定するため親は不要で すが、背景や外観のある部品は形状が変形するので 注意が必要です。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  36. 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. 37. 実際に使ってみる ここまでで紹介したレイアウトタグや、各 設定属性を実際に使ってみてください。 ここまで紹介したレイアウトのサンプルは Ykmjuku005でみることができます。 http://bit.ly/w1dJr1 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  38. 38. 中級者向け 電卓アプリ(再) 以前作成した電卓アプリを改造し、 もっと立派な電卓に仕上げてみましょう。 電卓(再)のサンプルは ykmjuku006でみることができます。 http://bit.ly/wrjJxv Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  39. 39. イベント処理は? 続きは夜子まま塾オンライン(無料)にて 毎週水曜日夜10:30∼11:00 (都合によりない場合もあります) 夜子まま塾 http://bit.ly/wTjjix GoogleID:101190223376062765723 上記アカウントをサークルに追加していると、 ハングアウトのお誘いが届きます。 是非ご参加ください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日

×