マツ◯の知らない android.support.v7.widget.AppCompatButton の世界（ディレクターズ・カット版）

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

Button を大量に配置すると、画像ありの ImageView で同じことをするよりも描画に時間が掛かったという内容です。

動画は https://vimeo.com/177723431 にアップロードしました。

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

Transcript

1. Ϛπ̋ͷ஌Βͳ͍ android.support.v7.widget.AppCompatButton ͷੈք umeda.apk #2
 2016 ೥ 8 ݄ 5 ೔ʢۚʣ 1
2. ͓඼ॻ͖ 1. ࣗݾ঺հ 2. Button ͷ௒ৗݱ৅ʹ͍ͭͯ ⚡ 3. ݕূ VTR 4. ૯·ͱΊ
3. 
 ⚠️ WARNING ⚠
 ※ umeda.apk #1 Ͱͷ LT ࢿྉ͕
 ਵॴͰ࢖͍ճ͞Ε͍ͯ·͢
4. ڮ౓ ๎໻ 62.7 1.83 800 26 26 1 ͸͠Ͳɹͱ΋΍ Android ΞϓϦ
 ΤϯδχΞ
5. өըʰԿऀʱຊฤʹ
 ө͍ͬͯΔ͔΋ʁ 2016 ೥ 10 ݄ 15 ೔ʢ౔ʣ
 શࠃҰ੪ެ։ʂ 5 ਓͷେֶੜ͕ब৬׆ಈΛ ௨ͯࣗ͠෼͕“Կऀ”͔Λ
 ໛ࡧ͢Δ࢟Λඳ͍ͨ࡞඼ ※ 2016 ೥ 3 ݄ 11 ೔ʢۚʣ
 Ξϝʔόχϡʔεˍ
 Yahoo! χϡʔε ΑΓ 5
6. ຊ୊ umeda.apk #1 Ͱͷ LT ༻
 εϥΠυ࡞੒࣌ʹ ListView ͷηϧʹ Button Λෳ਺ݸ
 ೖΕΔͱ Android 6.0 Ͱ
 εΫϩʔϧ͕ҟ༷ʹ
 ॏ͘ͳΔؾ͕ͨ͠ 6
7. ૣ଎ݕূͯ͠ΈΑ͏ ಉ͡ॎԣαΠζͰ̋౳෼ͨ͠ϨΠΞ΢τΛ
 Button ͱ TextView ͱ ImageView Ͱ࡞੒͢Δ ͦΕΛ ViewHolder ύλʔϯΛར༻ͨ͠ ListView ͷ
 ηϧͱͯ͠࢖༻ʢRecyclerView ͸ษڧதʣ Hierarchy Viewer ͰϨΠΞ΢τશମͷඳը࣌ؒΛܭଌ ⏳ ࣮ࡍʹεΫϩʔϧͯ͠ॏ͞Λ֬ೝ .↕ 7
8. Hierarchy Viewer ͱ͸ʁ ϨΠΞ΢τඳըʹ͔͔Δ
 ࣌ؒΛදࣔͯ͘͠ΕΔ Android Device Monitor
 ͔Β࢖༻Մೳ ⭕ ࣮୺຤Ͱ࢖༻͢Δʹ͸Ұखؒඞཁ http://vividcode.hatenablog.com/ entry/android-app/tools/ hierarchy-viewer 8
9. ؀ڥ MacBook Pro (2014)  Android Studio 2.1.1 ΤϛϡϨʔλ 480×800 hdpi (Nexus One) Android 6.0 (x86_64) 9
10. 3 Button 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">
 
 <android.support.v7.widget.AppCompatButton
 android:id="@+id/split_5_1"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatButton
 android:id="@+id/split_5_2"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatButton
 android:id="@+id/split_5_3"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatButton
 android:id="@+id/split_5_4"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatButton
 android:id="@+id/split_5_5"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 </LinearLayout> 10
