すまべんLite@関⻄西 #02
Xamarin 2.0 で Android 開発⼊入⾨門シリーズ #2
伊勢  シン
2013/07/16(Tue) @Fenrir Inc. ⼤大阪本社
シリーズの⽬目標
•  Android アプリ開発の、現代の勘所を押さえる
– 画⾯面作成:Fragment、レイアウトXML
– リソースの⼊入れ⽅方
– リークの原因になりやすいコンテキストの取り扱い
– その他もろもろ
•  Xamari...
想定の対象者
•  これまで他のプラットフォームでそれなりに開発してて、
Androidアプリの開発をやってみたい⼈人
•  Javaに苦⼿手意識識があってAndroid開発に踏み出せ
なかった⼈人
•  本当のはじめての⼈人は、周りに聞きなが...
ターゲットプラットフォーム
•  Xamarin 2.0
– Xamarin Studio
– Android SDK
•  Android 4.0
– 最新の環境でやってみるというのが今回の⽬目的の⼀一
つなので。
– ⾼高速エミュレーター ...
スケジュール
•  全56回でじっくりまったりを予定
– #1 Activity/Fragmentのライフサイクル
– #2 画⾯面レイアウトとリソース管理理
– #3 画⾯面遷移・インテント
– #4  通信処理理・Twitter タイムライ...
前回のおさらい
•  おさらいというか、わかりづらかったところの、
説明やりなおしですが・・・。
•  前回はこんなことやりました
– Activity
– Fragment
Android アプリの基本構成
•  アプリは複数の画⾯面をもっています
– ウィンドウみたいなもの
•  画⾯面は「アクティビティ(Activity)」という単位で
表されます。
Activity の構成
•  Activity は、画⾯面の「枠」としてはたらきます。
– 画⾯面の開始、終了了、⼀一時停⽌止などが伝えられます。
– 別の Activity を起動すると、それまでの Activity は
「⼀一時停⽌止」し...
Activity の構成
•  Activity の中に表⽰示されるものは、
View とよばれる部品の組み合わせで作ります。
– ActivityはメインのViewを⼀一つもっています。
– ViewGroup という、
View を複数まと...
Activity の構成
•  Viewはプログラムで1こずつ作っていく⽅方法のほか
に、Layout XML を書くことによって⼀一括で作成
することができます。
– HTMLのように書くことができます。
– 実際の開発でも、基本的に UI ...
Fragment について
•  Android 3.0 でタブレットが出てくることによって、
Activity だけではタブレットとスマートフォンのアプリ
を同時に作ることが難しくなりました。
Fragment について
•  タブレット・スマホで画⾯面の内容を使い回せるよう、
Activity を直接使うのではなく、
Activity の中に Fragment というものを
作って、それをならべましょうということになりました。
– ...
Xamarin 2.0でAndroid開発⼊入⾨門 #2
画⾯面レイアウトとリソース管理理
今⽇日やること
•  レイアウトの作り⽅方
– LinearLayout と  RelativeLayout
– Gravity, Weight の指定
•  Resources フォルダの構成
– 画像の取り扱いについて
プロジェクトの準備
•  ひな形をダウンロードして開いてください。
– http://sdrv.ms/12CLs7p
•  今⽇日は、Resources の中を
メインで触ります。
画⾯面をつくります!
•  layout の  Main.axml をひらきます。
Android アプリの画⾯面を作る
•  枠となる  ViewGroup (Layout) に
ボタンやテキストなどを⼊入れていく。
•  Layout は  LinearLayout と  RelativeLayout
をよく使います。
–...
LinearLayout
•  中に⼊入れたViewを、⼀一⽅方向に並べるもの。
– WPF 的にいえば  StackPanel と同じ
– 向きを縦・横に変えることができます。
RelativeLayout
•  中に⼊入れたViewを、それぞれのViewの相対位
置で配置できるもの
– ボタン1の右側、10dipなどといった指定ができます。
画⾯面を作ってみましょう
•  何かしら写真の投稿画⾯面的なもの
画⾯面を作ってみましょう
•  何かしら写真の投稿画⾯面的なもの
スタンプのボタンは
ほかのボタンの2倍の⼤大きさ
写真は上下中央揃え
左右に若若⼲干のスペース
メインのエリアは解像度度
変わったら、拡縮する
テキスト⼊入⼒力力と送信ボタン
⽂...
⼤大枠をつくります
•  Main.axml のうえにあったものを消します。
⼤大枠をつくります
•  LinearLayout (Vertical) をおきます
⼤大枠をつくります
•  LinearLayout の中に、以下の3つをおきます。
– LinearLayout
(Horizontal)
– RelativeLayout
– LinearLayout
(Horizontal)
⼤大枠をつくります
•  真ん中においた  RelativeLayout が、
画⾯面の⼤大きさによって広がるようにします。
RelativeLayoutをえらぶ
Layoutタブをえらぶ
Weight を 1 にする
Weight プロパティ
•  LinearLayout の中に⼊入っている
View がもっている、レイアウト内での⼤大きさを決
める設定
•  指定されている項⽬目の値が均等割になるようにレ
イアウトされる。
•  未設定の場合は、ビューそ...
上のボタンを作ります
•  上に置いたLinearLayoutにボタンを3つおきます。
上のボタンを作ります
•  ボタンのLayoutプロパティを変更更します
width は 0dp
Weight は 2
Width や Height の指定
•  コントロールの⼤大きさは、Width / Height でセットしますが、
直接値を指定することは少ないです。
–  指定することもできるが、慣習的にあまりしない
•  以下の定数値を⼊入れることがほ...
上のボタンを作ります
•  横から、Weight が 2, 1, 1 になるように調整しま
す。
Weight 2
Weight 1 Weight 1
上のボタンを作ります
•  次に、ボタンのテキストを設定します
– Widget の Text から、⾍虫眼鏡のアイコンを選びます。
上のボタンを作ります
•  ここで選べるリソースは  Strings.xml に指定して
あります。
– 今回はひな形に含めてあります。
上のボタンを作ります
•  左から、スタンプ・編集・書込にします。
下のテキスト⼊入⼒力力を作ります
•  下の  LinearLayout に  
Plain Text の Text Field とボタンを追加します。
•  Text Field の  Weight を 1 にします。
•  Button の...
画像を表⽰示する
•  RelativeLayout に  ImageView をおきましょう。
画像を表⽰示する
•  ImageView のプロパティの  Src を開いて、
ひな形に⼊入っている sky を選択しましょう。
– 今の段階では上寄りに表⽰示されます。
画像を表⽰示する
•  RelativeLayout の中で位置を調整します
– Layout タブを開く
– Center In Parent にチェック
– Margin に 10dp を⼊入⼒力力します
Resourcesフォルダの構成
•  アプリ内で使う画像、⽂文字列列、各種データは
Resources フォルダに⼊入れます。
•  ⼊入れられるデータ
– drawable – 画像類
– layout – レイアウト定義
– values...
ResourcesフォルダのQualifier
•  フォルダの名前の末尾に、⾔言語・解像度度を
持たせて、アプリが動作している環境ごとに
画像などを切切り替えることができます。
•  たとえば、右の画像では、
drawable が 5 種類あ...
Qualifier の種類
•  ⾔言語
–  ja, en-US, fr など
•  画⾯面の向き・幅・⾼高さ
•  画⾯面の解像度度
–  mdpi, hdpi, xhdpi, xxhdpi など
•  APIレベル
–  v11 など
•...
dpi と  dp について
•  先ほどから出てる、dp や  mdpi などについて。
•  Android 端末は画⾯面解像度度も様々です。
–  ピクセルで指定すると、⾼高解像度度になったときにボタンが極
端に⼩小さくなったりする。
•...
画像リソースのdpi指定
•  画像は端末の解像度度ごとに、
以下のように分かれています。
– たとえば、mdpi で 100x100 の画像は、
xxhdpi では 300x300 の画像を⽤用意します。
– ひな形に⼊入っている、sky.p...
アンチパターン
•  環境で変わる値のハードコーディング
– コード内の定数化もあかん
(⾒見見られたくない値 (Consumer Secret など) は除く)
– テストとか⼀一時的なものならまだしも、
ずっと使うものはなるべくResour...
時間があれば…
•  もっと複雑なレイアウトをQ&A形式で…。
まとめ
•  Androidアプリの画⾯面作成の基本
– レイアウトXML
– LinearLayout, RelativeLayout
– Weight の指定
•  Resources フォルダの Qualifier の指定
•  正しくリ...
Upcoming SlideShare
Loading in...5
×

