android:layout_weight を使うとアプリが重くなるのか？（ディレクターズ・カット版）

umeda.apk #1 発表枠のライトニングトークで使用したスライドです ⬇︎
http://shibuya-apk.connpass.com/event/32869/

ViewGroup がネストしている状態で layout_weight を使用するとアプリが重くなります ⬇︎
https://developer.android.com/training/improving-layouts/optimizing-layout.html

実機の Android 端末に対して Hierarchy Viewer を使って View の階層構造を調べる ⬇︎
http://vividcode.hatenablog.com/entry/android-app/tools/hierarchy-viewer

Google I/O 2016 で ConstraintLayout が発表されたので
 LinearLayout とか使う人がいなくなるかも知れませんが 
LinearLayout の話です。

今回は前回の反省を踏まえて Keynote の発表者ノートを見ながら話せるよう設定してから LT を開始しました。

プロジェクターに接続後 Mac > システム環境設定 > ディスプレイ > ミラーリングのチェックを OFF にすることを忘れずに！OFF にしたらそのまま Keynote の「▶︎」をクリック！

続篇のスライド ⬇︎
「続・android:layout_weight を使うとアプリが重くなるのか？」
https://speakerdeck.com/84d010m08/sok-android-layout-weight-woshi-utoapurigazhong-kunarufalseka

Transcript

1. android:layout_weight Λ ࢖͏ͱΞϓϦ͕ॏ͘ͳΔͷ͔ʁ umeda.apk #1
 2016 ೥ 6 ݄ 17 ೔ʢۚʣ 1
2. ͱͯ΋େࣄͳ௥ه େ੾Ͱ͢ʂ
3. 2016/06/17 umeda.apk #1 LT ऴྃޙ layout_weight Λ࢖༻ͯ͠ඳը͕࣌ؒ஗͘ͳΔͷ͸ ViewGroup ͕ωετ͍ͯ͠Δ৔߹Ͱ͋Δ͜ͱΛڭ͍͑ͯ ͖ͨͩ·ͨ͠ʢ2 ճܭࢉ͞ΕΔʣ ΞϓϦΛ࡞Δ্Ͱ͸ ViewGroup Λωετͤ͞ͳ͍͜ͱ ͕๬·͍͠ͷͰࠓճͷ layout_weight ͷݕূ͸શͯ 1 ֊ ૚ͷ LinearLayout Ͱ࣮ࢪ͍ͯ͠·ͨ͠
 ʢViewGroup ωετ͸ߋʹඳը࣌ؒΛ஗ͯ͘͠͠·͏ʣ
4. umeda.apk #2
 2016 ೥ 8 ݄ ։࠵ʢ༧ఆʣ ࣍ճͷ umeda.apk #2 Ͱ LT Ϧϕϯδ࿮Λ
 ֬อ͍͖ͯͨͩ͠·ͨ͠ ଓἫͷ࿩ͰΑ͚Ε͹͓ئ͍͠·͢ " ʰ(ViewGroup Λωετ͔ͤͯ͞Β) layout_weight Λ࢖ͬͯΈͨʱ
5. ௥هऴྃ ҎԼ LT Ͱ࢖༻ͨ͠εϥΠυͰ͢
6. ࣗݾ঺հ ڮ౓๎໻ʢ͸͠Ͳͱ΋΍ɺ1990 ೥ 7 ݄ 15 ೔ - ʣ 2014 ೥Λڥʹۙ୅ͷϓϦϯτγʔϧػ
 ʹ͍ͭͯৄ͘͠ͳΓͭͭ͋Γ·͢ ⭐ ࠷ۙϋϚ͍ͬͯΔΞϓϦ͸ɺ
 ϑϦϡʔ ͷʮϐΫτϦϯΫʯͰ͢ 6
