【省略版】AutoLayoutエラー診断所 ~発狂しないためのデバッグ手法~

2018/09/02 (日) iOSDC Japan 2018
作った資料フルはこちらから。
https://speakerdeck.com/akatsuki174/wan-quan-ban-autolayouterazhen-duan-suo-fa-kuang-sinaitamefalsetehatukushou-fa
その他関連資料はここらへんからたどれます。
http://akatsuki174.hatenablog.com/entry/20180820/1534723200

Transcript

1. Auto LayoutΤϥʔ਍அॴ ~ൃڰ͠ͳ͍ͨΊͷσόοάख๏~ @akatsuki174 iOSDC Japan 2018 2018/09/02(೔)
2. ࣗݾ঺հ
3. • ਢ౻ຘʢ@akatsuki174ʣ • גࣜձࣾZaim / iOSΤϯδχΞ • iOSDC Japan 2018 ίΞελοϑ ࠙਌ձͷ೔ຊञ ͷҰ෦͸ ϫγ͕બΜͩ
4. ࠓ೔ͷ಺༰
8. ͜Μͳ͓೰Έղܾ͠·͢ • Τϥʔग़ͯΔ͚ͲԿ͔ΒखΛ෇͚͍͍͔ͯΘ͔Βͳ͍ • ଞਓ͕࡞ͬͨϨΠΞ΢τͷվम͕ා͍ • ༏ઌ౓ͱ͔දࣔ/ඇදࣔͱ͔ෳࡶͰΘ͚͕Θ͔Βͳ͍ • σόοάख๏͕ϚϯωϦԽ͖ͯͯ͠ɺܹ͕ࢗ΄͍͠
9. ໨࣍
10. • ࣄྫͱͱ΋ʹσόοάख๏ΛֶͿ • ίϯιʔϧϩάಡΉܥ • ϏδϡΞϧ͔Β൑அ͢Δܥ • LLDB࢖͏ܥ • ղܾͷࢳޱΛݟ͚ͭΔίπ
11. ࠓ೔ͷܗࣜ
12. • ϥΠϒσόοΪϯάͰਐΊ·͢ • ͨ·ʹྫ͕ద੾͡Όͳ͍΍ͭ΋ɻڐͯ͠ɻ • εϥΠυࣗମ͸εΫγϣ෇͖Ͱ͍͋͛ͯ·͢ • αϯϓϧίʔυ • ໰୊ฤͱղ౴ฤ͕͋Γ·͢ • ղઆ͸iOSDCޙ΋௥Ճ͍͖ͯ͠·͢ • https://github.com/akatsuki174/AutoLayoutDebugSample ੒ޭͨ͠Β
    ഥखʂ ׬શ൛͸
    εϥΠυ໿ຕ
13. Let’s Debugging ٩( •̀ω•́)و
14. ίϯιʔϧϩάಡΉܥ
15. CASE 1. WarningΛؤுͬͯಡΉ αϯϓϧίʔυ
    8BSOJOH7JFXΑΓɻ
16. Warningൃੜ ͷϚʔδϯ
17. Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢
18. ্͔ΒॱʹϩάͷҙຯΛ௫΋͏ ʮಉ࣌ʹຬͨͤͳ੍͍໿͕͋ͬͨΑɻ ͨͿΜ͜ͷதͷগͳ͘ͱ΋1ͭͷ੍໿͕͍Βͳ͍΍͔ͭͩΒɺ ૝ఆ֎ͷ੍໿Λݟ͚ͭͯɺ੍໿ͷ෇͚֎͠Λͯ͠Ͷɻʯ
19. ո͍͠ՕॴपลͷAuto Layout৘ใ͕දࣔ͞Ε͍ͯΔɻ ͜ΕΛͺͬͱݟͯΘ͔ΔͳΒͦΕʹӽͨ͜͠ͱ͸ͳ͍ɻ ্͔ΒॱʹϩάͷҙຯΛ௫΋͏
20. ্͔ΒॱʹϩάͷҙຯΛ௫΋͏ ͳΜͱͳ͘ɺਫฏํ޲ʹؔ͢Δهड़͕ଟͦ͏Ͱ͢ɻ ʮUIView-Encapsulated-Layout-xxxʯ͸γεςϜ͕ੜ੒੍ͨ͠໿Ͱɺ ม͑Δ͜ͱ͸Ͱ͖·ͤΜɻ1ͭͷ஫໨ϙΠϯτʹͳΓ·͢ɻ
21. ʮ͍͍͔Μ͡ʹදࣔ͢ΔͨΊʹ͜ͷ੍໿͸յͤͯ͞΋Βͬͨʂʯ ͜ΕΛݟΔͱɺ͍͍ͩͨ ɾਫฏ / ਨ௚ͲͪΒͷ੍໿͕ؒҧ͍ͬͯΔͷ͔ ɾͲͷपล͕ؒҧ͍ͬͯΔͷ͔ ͕Θ͔Δɻ ্͔ΒॱʹϩάͷҙຯΛ௫΋͏
22. γεςϜ͸Ͳ͔ͬͷUIView.width = 320ͷ੍໿Λউखʹ࡞ͬͨ γεςϜ͸UIProgressView.width = 355ͷ੍໿Λউखʹյͨ͠ ͓΍ɺͦ͏͍͑͹… ৼΓฦͬͯΈΔ
23. ৼΓฦͬͯΈΔ • ࠓ࣮ߦ͍ͯ͠Δͷ͸iPhone SEαΠζ୺຤ • SEαΠζͷԣ෯͸320 • ͜Εʹରͯ͠UIProgressView.width = 355 + ࠨӈϚʔδϯ͕ ɹ֬อͰ͖ΔΘ͚͕ͳ͍…
24. ϨΠΞ΢τΛݟ௚͢ ແବʹԣ෯ͷ੍໿͕
    ෇͍͍ͯͨͷͰ࡟আ ղܾ