11. 3 Button 5 ౳෼
 ܭଌ݁Ռ (߹ܭ 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 11
12. 4 TextView 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">
 
 <android.support.v7.widget.AppCompatTextView
 android:id="@+id/split_5_1"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatTextView
 android:id="@+id/split_5_2"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatTextView
 android:id="@+id/split_5_3"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatTextView
 android:id="@+id/split_5_4"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatTextView
 android:id="@+id/split_5_5"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 </LinearLayout> 12
13. 4 TextView 5 ౳෼ ܭଌ݁Ռ (߹ܭ 75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.059 ms 0.499 ms 0.690 ms 1.248 ms 2 ճ໨ 0.034 ms 0.553 ms 2.553 ms 3.140 ms 3 ճ໨ 0.036 ms 0.869 ms 1.496 ms 2.401 ms 4 ճ໨ 0.040 ms 0.672 ms 1.344 ms 2.056 ms 5 ճ໨ 0.038 ms 0.528 ms 2.341 ms 2.907 ms ฏۉ 0.041 ms 0.624 ms 1.685 ms 2.350 ms 13
14. 5 ImageView 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">
 
 <android.support.v7.widget.AppCompatImageView
 android:id="@+id/split_5_1"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatImageView
 android:id="@+id/split_5_2"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatImageView
 android:id="@+id/split_5_3"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatImageView
 android:id="@+id/split_5_4"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 
 <android.support.v7.widget.AppCompatImageView
 android:id="@+id/split_5_5"
 android:layout_width="0dp"
 android:layout_height="@dimen/height_button"
 android:layout_weight="1" />
 </LinearLayout> 14
15. 5 ImageView 5 ౳෼ ܭଌ݁Ռ (߹ܭ 75 views) Measure Layout Draw ߹ܭ 1 ճ໨ 0.053 ms 0.571 ms 2.813 ms 3.437 ms 2 ճ໨ 0.036 ms 0.265 ms 3.194 ms 3.495 ms 3 ճ໨ 0.034 ms 0.198 ms 2.949 ms 3.181 ms 4 ճ໨ 0.036 ms 0.787 ms 2.660 ms 3.483 ms 5 ճ໨ 0.037 ms 0.341 ms 3.290 ms 3.668 ms ฏۉ 0.039 ms 0.432 ms 2.981 ms 3.452 ms 15
16. Button & ͦͷଞ 5 ౳෼
 ඳը଎౓·ͱΊʢAndroid 6.0ʣ Button ΋ TextView ΋ ImageView ΋ಉ͡Α͏ͳ ඳը଎౓ ⏲ ListView ͷεΫϩʔϧ΋ 3 ͭڞʹαΫαΫಈ͘ Button TextView ImageView ߹ܭ࣌ؒͷฏۉ 2.677 ms 2.350 ms 3.452 ms 16
17. Button ͱ ImageView 30 ౳෼ Ͱݕূͯ͠ΈΔ ؀ڥ Android 6.0 ΤϛϡϨʔλʢ480 × 800ʣ 17
18. 3 Button 30 ౳෼
 ܭଌ݁Ռʢ߹ܭ 350 viewsʣ Measure Layout Draw ߹ܭ 1 ճ໨ 0.040 ms 2.768 ms 10.358 ms 13.166 ms 2 ճ໨ 0.036 ms 2.056 ms 10.896 ms 12.988 ms 3 ճ໨ 0.036 ms 2.254 ms 11.060 ms 13.350 ms 4 ճ໨ 0.032 ms 1.951 ms 10.099 ms 12.082 ms 5 ճ໨ 0.039 ms 3.119 ms 16.271 ms 19.429 ms ฏۉ 0.037 ms 2.430 ms 11.737 ms 14.204 ms 18
19. 4 ImageView 30 ౳෼
 ܭଌ݁Ռʢ߹ܭ 350 viewsʣ Measure Layout Draw ߹ܭ 1 ճ໨ 0.039 ms 0.575 ms 6.869 ms 7 .483 ms 2 ճ໨ 0.043 ms 0.982 ms 6.689 ms 7 .714 ms 3 ճ໨ 0.037 ms 0.463 ms 6.016 ms 6.516 ms 4 ճ໨ 0.032 ms 0.531 ms 5.942 ms 6.505 ms 5 ճ໨ 0.038 ms 0.645 ms 6.522 ms 7 .205 ms ฏۉ 0.038 ms 0.639 ms 6.408 ms 7 .085 ms 19
20. Button ͱ ImageView 30౳෼
 ඳը଎౓·ͱΊʢAndroid 6.0ʣ ਺஋తʹ෼͔Γ΍͍݁͢Ռ͕ग़ͨ ImageView ͸ Jake Wharton ઌੜͷ Picasso Λ࢖༻͢Δͱ͍͏
 ϋϯσΟΩϟοϓΛ΋Ζͱ΋ͤͣϓϨʔϯͷ Button ʹඳը଎౓Ͱ ѹউ͢Δల։ʹ ࣮ࡍͷεΫϩʔϧ΋ ImageView ͷํ͕ߴ଎ Button ImageView ߹ܭ࣌ؒͷฏۉ 14.204 ms 7 .085 ms 20
21. ৭ʑͱࢼߦࡨޡͯ͠Έͯͷ݁࿦
 ʮAndroid ͷෆࢥٞݱ৅ʁʯ Android 6.0 & 5.0 Ͱ ListView ͷ
 ηϧʹ Button Λෳ਺ೖΕΔͱ
 ٸܹʹεΫϩʔϧ͕ॏ͘ͳΔ ࣮୺຤ (Nexus 7) Ͱ͸ Button 4 ݸ໨ ͔Β༷ࢠ͕͓͔͘͠ͳΓ࢝ΊΔ Button ͕ηϧʹ 4 ݸҎ্ೖΔ
 σβΠϯ͸௝͍͠ͱࢥ͏ͷͰ
 ৺഑ͳ͍͞ʂ 21
22. Android 4.0 ࣮୺຤ʹͯ ListView ͷ
 ηϧ಺ʹෳ਺ͷ Button Λ഑ஔ͢Δͱ Android 4.0.4 (1,280 × 720) εΫϩʔϧͯ͠΋ͦΕ΄Ͳ
 ಈ͖͕ॏ͘ͳ͍ͬͯΔΑ͏ͳ
 ײ͡͸͠ͳ͔ͬͨ TextView, ImageView Λ
 ೖΕͨ৔߹ͱಉ͘͡Β͍ ※ 4.0 ͷΤϛϡϨʔλͰ͸ Button 30 ౳෼ͷඳը࣌ؒ͸ଌఆෆՄͰͨ͠ 22
23. ListView ͷηϧ಺ʹ ImageView 30 ݸ & Button 30 ݸͷൺֱಈը࡞੒ 1. λʔϛφϧ͔Β adb shell screenrecord /sdcard/ video.mp4 Λ࣮ߦͯ͠୺຤ͷը໘Λ࿥ը͢Δ 2. λʔϛφϧ͔Β adb shell input touchscreen swipe x1 y1 x2 y2 Λ࣮ߦͯ͠ਖ਼֬ʹಉ͡εΫϩʔ ϧΛ࣮ࢪ͢Δ 3. iMovie ͷʮεϓϦοτεΫϦʔϯʯͰಈըΛ 2 ͭฒ ΂ͨ΋ͷΛ 1 ͭͷಈըͱͯ͠อଘ͢Δ
24. ListView ͷηϧ಺ʹ ImageView 30 ݸ & Button 30 ݸͷൺֱಈը
25. ૯·ͱΊ
 ListView ಺ͷ Button ໰୊ ListView ͷηϧʹ Button Λෳ਺ݸೖΕΔͱ
 εΫϩʔϧ͕ڻҟతʹॏ͘ͳΔ݅ʢScrollView & RecyclerView Ͱ΋વΓʣ 1 ߦͷதʹೖΕͯ΋େৎ෉ͳ Button ͸ 3 ݸ·Ͱ > RecyclerView ͷηϧͷதʹϘλϯΛେྔʹ഑ஔ͢Δ
 σβΠϯΛ࡞Δ༧ఆ͕͋Δํ͸ Button Ҏ֎ͷ࢖༻Λ
 ݕ౼ͯ͠ΈͯԼ͍͞ ? 25
26. fin. 26
27. ௥ه 
 umeda.apk #2 LT ऴྃޙ ʮAndroid 5.0 Ͱ Button ͕ extends ͍ͯ͠Δ TextView ʹมߋ͕͋ͬͨͷͰॏ͘
 ͳͬͨͷͰ͸ͳ͍͔ʁʯ
 ͱ͍͏ݟղ͕͋Γ·ͨ͠ A