7. өըʰԿऀʱຊฤʹ
 ݟ੾Ε͍ͯΔ͔΋ʁ 2016 ೥ 10 ݄ 15 ೔ʢ౔ʣ
 શࠃҰ੪ެ։ʂ ग़ԋɿࠤ౻ ݈ɹ༗ଜՍ७
 ೋ֊ಊ;Έɹੁాকᏻ
 Ԭాকੜɹࢁా޹೭ ※ 2016 ೥ 3 ݄ 11 ೔ʢۚʣ
 Ξϝʔόχϡʔεˍ
 Yahoo! χϡʔε ΑΓ 7
8. ൃද಺༰
 LinearLayout ͷ layout_weight Λ࢖͏ͱΞϓϦ͕ॏ͘ͳΔͷ͔ʁ 8
9. Google I/O 2016 ʹͯ ConstraintLayout ͕
 ൃද͞Ε·ͨ͠ ͦΕʹΑΓ LinearLayout
 ͳͲͷݹࢀ ViewGroup ͨͪ
 ͸ΦϫίϯʹͳΔͷ͔ʁ ਖ਼ࣜ൛͸ະͩϦϦʔε͞Εͯ
 ͍ͳ͍ͷͰ LinearLayout ͸
 ΪϦΪϦݱ໾͔΋ʁ 9
10. Android Developers ʰϨΠΞ΢τ֊૚ͷ࠷దԽʱ https:// developer.android.com/ training/improving-layouts/ optimizing-layout.html ʮ layout_weight ͸ϨΠΞ΢τ ͷඳը଎౓Λ஗ΒͤΔʯతͳ ͜ͱ͕ॻ͔Ε͍ͯΔ
 10 ViewGroup ͕ωετ͍ͯ͠Δ
 ৔߹ʹ஗Ε·͢ʢ௥هʣ
11. ຊ౰ͳͷ͔
 ૣ଎ݕূͯ͠ΈΑ͏ layout_weight Λ࢖͏ํ๏ͱଞͷํ๏Ͱ
 ݟͨ໨͕ಉ͡ϨΠΞ΢τΛ࡞੒ ͦΕΛ ListView ͷηϧͱͯ͠࢖༻
 ʢRecyclerView ͸ษڧதʣ Hierarchy Viewer ͰϨΠΞ΢τશମͷඳը࣌ؒΛܭଌ ⏳ ࣮ࡍʹεΫϩʔϧͯ͠ॏ͞Λ֬ೝ ,↕ 11
12. Hierarchy Viewer ͱ͸ʁ ϨΠΞ΢τඳըʹ͔͔Δ
 ࣌ؒΛදࣔͯ͘͠ΕΔ Android Device Monitor
 ͔Β࢖༻Մೳ ⭕ ࣮୺຤Ͱ࢖༻͢Δʹ͸Ұखؒඞཁ http://vividcode.hatenablog.com/ entry/android-app/tools/ hierarchy-viewer 12
13. ؀ڥ MacBook Pro (2014)  Android Studio 2.1.1 ΤϛϡϨʔλ 480×800 hdpi (Nexus One) Android 6.0 (x86_64) 13
14. Button Λ ԣʹ 5 ౳෼ͨ͠
 ϨΠΞ΢τΛ࡞੒
 ‑
 ඳը࣌ؒΛܭଌ ※ Button ͷߴ͞͸ wrap_content 14 ˞ 1 ߦʹ Button ͕ 5 ݸೖͬͨ ListView ͷਤ
15. 1 LinearLayout (layout_weight) 
 5 ౳෼ ιʔείʔυˍը໘ <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 
 <Button
 android:id="@+id/weight_5_split_1"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1" />
 
 <Button
 android:id="@+id/weight_5_split_2"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1" />
 
 <Button
 android:id="@+id/weight_5_split_3"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1" />
 
 <Button
 android:id="@+id/weight_5_split_4"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1" />
 
 <Button
 android:id="@+id/weight_5_split_5"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1" />
 </LinearLayout> 15