25. Tips 2. WTF Auto Layout?Λ࢖͏ αϯϓϧίʔυ
    $PWFS7JFXΑΓɻ
26. WTF Auto Layout? https://www.wtfautolayout.com/
28. ղੳͰ͖ͳ͍͜ͱ΋͋Δ
29. ࡞Γ͍ͨ ϨΠΞ΢τ ←View ←Label
30. Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢
31. Warningൃੜ
33. ໌Β͔ʹ͓͔͍͠ʂʂ
34. ͜ͷ੍໿͕ҙਤ௨Γ͡Όͳ͔ͬͨΒ
    translatesAutoresizingMaskIntoConstraintsΛ
    falseʹͯ͠ΈͯͶʂ
35. ղܾ
36. Tips 3. ੍໿Λग़ྗ͢Δ αϯϓϧίʔυ
    4UBDL7JFXΑΓɻ
37. constraintsAffectingLayout(for:)Λ࢖ͬͯΈΔ • ͋Δviewʹରͯ͠෇͍͍ͯΔ੍໿Λɺ࣠Λࢦఆͯ͠ ɹऔಘ͢Δ͜ͱ͕Ͱ͖Δ • ҉໧తͳ੍໿΋ؚ·ΕΔ • ӨڹΛ༩͑Δશͯͷ੍໿͕औಘͰ͖Δอূ͸ͳ͍
38. ͜ͷෳࡶͳviewͰࢼͯ͠ΈΑ͏ stack view͍ͬͺ͍࢖ͬͯ·͢
39. Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢
40. ྘ͷviewͷਫฏํ޲ͷ੍໿͚ͩग़ྗ͍ͨ͠৔߹͸งғؾ͜Μͳ͔Μ͡
41. ϏδϡΞϧ͔Β൑அ͢Δܥ
42. Tips 4. cellͷߴ͞Λٙ͏ αϯϓϧίʔυ
    7FSUJDBM-BCFMTΑΓɻ
43. ࡞Γ͍ͨϨΠΞ΢τ ֤ཁૉؒʹͷ
    伱ؒΛ΋ͨͤΔ
44. Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢
45. Τϥʔൃੜ ϫʔχϯάϩά͸ग़͍ͯͳ͍ɻ੍໿͸ಛʹ͓͔͘͠ͳ͍ɻ
46. 4UPSZCPBSE্ͷDFMMͷߴ͞Λมߋͨ࣌͠఺Ͱ
    3PX
    )FJHIU͕$VTUPNʹͳͬͯ
    ߴ͕͞ઃఆ͞ΕΔ cellϨΠΞ΢τΛ࡞Δ࣌…
47. DFMMͷߴ͞Λमਖ਼ ੍໿ or ߴ͞Λमਖ਼͢Ε͹… Τϥʔղফ ղܾ
48. LLDB࢖͏ܥ
49. Tips 5. ͍Ζ͍Ζ࢖ͬͯΈΔ αϯϓϧίʔυ
    &RVBM8JEUI7JFXΑΓɻ
50. ࡞Γ͍ͨϨΠΞ΢τ ֤7JFXͷ
    ԣ෯͸ ֤7JFXͷؒʹಁ໌ͳ 4QBDFS7JFXΛ഑ஔ iPhone 8 PlusͩͬͨΒ໰୊ͳ͔ͬͨ
51. Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢
52. Կ͔͕͓͔͍͠ Ұݟେৎ෉ͦ͏͚ͩͲ iPhone SEαΠζͩͱ μϝͩͬͨ ʘ8BSOJOHʗ
53. Ͳ͕͓͔͍͜͠ʁ ਫฏํ޲ͷ੍໿͕͓͔͍͜͠ͱ͕Θ͔Δ XJEUI MFBEJOH.BSHJO USBJMJOH.BSHJO
54. ͔ͯͲΕ͕ͲͷViewʁ identifier෇͚Δͷ໘౗ͩ͠ ผͷํ๏Ͱ۠ผ͠Α͏
55. ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎ ΦϒδΣΫτԽ͍ͨ͠ ΋ͷͷΞυϨεΛࢦఆ
56. ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎ WJFXͷഎܠ৭Λ੺ʹ
57. ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎ ͜ͷWJFXͷXJEUIͷ
    ੍໿͕յΕͨΒ͍͠ʂ σόοάऴྃ
58. ԫ৭viewͷwidthΛݟͯΈΔͱ… ͔֬ʹXJEUI
    
    ͷ
    ੍໿͕յΕ͍ͯΔ
59. ༧૝͍ͯͨ͠ϨΠΞ΢τ SEͷԣ෯͸320ɺ֤Viewͷ෯͕100Ͱ leadingMarginɺtrailingMargin͕0ʹͳͬͯΔ͔Βɺ ViewؒͷSpacerView͕ॖ·Ε͹ͪΌΜͱऩ·ΔͷͰ͸ʁʁ
60. ͯΏ͏͔… ͳΜͰleadingʹ伱͕ؒ Ͱ͖ͯΔΜͩΖ͏ʁʁ →ϏϡʔσόοΨʔͰ΋ ɹ֬ೝͯ͠ΈΑ͏
61. superview͕͓͔͍͠ʁʁ ಛʹ໰୊ͳͦ͞͏
62. Կ͕͓͔͍͠Μͩʁʁ ͋ΕɺtrailingMarginͬͯ΋͔ͯ͠͠…ʁ
63. 3FMBUJWF
    UP
    NBSHJO
    ʹνΣοΫ͕ೖ͍ͬͯΔ
    ͭ·Γ
    QU͕ܭࢉʹೖ͍ͬͯΔ Կ͕͓͔͍͠Μͩʁʁ
64. Relative to marginͷνΣοΫΛ֎ͯ͠… 3FMBUJWF
    UP
    NBSHJO
    ͷνΣοΫΛ֎ͯ͠
    DPOTUBOUΛʹ
    
65. ׬੒ʂ ղܾ
66. Tips 6. facebook / chiselΛ࢖͏
67. facebook / chiselͱ͸ • LLDBΛ࢖ͬͨσόοάΛศརʹͯ͘͠ΕΔίϚϯυ܈ • HomebrewͰΠϯετʔϧͰ͖Δ • ίϚϯυΛΧελϚΠζ͢Δ͜ͱ΋Մೳ
68. Πϯετʔϧํ๏ $ brew update $ brew install chisel $ echo "command script import /usr/local/Cellar/chisel/ 1.8.0/libexec/fblldb.py" >> ~/.lldbinit-Xcode ※ύε͸దٓมߋ͍ͯͩ͘͠͞ɻ Xcode࠶ىಈ
69. ࢖͍ํ (lldb) help Λଧͯ͹ίϚϯυͷҰཡ͕ग़ͯ͘ΔͷͰͦΕʹैͬͯ࢖͍·͢ɻ ΋ͪΖΜࠓ·Ͱ࢖͍ͬͯͨίϚϯυ΋࢖͑·͢ɻ ͜͜Ͱ͸͍͔ͭ͘ϐοΫΞοϓͯ͠঺հ͠·͢ɻ
70. pviews • viewͷ֊૚ߏ଄Λදࣔͯ͘͠ΕΔ • Ҿ਺ʹviewͷΞυϨεΛࢦఆ͢ΔͱͦͷviewҎԼͷ֊૚ߏ଄Λ ɹදࣔͯ͘͠ΕΔ • recursiveDescriptionͷ݁ՌΛϑΟϧλϦϯάͨ͠΋ͷ
71. pviews ֘౰ͷWJFX্ʹ
    ͭͷWJFX͕
    ͋Δ͜ͱ͕Θ͔Δ
