Head First XML Layout on Android
- 1. Head First XML Layout on Android Yuki ANZAI @yanzm BootCamp 27 Sep 2010
- 2. 自己绍介 あんざいゆき @yanzm 日本Androidの会 女子部副部長 デ部とかデザイン部とか。。。 Android アプリ開発者「Libraroid」 「BooXpress」「Wolfraroid」など
- 3. Question Android 経験値を教えてください！ 1. Android開発、まったくやったことないです 2. HelloWorldはやりました 3. バリバリ開発してます
- 4. Layout
- 5. View の配置
- 7. XMLで定義する利点 ● デザインとアクションの分離 ● コードの見通しがよくなる ● メンテナンスが楽 ＝ 変更しやすい ● 複雑なレイアウトをコードで生成するの はバグの元 ● 縦?横画面用のレイアウトが別々に定義 できる ● 再利用しやすい
- 8. レイアウト定义用齿惭尝の场所 res/layout/ の下 res/layout/flename.xml Eclipseで Android プロ ジェクトを作成すると、 main.xml が作られる
- 10. HelloWorld main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/ap k/res/android" android:orientation="vertical" android:layout_width="fll_parent" android:layout_height="fll_parent" > <TextView android:layout_width="fll_parent" android:layout_height="wrap_content" android:text="@string/hello" /> View </LinearLayout> ViewGroup View の配置を定義するのが ViewGroup
- 11. LayoutGroup
- 12. LayoutGroup LinearLayout RelativeLayout TableLayout FrameLayout (AbsoluteLayout) ListView GridView TabHost …
- 13. LayoutGroup の注意点 ? layout_width と layout_height は必須 ? LayoutGroup は入れ子にできる ? View には親のレイアウトパラメータを指定
- 14. LinearLayout
- 15. LinearLayout
- 16. LinearLayout <LinearLayout> <LinearLayout> <EditText /> <Button /> <Button /> <LinearLayout> <LinearLayout> <TextView /> <ImageView /> <LinearLayout> <LinearLayout> <ScrollView> <Button /> <TextView /> <Button /> <Button /> <ScrollView> <LinearLayout> <TextView /> <Button /> <Button /> <Button /> <Button />
- 17. LinearLayout ? fll_parent と wrap_content ? android:weight ? 画面を区切って配置する方法に最適 ? 複雑なレイアウトには不向き
- 18. fill_parent ?wrap_content ? android:height, android:width に指定 ? fll_parent : 親の幅一杯を指定 ? wrap_content : View の中のコンテンツ がちょうど入る大きさ fll_parent wrap_content
- 19. android:layout_weight ? LinearLayout で余った領域を割り当て る時の重みを指定 ? 高さ、幅の % 指定のようなもの wrap_content 左だけ layout_weight=”1” 両方 layout_weight=”1” 左 layout_weight=”2” 右 layout_weight=”1”
- 20. RelativeLayout
- 22. RelativeLayout <RelativeLayout> <Button /> : 中心 id=“@+id/center” centerInParent=“true” 親（この場合画面）の中心 <Button /> : 近畿 id=“@+id/kinki” layout_below=“@id/center” 中心の下 <Button /> : 中国 id=”@+id/chugoku” layout_toLeftOf=”@id/kinki” layout_alignTop=”@id/kinki” 近畿の左 <Button /> ...
- 23. よりよいレイアウトヘ
- 24. ここちよいレイアウト ? マージン、パディングを適切に設定 – android:layout_margin – android:padding – layout_margin は root View では使えない ? dipを使う！ – px を使ったピクセル指定はだめ
- 25. margin と padding layout_margin padding
- 26. dip vs px ? 上のボタン: 200 dip ? 下のボタン: 200 px padding ? dip なら、画面に対す る割合が同じ Nexus One HT-03A
- 27. フォーカスハンドリング ? キーボード、トラックボール操作を意識する ? 今どこにフォーカスがある？ ? スクロールバーにフォーカス – focusable=”true” – focusableInTouchMode=”true” ? フォーカスのリクエスト – <View> タグ内に <requestFocus /> を入れる 1画面に1つだけ – コードからリクエスト
- 28. マルチデバイス対応 ? nine-patch (img.9.png) ? maxHeight, maxWidth, minHeight, minWidth ? <dimen> – リソースとしてサイズを指定 – <dimen name=”listHeight”>64dip</dimen> – コードからsetWidth(width)など ? Not use absolute layout
- 29. nine-patch ? 拡大する領域を 1px で指定 ? sdk-dir/tools/draw9patch nine-patch not nine-patch
- 30. より开発をスムーズに
- 31. レイアウトの再利用 ? <include> タグ – <include layout="@layout/layout_resource”/> ? <merge> タグ – custom view を作るときに有用 – 最適化のため、view-tree のレベルを削減 ? VieｗStubを使う
- 32. <include> tag <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/ap k/res/android" android:orientation="vertical" android:layout_width="fll_parent" android:layout_height="fll_parent" > <EditText android:layout_width="fll_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fll_parent" android:layout_height="wrap_content" android:text="Button" /> <include layout="@layout/japanmap_layout" /> </LinearLayout>
- 33. ViewStub ? たまにしか使われない View に使う ? dumb and lightweight view ? dimension を持たない、何も描画しない ? layout fle の中では ViewStub で定義 ? 必要なときにコードから infate する
- 34. ViewStub <ViewStub // infate するための id android:id="@+id/stub_import" // infate したあと override する id android:infatedId="@+id/panel_import" // 置き換える layout fle android:layout="@layout/progress_overlay" /> infate() or visibility をセットする(とinfateされる) ((ViewStub) fndViewById(R.id.stub_import)) .setVisibility(View.VISIBLE); // or View importPanel = ((ViewStub)fndViewById(R.id.stub_import)) .infate();
- 35. 効果的なレイアウト ? ListViewの子要素のXML定義の注意点 – 何度も infate されるので簡素化 – LinearLayout の入れ子よりも RelativeLayout 1個で実現すべし <LinearLayout> <RelativeLayout> <ImageView /> <ImageView /> <LinearLayout> <TextView /> <TextView /> <TextView /> <TextView />
- 36. Summary ? XML でレイアウトを定義すると – メンテナンスが楽 – 再利用しやすい – 省エネにする手法がある ? ユーザーを意識したレイアウト – マージン、パディング – フォーカス – マルチデバイス対応