Recomendados
Más contenido relacionado
Similar a すまべんLite@関西#2
Similar a すまべんLite@関西#2 (19)
Más de Shin Ise
Más de Shin Ise (19)
すまべんLite@関西#2
- 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 を使ったコードの共有化 • ざっくりこんな感じでしか考えてないので、 進み⽅方次第で前後する可能性があります。
- 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のフレームみたいな考え⽅方です。
- 14. 今⽇日やること • レイアウトの作り⽅方 – LinearLayout と RelativeLayout – Gravity, Weight の指定 • Resources フォルダの構成 – 画像の取り扱いについて
- 16. 画⾯面をつくります！ • layout の Main.axml をひらきます。
- 17. Android アプリの画⾯面を作る • 枠となる ViewGroup (Layout) に ボタンやテキストなどを⼊入れていく。 • Layout は LinearLayout と RelativeLayout をよく使います。 – 伊勢は FrameLayout もちょいちょい使いますが、 どうやら少数派っぽい。 • 使いにくい＋融通聞かないだけで 概念念的にはBlendでやってるのとあまりかわりませ ん。
- 18. LinearLayout • 中に⼊入れたViewを、⼀一⽅方向に並べるもの。 – WPF 的にいえば StackPanel と同じ – 向きを縦・横に変えることができます。
- 23. ⼤大枠をつくります • LinearLayout (Vertical) をおきます
- 25. ⼤大枠をつくります • 真ん中においた RelativeLayout が、 画⾯面の⼤大きさによって広がるようにします。 RelativeLayoutをえらぶ Layoutタブをえらぶ Weight を 1 にする
- 26. Weight プロパティ • LinearLayout の中に⼊入っている View がもっている、レイアウト内での⼤大きさを決 める設定 • 指定されている項⽬目の値が均等割になるようにレ イアウトされる。 • 未設定の場合は、ビューそのものの⼤大きさが採⽤用
- 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 に指定して あります。 – 今回はひな形に含めてあります。
- 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切切るとか 繰り返してるとメンテナンスコストが⼤大変なことに
- 45. まとめ • Androidアプリの画⾯面作成の基本 – レイアウトXML – LinearLayout, RelativeLayout – Weight の指定 • Resources フォルダの Qualifier の指定 • 正しくリソースを取り扱って、 メンテナンスのしやすい Android アプリを！