16. 1 LinearLayout (layout_weight)
 ܭଌ݁Ռ (75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.036 ms 0.676 ms 1.585 ms 2.297 ms 2 ճ໨ 0.031 ms 0.411 ms 1.557 ms 1.999 ms 3 ճ໨ 0.033 ms 0.710 ms 2.825 ms 3.568 ms 4 ճ໨ 0.038 ms 0.525 ms 2.794 ms 3.357 ms 5 ճ໨ 0.037 ms 0.592 ms 1.532 ms 2.161 ms ฏۉ 0.035 ms 0.583 ms 2.059 ms 2.677 ms 16
17. 2 LinearLayout (ԣ෯Λ dp ࢦఆ)
 5 ౳෼ ιʔείʔυˍը໘ <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 
 <Button
 android:id="@+id/size_5_split_1"
 android:layout_height="wrap_content"
 android:layout_width="@dimen/size_5_split"/>
 
 <Button
 android:id="@+id/size_5_split_2"
 android:layout_height="wrap_content"
 android:layout_width="@dimen/size_5_split" />
 
 <Button
 android:id="@+id/size_5_split_3"
 android:layout_height="wrap_content"
 android:layout_width="@dimen/size_5_split" />
 
 <Button
 android:id="@+id/size_5_split_4"
 android:layout_height="wrap_content"
 android:layout_width="@dimen/size_5_split" />
 
 <Button
 android:id="@+id/size_5_split_5"
 android:layout_height="wrap_content"
 android:layout_width="@dimen/size_5_split" />
 </LinearLayout> 17
18. 2 LinearLayout (ԣ෯Λ dp ࢦఆ) ܭଌ݁Ռ (75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.040 ms 0.351 ms 2.081 ms 2.472 ms 2 ճ໨ 0.036 ms 0.362 ms 2.570 ms 2.968 ms 3 ճ໨ 0.033 ms 0.231 ms 2.046 ms 2.310 ms 4 ճ໨ 0.041 ms 0.220 ms 1.413 ms 1.674 ms 5 ճ໨ 0.033 ms 0.180 ms 1.362 ms 1.575 ms ฏۉ 0.037 ms 0.269 ms 1.894 ms 2.200 ms 18
19. 3 PercentRelativeLayout
 5 ౳෼ ιʔείʔυˍը૾ <?xml version="1.0" encoding="utf-8"?>
 <android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <Button
 android:id="@+id/percent_5_split_button1"
 android:layout_height="wrap_content"
 app:layout_widthPercent="20%" />
 
 <Button
 android:id="@+id/percent_5_split_button2"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@id/percent_5_split_button1"
 app:layout_widthPercent="20%" />
 
 <Button
 android:id="@+id/percent_5_split_button3"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@id/percent_5_split_button2"
 app:layout_widthPercent="20%" />
 
 <Button
 android:id="@+id/percent_5_split_button4"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@id/percent_5_split_button3"
 app:layout_widthPercent="20%" />
 
 <Button
 android:id="@+id/percent_5_split_button5"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@id/percent_5_split_button4"
 app:layout_widthPercent="20%" />
 </android.support.percent.PercentRelativeLayout> 19
20. 3 PercentRelativeLayout ܭଌ݁Ռ (75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.061 ms 0.574 ms 1.344 ms 1.979 ms 2 ճ໨ 0.033 ms 0.678 ms 1.525 ms 2.236 ms 3 ճ໨ 0.032 ms 0.663 ms 2.542 ms 3.237 ms 4 ճ໨ 0.036 ms 0.774 ms 1.334 ms 2.144 ms 5 ճ໨ 0.037 ms 0.804 ms 1.483 ms 2.324 ms ฏۉ 0.040 ms 0.699 ms 1.645 ms 2.384 ms 20
21. Button 5 ౳෼
 ·ͱΊʢAndroid 6.0ʣ ޡࠩͷൣғ
 1 ճͷଌఆ஋Ͱൺֱ͢Δͱ݁Ռ͕มΘͬͯ͠·͏ ΤϛϡϨʔλͱ࣮୺຤ (Nexus 7) ͰͦΕͧΕεΫϩʔϧͤͯ͞Έͨ
 ͱ͜Ζɺҧ͍͕͋Δ͔͸ඍົͰ֬৴͕࣋ͯͳ͍ ,↕
 அݴͰ͖ͳ͍͕ layout_weight ͷํ͕ۃʑ͔ᷮʹॏ͍͔΋ʢʁʣ layout_weight ԣ෯Λ dp ࢦఆ PercentRelative
 Layout ߹ܭ࣌ؒͷฏۉ 2.677 ms 2.200 ms 2.384 ms 21
22. ࢼ͞ΕΔ API Ϩϕϧᶸ14ᶹ͜ͱ Android 4.0 (Ice Cream Sandwich) ʹͯ Button Λԣʹ 5 ౳෼ͨ͠ϨΠΞ΢τੜ੒࣌ؒΛܭଌ 22
23. 1 LinearLayout (layout_weight)
 ܭଌ݁Ռ (75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.321 ms 15.032 ms 32.163 ms 47 .518 ms 2 ճ໨ 0.279 ms 18.462 ms 34.582 ms 53.323 ms 3 ճ໨ 0.389 ms 20.662 ms 37 .069 ms 58.120 ms 4 ճ໨ 0.292 ms 18.530 ms 33.410 ms 52.232 ms 5 ճ໨ 0.424 ms 19.468 ms 34.458 ms 54.350 ms ฏۉ 0.341 ms 18.431 ms 34.336 ms 53.108 ms 23
24. 2 LinearLayout (ԣ෯Λ dp ࢦఆ) ܭଌ݁Ռ (75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.523 ms 6.130 ms 46.909 ms 53.562 ms 2 ճ໨ 0.254 ms 6.254 ms 38.828 ms 45.336 ms 3 ճ໨ 0.431 ms 11.698 ms 36.662 ms 48.791 ms 4 ճ໨ 0.281 ms 6.497 ms 32.443 ms 39.221 ms 5 ճ໨ 0.437 ms 8.165 ms 33.820 ms 42.422 ms ฏۉ 0.385 ms 7 .749 ms 37 .732 ms 45.866 ms 24
25. 3 PercentRelativeLayout ܭଌ݁Ռ (75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.271 ms 17 .113 ms 34.428 ms 51.812 ms 2 ճ໨ 0.278 ms 15.257 ms 41.658 ms 57 .193 ms 3 ճ໨ 0.298 ms 18.331 ms 38.295 ms 56.924 ms 4 ճ໨ 0.354 ms 16.290 ms 39.897 ms 56.541 ms 5 ճ໨ 0.310 ms 15.593 ms 40.816 ms 56.719 ms ฏۉ 0.302 ms 16.517 ms 39.019 ms 55.838 ms 25
26. Button 5 ౳෼
 ·ͱΊʢAndroid 4.0ʣ ޡࠩͷൣғʢʁʣ
 1 ճͷଌఆ஋Ͱൺֱ͢Δͱ݁Ռ͕มΘͬͯ͠·͏ ΤϛϡϨʔλͱ࣮୺຤ͰͦΕͧΕεΫϩʔϧͤͯ͞Έͨͱ͜Ζɺ
 ҧ͍͕͋Δ͔͸ඍົͰ֬৴͕࣋ͯͳ͍ ,↕
 அݴͰ͖ͳ͍͕ layout_weight ͷํ͕ۃʑ͔ᷮʹॏ͍͔΋ʢʁʣ layout_weight ԣ෯Λ dp ࢦఆ PercentRelative
 Layout ߹ܭ࣌ؒͷฏۉ 53.108 ms 45.866 ms 55.838 ms 26
27. ΋ͬͱϋοΩϦͱ
 ͕ࠩग़ͳ͍΋ͷ͔ʁ Button Λ 10 ౳෼ͯ͠Έͨ layout_weight ԣ෯ dp ࢦఆ Android 6.0 ΤϛϡϨʔλʢ480 × 800ʣ ࣌ؒܭଌ͸ 1 ྻ෼ͷΈ 27
28. 1 LinearLayout (layout_weight) 10 ౳෼ ܭଌ݁Ռ (11 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.117 ms 0.014 ms 1.306 ms 1.437 ms 2 ճ໨ 0.113 ms 0.024 ms 0.480 ms 0.617 ms 3 ճ໨ 0.114 ms 0.015 ms 0.390 ms 0.519 ms 4 ճ໨ 0.099 ms 0.009 ms 0.245 ms 0.353 ms 5 ճ໨ 0.124 ms 0.012 ms 0.267 ms 0.403 ms ฏۉ 0.113 ms 0.015 ms 0.538 ms 0.666 ms 28
29. 2 LinearLayout (ԣ෯ dp ࢦఆ) 10 ౳෼ ܭଌ݁Ռ (11 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.028 ms 0.015 ms 1.306 ms 1.349 ms 2 ճ໨ 0.022 ms 0.010 ms 0.423 ms 0.455 ms 3 ճ໨ 0.024 ms 0.010 ms 0.299 ms 0.333 ms 4 ճ໨ 0.021 ms 0.010 ms 0.385 ms 0.416 ms 5 ճ໨ 0.023 ms 0.011 ms 0.307 ms 0.341 ms ฏۉ 0.024 ms 0.011 ms 0.544 ms 0.579 ms 29
30. Button 10 ౳෼
 ·ͱΊʢAndroid 6.0ʣ ޡࠩͷൣғ
 1 ճͷଌఆ஋Ͱൺֱ͢Δͱ݁Ռ͕มΘͬͯ͠·͏ 10 ౳෼ͯ͠΋ϋοΩϦͱ͕ͨࠩ͠ग़ͳ͍ layout_weight ԣ෯Λ dp ࢦఆ ߹ܭ࣌ؒͷฏۉ 0.666 ms 0.579 ms 30
31. ΋ͬͱϋοΩϦͱ
 ͕ࠩग़ͳ͍΋ͷ͔ʁᶄ View Λ 120 ౳෼ͯ͠Έͨ layout_weight ԣ෯ dp ࢦఆ Android 6.0 ΤϛϡϨʔλʢ240 × 320ʣ ϨΠΞ΢τશମͷܭଌ͸ॏա͗ͯ ଌఆෆೳͳͷͰ 1 ྻ෼ͷΈ 31
32. 1 LinearLayout (layout_weight)
 120 ౳෼ ܭଌ݁Ռ (View) Measure Layout Draw ߹ܭ 1 ճ໨ 0.120 ms 0.018 ms 0.161 ms 0.299 ms 2 ճ໨ 0.073 ms 0.019 ms 0.167 ms 0.259 ms 3 ճ໨ 0.083 ms 0.018 ms 0.161 ms 0.262 ms 4 ճ໨ 0.078 ms 0.019 ms 0.194 ms 0.291 ms 5 ճ໨ 0.074 ms 0.021 ms 0.143 ms 0.238 ms ฏۉ 0.086 ms 0.019 ms 0.165 ms 0.270 ms 32
33. 2 LinearLayout (ԣ෯ dp ࢦఆ) 120 ౳෼ ܭଌ݁Ռ (View) Measure Layout Draw ߹ܭ 1 ճ໨ 0.058 ms 0.025 ms 0.354 ms 0.437 ms 2 ճ໨ 0.135 ms 0.017 ms 0.157 ms 0.309 ms 3 ճ໨ 0.050 ms 0.017 ms 0.164 ms 0.231 ms 4 ճ໨ 0.059 ms 0.018 ms 0.167 ms 0.244 ms 5 ճ໨ 0.056 ms 0.018 ms 0.523 ms 0.597 ms ฏۉ 0.072 ms 0.019 ms 0.273 ms 0.364 ms 33
34. View 120 ౳෼
 ·ͱΊʢAndroid 6.0ʣ ޡࠩͷൣғ
 1 ճͷଌఆ஋Ͱൺֱ͢Δͱ݁Ռ͕มΘͬͯ͠·͏ 120 ౳෼ͯ͠΋ϋοΩϦͱ͕ͨࠩ͠ग़ͳ͍ layout_weight ԣ෯Λ dp ࢦఆ ߹ܭ࣌ؒͷฏۉ 0.270 ms 0.364 ms 34
35. ૯·ͱΊ
 android:layout_weight layout_weight ͷ࢖༻ͰΞϓϦ͕ੌ·͘͡
 ॏ͘ͳΔͱ͍͏͜ͱ͸ͳ͔ͬͨ Hierarchy Viewer Ͱ͕ࠩ෼͔Βͳ͍΄Ͳ ެࣜυΩϡϝϯτʹॻ͔Ε͍ͯΔͷͰҰԠ layout_weight ͷ࢖༻͸߇͑ͨํ͕͍͍ͷ͔΋ʁ ඳըޮ཰ʹ͔ᷮͳ͕ࠩ͋Δ͔΋஌Εͳ͍ 35
36. fin. 36
37. ͦͷଞ Ϙπʹͨ͠εϥΠυ 37
38. Hierarchy Viewer ͕
 root Խ͠ͳͯ͘΋࣮ػͰ࢖͑Δͱ஌Βͣ……
39. ख࣋ͪͷ Nexus 7 (Android 6.0.1) Λ
 root Խͯ͠ΈΑ͏ʂ Լௐ΂΋ͦͦ͜͜ʹɺऔΓ׶͑ͣ
 ϒʔτϩʔμʔΛΞϯϩοΫ Nexus 7 ͕޻৔ग़ՙঢ়ଶʹ
 Ϧηοτ͞Ε·ͨ͠…… 
 ʢΑ͘ݟΔͱΞϯϩοΫͨ͠Β
 ॳظԽ͞ΕΔͱॻ͔Ε͍ͯΔʣ ʮroot Խ͸ࣗݾ੹೚Ͱʯ
 ʮจ௟Խʯ
 ͱ͍͏هࣄ͕ଟͯ͘ϏϏΔ 39
40. Android 6.0 ͷ Other Images Ͱඳը࣌ؒΛଌఆͰ͖ͳ͍ʢʁʣ
41. Android 6.0 ͷΤϛϡϨʔλ Android 4.0 ͱ Android 6.0 Ͱൺֱ͢Δʹ͋ͨΓ
 ΤϛϡϨʔλͷ System Image Λ Other Images Ͱ
 ἧ͑ͯΈΑ͏ͱ͠·͕ͨ͠ɺAndroid 6.0 Ͱ͸
 Hierarchy Viewer ͰϨΠΞ΢τੜ੒͕࣌ؒਖ਼͘͠ଌఆ Ͱ͖͍ͯͳ͍ʢʁʣΑ͏Ͱͨ͠ εϖοΫͷ௿͍ Android 6.0 ౥ࡌ୺຤͸ແͦ͞͏ͳͷ ͰɺΘ͟Θ͟ Other Images Ͱଌఆ͠ͳͯ͘΋͍͍ͱ ࢥ͍ Recommended ͷํΛ࢖༻͠·ͨ͠ 41
42. LinearLayout (layout_weight)
 Other Images Android 6.0 ܭଌ݁Ռ Measure Layout Draw ߹ܭ 1 ճ໨ 0.000 ms 10.000 ms 60.000 ms 70.000 ms 2 ճ໨ 0.000 ms 20.000 ms 50.000 ms 70.000 ms 3 ճ໨ 0.000 ms 20.000 ms 50.000 ms 70.000 ms 4 ճ໨ 5 ճ໨ ฏۉ 0.000 ms 16.667 ms 53.333 ms 70.000 ms 42
43. fin. 43