72. border • Ϗϡʔɺ΋͘͠͸ϨΠϠʔʹରͯ͠࿮ઢΛදࣔͯ͘͠ΕΔ • ઌͷ৭΍෯͸ΦϓγϣϯͰࢦఆ͢Δ͜ͱ͕Ͱ͖Δ • Կ֊૚Լͷview·Ͱ࿮ઢΛ෇͚Δ͔Λ-d(depth)Ͱࢦఆ͢Δ ɹ͜ͱ͕Ͱ͖Δ • ৭͕෇͍͓ͯΒͣڥ໨͕Θ͔Γʹ͍͘viewΛ֬ೝ͢Δ࣌ͳͲʹ ɹ࢖͑ͦ͏
73. border EFQUIͱΞυϨεΛ
    ࢦఆ
74. border ϏϡʔσόοΨʔ
    ղআޙͷ༷ࢠ ࠶౓
    ϏϡʔσόοΨʔ
    ىಈ
75. ղܾͷࢳޱΛݟ͚ͭΔίπ
76. ݻఆ௕Ͱͳ͍ͱ͜ΖΛνΣοΫ͢Δ • શ෦ݻఆ௕Ͱࢦఆ͍ͯ͠Ε͹ϨΠΞ΢τ͸่Εͳ͍͸ͣ • ਖ਼͘͠Մมʹͳ͍ͬͯΔ͔νΣοΫ͠Α͏
77. ෳ਺ͷ୺຤Ͱ֬ೝ͢Δ • Auto LayoutͰ࡞͍ͬͯΔ ≠ શͯͷαΠζͰਖ਼͍͠ • ϓϨϏϡʔ୺຤Λ੾Γସ͑Α͏
78. ੍໿่͕Ε͍ͯΔ࣠Λ೺Ѳ͢Δ • ଟ͘ͷϫʔχϯάʹک͑ͣɺํ޲ΛݟۃΊΑ͏ • ͕࣠Θ͔Ε͹ॱʹݟͯղܾ͠΍͍͢ • ྆࣠ؒҧͬͯͨΒAspect Ratio΍Multiplierɺ ɹEqual Width / HeightΛٙ͏
79. ຊ౰ʹඞཁͳ੍໿Λߟ͑Δ • σβΠϯΛ౉͞Εͨ࣌ʹɺͲΕ͕୺຤αΠζʹґଘ͠ͳ͍ ɹ਺஋ͳͷ͔Λߟ͑Δ • ඞཁͰ͋Ε͹σβΠφʔʹ֬ೝ͢Δ
80. Ұ͔Β૊Έ௚͢ • ࠷ऴखஈ • طଘͷσβΠϯͷมߋ͸ࢥΘ͵͏͔ͬΓΛট͘ • ৔߹ʹΑͬͯ͸ࣗ෼Ͱશ෦૊Έ௚ͨ͠ํ͕ૣ͍͔΋͠Εͳ͍
81. ·ͱΊ
82. • Auto Layout่ΕͷݪҼΛ୳Δํ๏͸͍ͭ͘΋͋Δ • ʮ঱ঢ়ʯʹ߹ͬͨਖ਼͍͠ʮ਍࡯ʯ͕Ͱ͖Ε͹΋͏ා͘ͳ͍ • ࠓ೔঺հͨ͠಺༰͸໌೔͔Β࢖͑ΔͷͰͥͻ࢖ͬͯͶ
85. ؔ࿈ࢿྉ
86. • σόοάͷͨΊʹView֊૚Λ೺Ѳ͢Δ • https://qiita.com/akatsuki174/items/ 45d4bd7cb150defbf116 • AutoLayoutͷσόοάΛ͢Δʢ1ʣ • https://qiita.com/akatsuki174/items/6935bb6ff64f4df51c5a • Debugging your layout ([WWDC2015] Mysteries of Auto Layout, Part 2ΑΓ) • https://qiita.com/akatsuki174/items/ 66c6a92ab52b458f5414
87. • Auto Layoutͷϫʔχϯάղಡʹ͸ʮWTF?ʯ͕ศར • https://qiita.com/akatsuki174/items/ ccf394c03677ac62191e • Auto Layoutͷσόοάʹ໾ཱͭϝιου/ϓϩύςΟू • https://qiita.com/akatsuki174/items/ 550f885c002fb881674c
88. ࢀরจݙ
89. • Mysteries of Auto Layout, Part 2 (WWDC 2015) • https://developer.apple.com/videos/play/wwdc2015/219/ • Α͘Θ͔ΔAuto Layout • גࣜձࣾϦοΫςϨίϜ. ઒ᬒ ༤հ ஶ. ॴ ༑ଠ ؂म.
90. એ఻
91. ϦϞʔτ࿮΋
    ͋ΔΑʂ τʔΫ΍͓୊
    Ԡืͯ͠ΔΑʂ
92. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ʘ౤ථΑΖ͘͠ʗ