すまべんLite@関西#2

338

Published on

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

No Downloads
Views
Total Views
338
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

すまべんLite@関西#2

  1. 1. すまべんLite@関⻄西 #02 Xamarin 2.0 で Android 開発⼊入⾨門シリーズ #2 伊勢  シン 2013/07/16(Tue) @Fenrir Inc. ⼤大阪本社
  2. 2. シリーズの⽬目標 •  Android アプリ開発の、現代の勘所を押さえる – 画⾯面作成:Fragment、レイアウトXML – リソースの⼊入れ⽅方 – リークの原因になりやすいコンテキストの取り扱い – その他もろもろ •  Xamarin 2.0を使ってC#を⽣生かした開発 – Rxとかもろもろ (asyncまだ使えないっぽいので) – Java苦⼿手なあなたも⼤大丈夫 •  最終回では他PFとのソースコード共有を⽬目指す
  3. 3. 想定の対象者 •  これまで他のプラットフォームでそれなりに開発してて、 Androidアプリの開発をやってみたい⼈人 •  Javaに苦⼿手意識識があってAndroid開発に踏み出せ なかった⼈人 •  本当のはじめての⼈人は、周りに聞きながら。 •  僕も Android はちゃんと理理解できているわけじゃない ので、勉強しながらです。 –  ぼく本来は  iOS アプリエンジニアですし。 •  みんなでわかるまで話し合いながらじっくりやる、 「Lite」なシリーズを⽬目指しましょう。
  4. 4. ターゲットプラットフォーム •  Xamarin 2.0 – Xamarin Studio – Android SDK •  Android 4.0 – 最新の環境でやってみるというのが今回の⽬目的の⼀一 つなので。 – ⾼高速エミュレーター  (HAXM) は⼊入れておきたい。 •  さもなくば実機 •  これまでのAndoridエミュレータは遅すぎる
  5. 5. スケジュール •  全56回でじっくりまったりを予定 – #1 Activity/Fragmentのライフサイクル – #2 画⾯面レイアウトとリソース管理理 – #3 画⾯面遷移・インテント – #4  通信処理理・Twitter タイムラインビューワの開発 – #5  もっと Android らしいアプリに(Service/Alarm) – #6 MvvmCross  を使ったコードの共有化 •  ざっくりこんな感じでしか考えてないので、 進み⽅方次第で前後する可能性があります。
  6. 6. 前回のおさらい •  おさらいというか、わかりづらかったところの、 説明やりなおしですが・・・。 •  前回はこんなことやりました – Activity – Fragment
  7. 7. Android アプリの基本構成 •  アプリは複数の画⾯面をもっています – ウィンドウみたいなもの •  画⾯面は「アクティビティ(Activity)」という単位で 表されます。
  8. 8. Activity の構成 •  Activity は、画⾯面の「枠」としてはたらきます。 – 画⾯面の開始、終了了、⼀一時停⽌止などが伝えられます。 – 別の Activity を起動すると、それまでの Activity は 「⼀一時停⽌止」して、アクティビティスタックに⼊入ります。 •  Backキーで戻る、というのを実現できます
  9. 9. Activity の構成 •  Activity の中に表⽰示されるものは、 View とよばれる部品の組み合わせで作ります。 – ActivityはメインのViewを⼀一つもっています。 – ViewGroup という、 View を複数まとめる View を使って、 様々なコンポーネントをならべます。
  10. 10. Activity の構成 •  Viewはプログラムで1こずつ作っていく⽅方法のほか に、Layout XML を書くことによって⼀一括で作成 することができます。 – HTMLのように書くことができます。 – 実際の開発でも、基本的に UI は Layout XML で 書きます。
  11. 11. Fragment について •  Android 3.0 でタブレットが出てくることによって、 Activity だけではタブレットとスマートフォンのアプリ を同時に作ることが難しくなりました。
  12. 12. Fragment について •  タブレット・スマホで画⾯面の内容を使い回せるよう、 Activity を直接使うのではなく、 Activity の中に Fragment というものを 作って、それをならべましょうということになりました。 – HTMLのフレームみたいな考え⽅方です。
  13. 13. Xamarin 2.0でAndroid開発⼊入⾨門 #2 画⾯面レイアウトとリソース管理理
  14. 14. 今⽇日やること •  レイアウトの作り⽅方 – LinearLayout と  RelativeLayout – Gravity, Weight の指定 •  Resources フォルダの構成 – 画像の取り扱いについて
  15. 15. プロジェクトの準備 •  ひな形をダウンロードして開いてください。 – http://sdrv.ms/12CLs7p •  今⽇日は、Resources の中を メインで触ります。
  16. 16. 画⾯面をつくります! •  layout の  Main.axml をひらきます。
  17. 17. Android アプリの画⾯面を作る •  枠となる  ViewGroup (Layout) に ボタンやテキストなどを⼊入れていく。 •  Layout は  LinearLayout と  RelativeLayout をよく使います。 – 伊勢は  FrameLayout もちょいちょい使いますが、 どうやら少数派っぽい。 •  使いにくい+融通聞かないだけで 概念念的にはBlendでやってるのとあまりかわりませ ん。
  18. 18. LinearLayout •  中に⼊入れたViewを、⼀一⽅方向に並べるもの。 – WPF 的にいえば  StackPanel と同じ – 向きを縦・横に変えることができます。
  19. 19. RelativeLayout •  中に⼊入れたViewを、それぞれのViewの相対位 置で配置できるもの – ボタン1の右側、10dipなどといった指定ができます。
  20. 20. 画⾯面を作ってみましょう •  何かしら写真の投稿画⾯面的なもの
  21. 21. 画⾯面を作ってみましょう •  何かしら写真の投稿画⾯面的なもの スタンプのボタンは ほかのボタンの2倍の⼤大きさ 写真は上下中央揃え 左右に若若⼲干のスペース メインのエリアは解像度度 変わったら、拡縮する テキスト⼊入⼒力力と送信ボタン ⽂文字列列は リソースから読み込み
  22. 22. ⼤大枠をつくります •  Main.axml のうえにあったものを消します。
  23. 23. ⼤大枠をつくります •  LinearLayout (Vertical) をおきます
  24. 24. ⼤大枠をつくります •  LinearLayout の中に、以下の3つをおきます。 – LinearLayout (Horizontal) – RelativeLayout – LinearLayout (Horizontal)
  25. 25. ⼤大枠をつくります •  真ん中においた  RelativeLayout が、 画⾯面の⼤大きさによって広がるようにします。 RelativeLayoutをえらぶ Layoutタブをえらぶ Weight を 1 にする
  26. 26. Weight プロパティ •  LinearLayout の中に⼊入っている View がもっている、レイアウト内での⼤大きさを決 める設定 •  指定されている項⽬目の値が均等割になるようにレ イアウトされる。 •  未設定の場合は、ビューそのものの⼤大きさが採⽤用
  27. 27. 上のボタンを作ります •  上に置いたLinearLayoutにボタンを3つおきます。
  28. 28. 上のボタンを作ります •  ボタンのLayoutプロパティを変更更します width は 0dp Weight は 2
  29. 29. Width や Height の指定 •  コントロールの⼤大きさは、Width / Height でセットしますが、 直接値を指定することは少ないです。 –  指定することもできるが、慣習的にあまりしない •  以下の定数値を⼊入れることがほとんど –  wrap_content •  中に⼊入っているものがぴったり⼊入るよう調整 –  match_parent (fill_parent) •  ⼊入っているViewGroupの幅・⾼高さに合うように調整 •  fill_parent は古い設定値。 •  今回はWeightの計算に影響が出るため、0dpを指定する。 –  Weightで均等割するときは0dp指定するくらいのざっくりでも⼤大 丈夫かと。
  30. 30. 上のボタンを作ります •  横から、Weight が 2, 1, 1 になるように調整しま す。 Weight 2 Weight 1 Weight 1
  31. 31. 上のボタンを作ります •  次に、ボタンのテキストを設定します – Widget の Text から、⾍虫眼鏡のアイコンを選びます。
  32. 32. 上のボタンを作ります •  ここで選べるリソースは  Strings.xml に指定して あります。 – 今回はひな形に含めてあります。
  33. 33. 上のボタンを作ります •  左から、スタンプ・編集・書込にします。
  34. 34. 下のテキスト⼊入⼒力力を作ります •  下の  LinearLayout に   Plain Text の Text Field とボタンを追加します。 •  Text Field の  Weight を 1 にします。 •  Button の Text を送信にしましょう。
  35. 35. 画像を表⽰示する •  RelativeLayout に  ImageView をおきましょう。
  36. 36. 画像を表⽰示する •  ImageView のプロパティの  Src を開いて、 ひな形に⼊入っている sky を選択しましょう。 – 今の段階では上寄りに表⽰示されます。
  37. 37. 画像を表⽰示する •  RelativeLayout の中で位置を調整します – Layout タブを開く – Center In Parent にチェック – Margin に 10dp を⼊入⼒力力します
  38. 38. Resourcesフォルダの構成 •  アプリ内で使う画像、⽂文字列列、各種データは Resources フォルダに⼊入れます。 •  ⼊入れられるデータ – drawable – 画像類 – layout – レイアウト定義 – values – ⽂文字列列・定数等 •  Strings.xml はここに⼊入ってます。 – xml – XML – raw – 任意のデータ
  39. 39. ResourcesフォルダのQualifier •  フォルダの名前の末尾に、⾔言語・解像度度を 持たせて、アプリが動作している環境ごとに 画像などを切切り替えることができます。 •  たとえば、右の画像では、 drawable が 5 種類あります。 •  各フォルダに同じファイル名の ファイルがあります。 •  このような配置をすると実際に読み込むときに、 動作している端末の状態にあわせて読み込まれます。
  40. 40. Qualifier の種類 •  ⾔言語 –  ja, en-US, fr など •  画⾯面の向き・幅・⾼高さ •  画⾯面の解像度度 –  mdpi, hdpi, xhdpi, xxhdpi など •  APIレベル –  v11 など •  指定の順番にルールがある (下のリンクにある表の順番に指定する) http://developer.android.com/guide/topics/ resources/providing-resources.html#table2
  41. 41. dpi と  dp について •  先ほどから出てる、dp や  mdpi などについて。 •  Android 端末は画⾯面解像度度も様々です。 –  ピクセルで指定すると、⾼高解像度度になったときにボタンが極 端に⼩小さくなったりする。 •  実際に width や height を  px で指定するとわかる •  極端に⼤大きくなったり⼩小さくなったりしないよう、 画⾯面の解像度度ごとにリソースを指定したり、 画⾯面の解像度度に合わせてサイズが可変になるように なっています。 –  画⾯面の解像度度に合わせたピクセルが  dp (Density Independent Pixel–解像度度⾮非依存ピクセル)
  42. 42. 画像リソースのdpi指定 •  画像は端末の解像度度ごとに、 以下のように分かれています。 – たとえば、mdpi で 100x100 の画像は、 xxhdpi では 300x300 の画像を⽤用意します。 – ひな形に⼊入っている、sky.png をみてみましょう。 種類 倍率率率 主な機種 mdpi 1倍 Kindle Fire hdpi 1.5倍 Nexus 7 xhdpi 2倍 Galaxy Nexus xxhdpi 3倍 Galaxy S4
  43. 43. アンチパターン •  環境で変わる値のハードコーディング – コード内の定数化もあかん (⾒見見られたくない値 (Consumer Secret など) は除く) – テストとか⼀一時的なものならまだしも、 ずっと使うものはなるべくResourcesに分離離する。 – ⽂文字列列だけでなく、数値・⾊色などもも定義できる – ローカライズ増やすときに役に⽴立立つ •  やたらめったら Qualifier を使う – 特定端末でおかしいからlayoutのQualifier切切るとか 繰り返してるとメンテナンスコストが⼤大変なことに
  44. 44. 時間があれば… •  もっと複雑なレイアウトをQ&A形式で…。
  45. 45. まとめ •  Androidアプリの画⾯面作成の基本 – レイアウトXML – LinearLayout, RelativeLayout – Weight の指定 •  Resources フォルダの Qualifier の指定 •  正しくリソースを取り扱って、 メンテナンスのしやすい Android アプリを!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×