すまべんLite@関西#2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

すまべんLite@関西#2

on

  • 492 views

 

Statistics

Views

Total Views
492
Views on SlideShare
492
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

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

すまべんLite@関西#2 Presentation Transcript

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