$30 off During Our Annual Pro Sale. View Details »

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

akatsuki174
September 02, 2018

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

2018/09/02 (日) iOSDC Japan 2018
その他関連資料はここらへんからたどれます。
http://akatsuki174.hatenablog.com/entry/20180820/1534723200

akatsuki174

September 02, 2018
Tweet

More Decks by akatsuki174

Other Decks in Programming

Transcript

  1. Auto LayoutΤϥʔ਍அॴ
    ~ൃڰ͠ͳ͍ͨΊͷσόοάख๏~
    @akatsuki174
    iOSDC Japan 2018 2018/09/02(೔)

    View Slide

  2. ࣗݾ঺հ

    View Slide

  3. • ਢ౻ຘʢ@akatsuki174ʣ
    • גࣜձࣾZaim / iOSΤϯδχΞ
    • iOSDC Japan 2018 ίΞελοϑ
    ࠙਌ձͷ೔ຊञ
    ͷҰ෦͸
    ϫγ͕બΜͩ

    View Slide

  4. ࠓ೔ͷ಺༰

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. ͜Μͳ͓೰Έղܾ͠·͢
    • Τϥʔग़ͯΔ͚ͲԿ͔ΒखΛ෇͚͍͍͔ͯΘ͔Βͳ͍
    • ଞਓ͕࡞ͬͨϨΠΞ΢τͷվम͕ා͍
    • ༏ઌ౓ͱ͔දࣔ/ඇදࣔͱ͔ෳࡶͰΘ͚͕Θ͔Βͳ͍
    • σόοάख๏͕ϚϯωϦԽ͖ͯͯ͠ɺܹ͕ࢗ΄͍͠

    View Slide

  9. ໨࣍

    View Slide

  10. • ࣄྫͱͱ΋ʹσόοάख๏ΛֶͿ
    • ίϯιʔϧϩάಡΉܥ
    • ϏδϡΞϧ͔Β൑அ͢Δܥ
    • LLDB࢖͏ܥ
    • ղܾͷࢳޱΛݟ͚ͭΔίπ

    View Slide

  11. ࠓ೔ͷܗࣜ

    View Slide

  12. • ϥΠϒσόοΪϯάͰਐΊ·͢
    • ͨ·ʹྫ͕ద੾͡Όͳ͍΍ͭ΋ɻڐͯ͠ɻ
    • εϥΠυࣗମ͸εΫγϣ෇͖Ͱ͍͋͛ͯ·͢
    • αϯϓϧίʔυ
    • ໰୊ฤͱղ౴ฤ͕͋Γ·͢
    • ղઆ͸iOSDCޙ΋௥Ճ͍͖ͯ͠·͢
    • https://github.com/akatsuki174/AutoLayoutDebugSample
    ੒ޭͨ͠Β
    ഥखʂ
    ׬શ൛͸
    εϥΠυ໿ຕ

    View Slide

  13. Let’s Debugging ٩( •̀ω•́)و

    View Slide

  14. ίϯιʔϧϩάಡΉܥ

    View Slide

  15. CASE 1.
    WarningΛؤுͬͯಡΉ
    αϯϓϧίʔυ
    8BSOJOH7JFXΑΓɻ

    View Slide

  16. Warningൃੜ
    ͷϚʔδϯ

    View Slide

  17. Demo
    ͜ͷষͷ͔͜͜Βઌ͸ɺ
    σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

    View Slide

  18. ্͔ΒॱʹϩάͷҙຯΛ௫΋͏
    ʮಉ࣌ʹຬͨͤͳ੍͍໿͕͋ͬͨΑɻ
    ͨͿΜ͜ͷதͷগͳ͘ͱ΋1ͭͷ੍໿͕͍Βͳ͍΍͔ͭͩΒɺ
    ૝ఆ֎ͷ੍໿Λݟ͚ͭͯɺ੍໿ͷ෇͚֎͠Λͯ͠Ͷɻʯ

    View Slide

  19. ո͍͠ՕॴपลͷAuto Layout৘ใ͕දࣔ͞Ε͍ͯΔɻ
    ͜ΕΛͺͬͱݟͯΘ͔ΔͳΒͦΕʹӽͨ͜͠ͱ͸ͳ͍ɻ
    ্͔ΒॱʹϩάͷҙຯΛ௫΋͏

    View Slide

  20. ্͔ΒॱʹϩάͷҙຯΛ௫΋͏
    ͳΜͱͳ͘ɺਫฏํ޲ʹؔ͢Δهड़͕ଟͦ͏Ͱ͢ɻ
    ʮUIView-Encapsulated-Layout-xxxʯ͸γεςϜ͕ੜ੒੍ͨ͠໿Ͱɺ
    ม͑Δ͜ͱ͸Ͱ͖·ͤΜɻ1ͭͷ஫໨ϙΠϯτʹͳΓ·͢ɻ

    View Slide

  21. ʮ͍͍͔Μ͡ʹදࣔ͢ΔͨΊʹ͜ͷ੍໿͸յͤͯ͞΋Βͬͨʂʯ
    ͜ΕΛݟΔͱɺ͍͍ͩͨ
    ɾਫฏ / ਨ௚ͲͪΒͷ੍໿͕ؒҧ͍ͬͯΔͷ͔
    ɾͲͷपล͕ؒҧ͍ͬͯΔͷ͔
    ͕Θ͔Δɻ
    ্͔ΒॱʹϩάͷҙຯΛ௫΋͏

    View Slide

  22. ʮσόοΨͰΩϟον͢Δʹ͸UIViewAlertForUnsatisfiableConstraints
    ͰγϯϘϦοΫϒϨʔΫϙΠϯτΛுͬͯͶɻ
    UIConstraintBasedLayoutDebuggingΧςΰϦͷதʹ͋Δϝιου΋໾
    ʹཱͭͱࢥ͏Αɻʯ
    ্͔ΒॱʹϩάͷҙຯΛ௫΋͏

    View Slide

  23. γεςϜ͸Ͳ͔ͬͷUIView.width = 320ͷ੍໿Λউखʹ࡞ͬͨ
    γεςϜ͸UIProgressView.width = 355ͷ੍໿Λউखʹյͨ͠
    ͓΍ɺͦ͏͍͑͹…
    ৼΓฦͬͯΈΔ

    View Slide

  24. ৼΓฦͬͯΈΔ
    • ࠓ࣮ߦ͍ͯ͠Δͷ͸iPhone SEαΠζ୺຤
    • SEαΠζͷԣ෯͸320
    • ͜Εʹରͯ͠UIProgressView.width = 355 + ࠨӈϚʔδϯ͕
    ɹ֬อͰ͖ΔΘ͚͕ͳ͍…

    View Slide

  25. ϨΠΞ΢τΛݟ௚͢
    ແବʹԣ෯ͷ੍໿͕
    ෇͍͍ͯͨͷͰ࡟আ
    ղܾ

    View Slide

  26. CASE 2.
    WTF Auto Layout?Λ࢖͏
    αϯϓϧίʔυ
    $PWFS7JFXΑΓɻ

    View Slide

  27. WTF Auto Layout?
    https://www.wtfautolayout.com/

    View Slide

  28. View Slide

  29. ղੳͰ͖ͳ͍͜ͱ΋͋Δ

    View Slide

  30. ࡞Γ͍ͨ
    ϨΠΞ΢τ ←View
    ←Label

    View Slide

  31. Demo
    ͜ͷষͷ͔͜͜Βઌ͸ɺ
    σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

    View Slide

  32. Warningൃੜ

    View Slide

  33. View Slide

  34. ໌Β͔ʹ͓͔͍͠ʂʂ

    View Slide

  35. ͜ͷ੍໿͕ҙਤ௨Γ͡Όͳ͔ͬͨΒ
    translatesAutoresizingMaskIntoConstraintsΛ
    falseʹͯ͠ΈͯͶʂ

    View Slide

  36. ղܾ

    View Slide

  37. CASE 3.
    IdentifierΛ෇͚ͯݟ΍͘͢͢Δ
    αϯϓϧίʔυ
    $PWFS7JFXΑΓɻ

    View Slide

  38. Veiwʹରͯ͠෇͚Δ৔߹

    View Slide

  39. View Slide

  40. View Slide

  41. ੍໿ʹରͯ͠෇͚Δ৔߹

    View Slide

  42. View Slide

  43. CASE 4.
    ੍໿Λग़ྗ͢Δ
    αϯϓϧίʔυ
    4UBDL7JFXΑΓɻ

    View Slide

  44. constraints()Λ࢖ͬͯΈΔ
    • ͋Δviewʹରͯ͠෇͍͍ͯΔ੍໿Λऔಘ͢Δ͜ͱ͕Ͱ͖Δ
    • ͱΓ͋͑ͣΑ͘Θ͔Μͳ͍ɺϫʔχϯάग़ͯͳ͍͚Ͳ
    ɹ ͳΜ͔͓͔͍࣌͠ʹ࢖ͬͯΈΔ

    View Slide

  45. constraintsAffectingLayout(for:)Λ࢖ͬͯΈΔ
    • ͋Δviewʹରͯ͠෇͍͍ͯΔ੍໿Λɺ࣠Λࢦఆͯ͠
    ɹऔಘ͢Δ͜ͱ͕Ͱ͖Δ
    • ҉໧తͳ੍໿΋ؚ·ΕΔ
    • ӨڹΛ༩͑Δશͯͷ੍໿͕औಘͰ͖Δอূ͸ͳ͍

    View Slide

  46. ͜ͷෳࡶͳviewͰࢼͯ͠ΈΑ͏
    stack view͍ͬͺ͍࢖ͬͯ·͢

    View Slide

  47. Demo
    ͜ͷষͷ͔͜͜Βઌ͸ɺ
    σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

    View Slide

  48. ࢼ͠ʹԿ΋Τϥʔ͕ग़͍ͯͳ͍࣌ʹ
    Ұ൪Լʹ͋Δstack viewʹͲΜͳ੍໿͕
    ෇͍͍ͯΔ͔ΛݟͯΈΔ

    View Slide

  49. Ϙλϯλοϓ࣌ʹϒϨʔΫϙΠϯτͰࢭΊͯ
    Ұ൪Լͷstack viewͷconstraintsΛग़ྗɻ
    ਫฏ / ਨ௚྆ํͷ੍໿͕ग़ྗ͞ΕΔɻ

    View Slide

  50. ಛఆͷ2ͭͷviewʹؔΘΔ੍໿ΛऔΓग़͍ͨ͠ͳΒ
    ͜ΜͳϝιουΛ࡞͓ͬͯ͘ͱศར

    View Slide

  51. Ұ൪Լͷstack viewͱself.viewؒʹ͋Δ੍໿Λग़ྗ

    View Slide

  52. ྘ͷviewͷਫฏํ޲ͷ੍໿͚ͩग़ྗ͍ͨ͠৔߹͸งғؾ͜Μͳ͔Μ͡

    View Slide

  53. ͨͩ͠
    • ਫฏ / ਨ௚྆ํʹؔΘΔ੍໿͕·͔ͣͬͨ৔߹ɺ
    ɹ ͜ΕΛ΍ΔͱٯʹΘ͔Γʹ͍͘
    ɹ ྫʣAspect RatioͳͲ

    View Slide

  54. CASE 5.
    γϯϘϦοΫϒϨʔΫϙΠϯτ

    View Slide

  55. γϯϘϦοΫϒϨʔΫϙΠϯτͱ͸
    • ಛఆͷ৚݅ʹϚονͨ࣌͠ʹॲཧΛετοϓͯ͘͠ΕΔ
    • σόοάίϚϯυΛ࢓ࠐΉ͜ͱ΋Ͱ͖Δ
    • ೔ৗతʹᐆດͳϨΠΞ΢τͷݕ஌Λ͍ͨ࣌͠ɺϫʔχϯάͷ
    ɹՕॴΛಛఆ͍ͨ࣌͠ʹ࢖͏ͱྑ͍ʁ
    • Auto LayoutͷσόοάʹݶΒ͍ͣΖ͍Ζ࢖͍ಓ͸͋Δ

    View Slide

  56. γϯϘϦοΫϒϨʔΫϙΠϯτͷ௥Ճ

    View Slide

  57. γϯϘϦοΫϒϨʔΫϙΠϯτͷઃఆ
    expr -l objc++ -O -- [[UIWindow keyWindow] _autolayoutTrace]
    "EE"DUJPOΛ
    ΫϦοΫͯ͠ૠೖ

    View Slide

  58. ϒϨʔΫϙΠϯτ࢓ࠐΜͩ··࣮ߦ
    ᐆດͳϨΠΞ΢τ͕ඳը
    ͞ΕΔ࣌ʹετοϓͯ͠
    ίϚϯυ͕࣮ߦ͞ΕΔ

    View Slide

  59. ϓϥΠϕʔτϝιου࢖͏ܥ

    View Slide

  60. ͜͜Ͱݴ͏ϓϥΠϕʔτϝιουͬͯʁ
    • Objective-Cʹ͓͚ΔɺϨΠΞ΢τΛσόοά͢Δͷʹ
    ɹ ศརͳϝιουͨͪ
    • SwiftͰ࢖͏ʹ͸࠶ఆٛɺϒϦοδ͢Δඞཁ͕͋Δ
    • ϦϦʔεϏϧυʹؚΊΔͱϦδΣΫτ͞ΕΔՄೳੑ͕͋ΔͷͰ
    ɹ ஫ҙ͕ඞཁ

    View Slide

  61. ผ్#SJEHJOH)FBEFSΛ
    ༻ҙ͢Δ

    View Slide

  62. CASE 6.
    hasAmbiguousLayoutΛ࢖͏

    View Slide

  63. hasAmbiguousLayout
    • ո͍͠viewʹରͯ͜͠ͷϝιουΛ࢖͏
    • ੍໿ʹΑͬͯҐஔ͕Ұҙʹͳ͍ͬͯͳ͍ͱ͖ʹtrueΛฦ͢
    • શͯͷᐆດͳϨΠΞ΢τΛݕ஌Ͱ͖ΔΘ͚Ͱ͸ͳ͍
    • σόοάͷΈʹ༻͍Δ͜ͱ
    • αϒϏϡʔ·Ͱ࠶ؼతʹௐ΂ΔϝιουΛ࡞Δͱɺ
    ɹ ͲΕ͕ᐆດ͔ௐ΂΍ͯ͘͢ศར

    View Slide

  64. ࣗ෼͕ᐆດ͔Ͳ͏͔νΣοΫ
    ࣗ෼ͷࢠϏϡʔ͕
    ᐆດ͔Ͳ͏͔νΣοΫ

    View Slide

  65. View Slide

  66. ৄ͍͠৘ใΛ஌Γ͔ͨͬͨΒ
    [UIView _autolayoutTrace]Λ
    ࢖ͬͯͶ

    View Slide

  67. $PWFS7JFXʹᐆດͳ੍໿͕͋ΔΑ

    View Slide

  68. ཁ͢Δʹ6*-BCFM͕ո͍͠Α

    View Slide

  69. ͨͩ…
    • ίʔυͰAuto LayoutΛ࢖ͬͨͱ͖ʹߴ֬཰Ͱtrue͕ฦͬͯ
    ɹ ͘ΔΑ͏ͳؾ͕ͯ͠ɺ͍·͍ͪ৚͕݅Θ͔Βͳ͔ͬͨ
    • ࠷ॳ͸frame(0, 0, 0, 0)͚ͩͲޙ͔Β
    translatesAutoresizingMaskIntoConstraintsΛfalseʹͯ͠
    ɹ αΠζΛ͋ͯΔ৔߹΋true͕ฦͬͯདྷͯ͠·͏
    • ͪͳΈʹStoryboard্Ͱ໌Β͔ʹΤϥʔ͕ग़͍ͯΔͱ͖͸
    ɹ ੍໿͕ᐆດͰ΋falseΛฦ͢͜ͱ΋͋Δ༷ࢠ

    View Slide

  70. ཧ૝ͱͯ͠͸
    • ͖ͬ͞࡞ͬͨhasAmbiguityϝιουΛ࢖ͬͯɺ
    ɹ XCTAssert(self.hasAmbiguity(), “Ambiguous Layout”)ͷΑ͏ʹ
    ɹϢχοτςετΛ΍Δͱྑ͍

    View Slide

  71. ิ଍ͱͯ͠
    • exerciseAmbiguityInLayout()ϝιουͱ߹Θͤͯ࢖͏ͱྑ͍
    • exerciseAmbiguityInLayout͸ᐆດͳ੍໿Λ࣋ͭviewͷ
    ɹ frameΛɺ੍໿Λຬͨ͢ൣғͰϥϯμϜʹมߋͯ͘͠ΕΔ

    View Slide

  72. αϒϏϡʔ·Ͱ
    ࠶ؼతʹ࣮ߦ
    λΠϚʔͰ
    ܁Γฦ࣮͠ߦ
    UIViewʹ͜ΜͳϝιουΛ࡞Δͱศར

    View Slide

  73. CASE 7.
    recursiveDescriptionΛ࢖͏

    View Slide

  74. recursiveDescriptionͱ͸
    • ֘౰ͷviewͷ࠷ऴతͳϨΠΞ΢τͷϑϨʔϜͱ֊૚৘ใΛ
    ɹ ࠶ؼతʢ=recursiveʣʹදࣔͯ͘͠ΕΔ
    • Auto Layout৘ใ͸ೖ͍ͬͯͳ͍
    • ௥Ճͨ͠͸ͣͷview͕දࣔ͞Ε͍ͯͳ͍ɺͳΜ͔มͳͱ͜Ζʹ
    ɹ දࣔ͞Ε͍ͯΔɺͳͲͷ৔߹ʹ࢖͏ͱྑ͍

    View Slide

  75. ͜ͷը໘Ͱࢼͯ͠ΈΔ
    (lldb) po [[UIWindow keyWindow] recursiveDescription]

    View Slide

  76. View Slide

  77. WJFXͷ֊૚ߏ଄͕
    Θ͔Δ
    Ұ෦ͷϓϩύςΟ͕
    Θ͔Δ

    View Slide

  78. CASE 8.
    _autolayoutTraceΛ࢖͏

    View Slide

  79. _autolayoutTraceͱ͸
    • viewͷ֊૚৘ใͱͦͷϨΠΞ΢τ੍͕໿ఆٛʹΑͬͯ
    ɹ ࣮ߦ͞Ε͍ͯΔ͔Ͳ͏͔Λදࣔ
    • ᐆດͳϨΠΞ΢τपลʹԿ͕ى͍ͬͯ͜Δͷ͔Λ೺Ѳ͠΍͍͢

    View Slide

  80. ͜ͷը໘Ͱࢼͯ͠ΈΔ
    (lldb) po [[UIWindow keyWindow] _autolayoutTrace]

    View Slide

  81. View Slide

  82. ˎҹ͕෇͍͍ͯΔ΋ͷ͸
    "VUP-BZPVUʹΑͬͯ
    ඳը͞Εͨ΋ͷ

    View Slide

  83. ʴҹ͕෇͍͍ͯΔ΋ͷ͸
    "VUP-BZPVUΛ༻͍ͣ
    ඳըͨ͠΋ͷ

    View Slide

  84. ˔ҹ͕෇͍͍ͯΔ΋ͷ͸
    ϨΠΞ΢τΤϯδϯͷ
    ϗετ

    View Slide

  85. CASE 9.
    _printHierarchyΛ࢖͏

    View Slide

  86. _printHierarchyͱ͸
    • viewͷ֊૚৘ใͰ͸ͳ͘ɺview controllerͷ֊૚৘ใΛ
    ɹදࣔ͢Δ͜ͱ͕Ͱ͖Δ

    View Slide

  87. ͜ͷը໘Ͱࢼͯ͠ΈΔ
    (lldb) po [[[UIWindow keyWindow] rootViewController] _printHierarchy]

    View Slide

  88. ͜ͷը໘ͷ͜ͱ

    View Slide

  89. ͜ͷը໘ͷ͜ͱ

    View Slide

  90. ʛͰ͋Ε͹DIJMEWJFX
    DPOUSPMMFST
    ʴͰ͋Ε͹Ϟʔμϧ

    View Slide

  91. CASE 10.
    _ivarDescriptionΛ࢖͏

    View Slide

  92. _ivarDescriptionͱ͸
    • ֘౰ͷΦϒδΣΫτ͕࣋ͭΠϯελϯεͱͦͷ஋Λ
    ɹ දࣔ͢Δ͜ͱ͕Ͱ͖Δ
    • Πϯελϯεͷੜ੒ɺॴ༗ͷ࣌఺Ͱؒҧ͍ͬͯΔͳͲͷཧ༝Ͱ
    ɹ ࠓ·ͰͷϝιουͰϨΠΞ΢τ৘ใΛ֬ೝͯ͠΋
    ɹ͏·͘ղ໌Ͱ͖ͳ͍৔߹ͳͲʹ࢖͏

    View Slide

  93. • ͍͍ྫ͕ࢥ͍ු͔͹ͳ͔ͬͨͷͰ࣮ࢪྫ͸লུ

    View Slide

  94. ϏδϡΞϧ͔Β൑அ͢Δܥ

    View Slide

  95. CASE 11.
    cellͷߴ͞Λٙ͏
    αϯϓϧίʔυ
    7FSUJDBM-BCFMTΑΓɻ

    View Slide

  96. ࡞Γ͍ͨϨΠΞ΢τ
    ֤ཁૉؒʹͷ
    伱ؒΛ΋ͨͤΔ

    View Slide

  97. Demo
    ͜ͷষͷ͔͜͜Βઌ͸ɺ
    σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

    View Slide

  98. Τϥʔൃੜ
    ϫʔχϯάϩά͸ग़͍ͯͳ͍ɻ੍໿͸ಛʹ͓͔͘͠ͳ͍ɻ

    View Slide

  99. 4UPSZCPBSE্ͷDFMMͷߴ͞Λมߋͨ࣌͠఺Ͱ
    3PX)FJHIU͕$VTUPNʹͳͬͯ
    ߴ͕͞ઃఆ͞ΕΔ
    cellϨΠΞ΢τΛ࡞Δ࣌…

    View Slide

  100. DFMMͷߴ͞Λमਖ਼
    ੍໿ or ߴ͞Λमਖ਼͢Ε͹…
    Τϥʔղফ
    ղܾ

    View Slide

  101. CASE 12.
    ϏϡʔσόοΨʔΛ࢖͏
    αϯϓϧίʔυ
    .VMUJ)JFSBSDIZ7JFXΑΓɻ

    View Slide

  102. ࡞Γ͍ͨϨΠΞ΢τ
    gray viewΛണ͕͢

    View Slide

  103. Կ͔͕͓͔͍͠
    gray viewΛണ͕͢
    ֊૚Λ೺Ѳ͢Δͷ͕
    ྑͦ͞͏ʁ

    View Slide

  104. ϏϡʔσόοΨʔىಈ
    ͪΌΜͱ
    HSBZͷϏϡʔͷ্ʹ
    ৐͔ͬͬͯΔͬΆ͍ʁʁ
    ϏϡʔσόοΨʔͰ֬ೝ

    View Slide

  105. debug navigatorͰ֬ೝ
    ਌ࢠؔ܎ʹͳͬͯ
    ͍ͳ͔ͬͨ

    View Slide

  106. view֊૚Λमਖ਼
    ਌ࢠؔ܎ʹͨ͠

    View Slide

  107. ׬੒

    View Slide

  108. CASE 13.
    contentHuggingPriorityΛ
    ௐ੔͢Δ
    αϯϓϧίʔυ
    1SJPSJUZ7JFXΑΓɻ

    View Slide



  109. ࡞Γ͍ͨϨΠΞ΢τ
    5FYU'JFME͸Ͱ͖Δ͚ͩ
    ෯Λ޿͘औΔ

    View Slide

  110. Կ͔͕͓͔͍͠
    5FYU'JFME͕
    ΊͬͪΌখ͍͞

    View Slide

  111. Կ͔͕͓͔͍͠
    1SJPSJUZӠʑ
    ݴΘΕͯΔ

    View Slide

  112. contentHuggingPriorityͱ͸
    • େ͖͘ͳΓʹ͘͞ / ίϯςϯπʹԊ͏༏ઌ౓
    • Hug = ԊͬͯਐΉͱ͍͏ҙຯ
    • ͜ͷ஋͕খ͍͞ͱଞͷ੍໿ʹӨڹ͞Εͯେ͖͘ͳΓ΍͘͢ͳΔ
    • ݻ༗αΠζΑΓେ͖ͳαΠζ͕ࢦఆ͞Εͨͱ͖ʹ࢖ΘΕΔ

    View Slide

  113. contentHuggingPriorityͷ஋ΛνΣοΫ


    ੍໿ͷ༏ઌ౓ΛΘ͟ͱ௿͘͠ͳ͍ݶΓ͸ɺ
    ίϯςϯπͷେ͖͞ʹ͔͔ΘΒ੍ͣ໿͕༏ઌ͞ΕΔ
    →Button͕৳ͼͯ͠·ͬͨ

    View Slide

  114. ղܾ͢Δʹ͸


    TextField͸Ͱ͖Δ͚ͩ޿͘औΓ͍͕ͨ
    Button͸࠷௿ݶͷେ͖͞Ͱ͍͍ͷͰ
    ButtonͷcontentHuggingPriorityΛ্͛Δ

    View Slide

  115. ׬੒

    View Slide

  116. CASE 14.
    contentCompressionResistancePriority
    Λௐ੔͢Δ
    αϯϓϧίʔυ
    1SJPSJUZ7JFXΑΓɻ

    View Slide

  117. ࡞Γ͍ͨϨΠΞ΢τ

    iPhone 8 Plus
    iPhoneSE

    ෯͕଍Γͳ͘ͳͬͨΒͬͪ͜
    ͷϥϕϧΛলུͯ͠ௐઅ
    ࠷௿ͷԣ෯͸֬อ

    View Slide

  118. iPhoneSE
    Կ͔͕͓͔͍͠
    ͬͪ͜ͷϥϕϧ͕
    লུ͞Εͯ͠·͍ͬͯΔ
    iPhone 8 Plus

    View Slide

  119. Կ͔͕͓͔͍͠
    1SJPSJUZӠʑ
    ݴΘΕͯΔ

    View Slide

  120. contentCompressionResistancePriorityͱ͸
    • খ͘͞ͳΓʹ͘͞ / ѹॖ఍߅༏ઌ౓
    • ͜ͷ஋͕খ͍͞ͱଞͷ੍໿ʹӨڹ͞Εͯখ͘͞ͳΓ΍͘͢ͳΔ
    • ݻ༗αΠζΑΓখ͍͞αΠζ͕ࢦఆ͞Εͨͱ͖ʹ࢖ΘΕΔ

    View Slide

  121. contentCompressionResistancePriorityͷ஋ΛνΣοΫ


    ʮYeahʯϥϕϧͷํΛ༏ઌతʹॖΊͯ΄͍͠ͷͰɺ
    ʮYeahʯϥϕϧͷcontentCompressionResistancePriorityͷ
    ༏ઌ౓ΛԼ͛Δͱྑͦ͞͏

    View Slide

  122. ׬੒

    View Slide

  123. LLDB࢖͏ܥ

    View Slide

  124. CASE 15.
    ͍Ζ͍Ζ࢖ͬͯΈΔ
    αϯϓϧίʔυ
    &RVBM8JEUI7JFXΑΓɻ

    View Slide

  125. ࡞Γ͍ͨϨΠΞ΢τ
    ֤7JFXͷ
    ԣ෯͸
    ֤7JFXͷؒʹಁ໌ͳ
    4QBDFS7JFXΛ഑ஔ
    iPhone 8 PlusͩͬͨΒ໰୊ͳ͔ͬͨ

    View Slide

  126. Demo
    ͜ͷষͷ͔͜͜Βઌ͸ɺ
    σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

    View Slide

  127. Կ͔͕͓͔͍͠
    Ұݟେৎ෉ͦ͏͚ͩͲ
    iPhone SEαΠζͩͱ
    μϝͩͬͨ
    ʘ8BSOJOHʗ

    View Slide

  128. Ͳ͕͓͔͍͜͠ʁ
    ਫฏํ޲ͷ੍໿͕͓͔͍͜͠ͱ͕Θ͔Δ
    XJEUI MFBEJOH.BSHJO
    USBJMJOH.BSHJO

    View Slide

  129. ͔ͯͲΕ͕ͲͷViewʁ
    identifier෇͚Δͷ໘౗ͩ͠
    ผͷํ๏Ͱ۠ผ͠Α͏

    View Slide

  130. ํ๏1ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̍
    ·ͣ͸
    ϏϡʔσόοΨʔΛ
    ىಈͯ͠LLDB͕
    ࢖͑Δঢ়ଶʹ͢Δ

    View Slide

  131. ํ๏1ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̍
    lWJFXXJEUIΛ
    յͨͥ͠z
    յ͞ΕͨWJFXΛ
    ൑ผ͢ΔͨΊʹ
    ৭Λ෇͚ͯΈΑ͏

    View Slide

  132. ํ๏1ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̍
    ඞཁͳϑϨʔϜ
    ϫʔΫΛJNQPSU
    --%#ͷݴޠΛ
    4XJGUʹ

    View Slide

  133. ํ๏1ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̍
    VOTBGF#JU$BTUΛ
    ࢖ͬͯϙΠϯλ͔Β
    ΦϒδΣΫτΛऔಘ
    ΦϒδΣΫτԽ͍ͨ͠
    ΋ͷͷΞυϨεΛࢦఆ

    View Slide

  134. ํ๏1ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̍
    ΦϒδΣΫτԽͨ͠
    WJFXͷഎܠ৭Λ੺ʹ

    View Slide

  135. ํ๏1ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̍
    ը໘ΛϦϑϨογϡͯ͠
    มߋΛ൓ө

    View Slide

  136. ํ๏1ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̍
    ͜ͷWJFXͷXJEUIͷ
    ੍໿͕յΕͨΒ͍͠ʂ

    View Slide

  137. ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎
    ΦϒδΣΫτԽ͍ͨ͠
    ΋ͷͷΞυϨεΛࢦఆ

    View Slide

  138. ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎
    WJFXͷഎܠ৭Λ੺ʹ

    View Slide

  139. ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎
    ͜ͷWJFXͷXJEUIͷ
    ੍໿͕յΕͨΒ͍͠ʂ
    σόοάऴྃ

    View Slide

  140. ํ๏̏ɿtext filterΛ࢖͏
    ΞυϨεΛUFYUpMUFSʹ
    ίϐϖʂ
    ֘౰͢ΔΦϒδΣΫτʹ
    ৭͕͍ͭͨʂ

    View Slide

  141. ԫ৭viewͷwidthΛݟͯΈΔͱ…
    ͔֬ʹXJEUIͷ
    ੍໿͕յΕ͍ͯΔ

    View Slide

  142. ༧૝͍ͯͨ͠ϨΠΞ΢τ
    SEͷԣ෯͸320ɺ֤Viewͷ෯͕100Ͱ
    leadingMarginɺtrailingMargin͕0ʹͳͬͯΔ͔Βɺ
    ViewؒͷSpacerView͕ॖ·Ε͹ͪΌΜͱऩ·ΔͷͰ͸ʁʁ

    View Slide

  143. ͯΏ͏͔…
    ͳΜͰleadingʹ伱͕ؒ
    Ͱ͖ͯΔΜͩΖ͏ʁʁ
    →ϏϡʔσόοΨʔͰ΋
    ɹ֬ೝͯ͠ΈΑ͏

    View Slide

  144. Storyboard্Ͱ੍໿Λ֬ೝ͢Δํ๏̍
    TIPX$POTUSBJOUT
    ੍໿ͷ಺༰

    View Slide

  145. Storyboard্Ͱ੍໿Λ֬ೝ͢Δํ๏̎
    ੍໿ΛӈΫϦοΫͰ
    ಺༰Λग़ྗ

    View Slide

  146. superview͕͓͔͍͠ʁʁ
    ಛʹ໰୊ͳͦ͞͏

    View Slide

  147. Կ͕͓͔͍͠Μͩʁʁ
    ͋ΕɺtrailingMarginͬͯ΋͔ͯ͠͠…ʁ

    View Slide

  148. 3FMBUJWF
    UPNBSHJO
    ʹνΣοΫ͕ೖ͍ͬͯΔ
    ͭ·Γ
    QU͕ܭࢉʹೖ͍ͬͯΔ
    Կ͕͓͔͍͠Μͩʁʁ

    View Slide

  149. Relative to marginͷνΣοΫΛ֎ͯ͠…
    3FMBUJWFUP
    NBSHJO
    ͷνΣοΫΛ֎ͯ͠
    DPOTUBOUΛʹ

    View Slide

  150. ׬੒ʂ ղܾ

    View Slide

  151. CASE 16.
    facebook / chiselΛ࢖͏

    View Slide

  152. facebook / chiselͱ͸
    • LLDBΛ࢖ͬͨσόοάΛศརʹͯ͘͠ΕΔίϚϯυ܈
    • HomebrewͰΠϯετʔϧͰ͖Δ
    • ίϚϯυΛΧελϚΠζ͢Δ͜ͱ΋Մೳ

    View Slide

  153. Πϯετʔϧํ๏
    $ brew update
    $ brew install chisel
    $ echo "command script import /usr/local/Cellar/chisel/
    1.8.0/libexec/fblldb.py" >> ~/.lldbinit-Xcode
    ※ύε͸దٓมߋ͍ͯͩ͘͠͞ɻ
    Xcode࠶ىಈ

    View Slide

  154. ࢖͍ํ
    (lldb) help
    Λଧͯ͹ίϚϯυͷҰཡ͕ग़ͯ͘ΔͷͰͦΕʹैͬͯ࢖͍·͢ɻ
    ΋ͪΖΜࠓ·Ͱ࢖͍ͬͯͨίϚϯυ΋࢖͑·͢ɻ
    ͜͜Ͱ͸͍͔ͭ͘ϐοΫΞοϓͯ͠঺հ͠·͢ɻ

    View Slide

  155. pviews
    • viewͷ֊૚ߏ଄Λදࣔͯ͘͠ΕΔ
    • Ҿ਺ʹviewͷΞυϨεΛࢦఆ͢ΔͱͦͷviewҎԼͷ֊૚ߏ଄Λ
    ɹදࣔͯ͘͠ΕΔ
    • recursiveDescriptionͷ݁ՌΛϑΟϧλϦϯάͨ͠΋ͷ

    View Slide

  156. pviews
    ֘౰ͷWJFX্ʹ
    ͭͷWJFX͕
    ͋Δ͜ͱ͕Θ͔Δ

    View Slide

  157. border
    • Ϗϡʔɺ΋͘͠͸ϨΠϠʔʹରͯ͠࿮ઢΛදࣔͯ͘͠ΕΔ
    • ઌͷ৭΍෯͸ΦϓγϣϯͰࢦఆ͢Δ͜ͱ͕Ͱ͖Δ
    • Կ֊૚Լͷview·Ͱ࿮ઢΛ෇͚Δ͔Λ-d(depth)Ͱࢦఆ͢Δ
    ɹ͜ͱ͕Ͱ͖Δ
    • ৭͕෇͍͓ͯΒͣڥ໨͕Θ͔Γʹ͍͘viewΛ֬ೝ͢Δ࣌ͳͲʹ
    ɹ࢖͑ͦ͏

    View Slide

  158. border
    EFQUIͱΞυϨεΛ
    ࢦఆ

    View Slide

  159. border
    ϏϡʔσόοΨʔ
    ղআޙͷ༷ࢠ
    ࠶౓
    ϏϡʔσόοΨʔ
    ىಈ

    View Slide

  160. ղܾͷࢳޱΛݟ͚ͭΔίπ

    View Slide

  161. ݻఆ௕Ͱͳ͍ͱ͜ΖΛνΣοΫ͢Δ
    • શ෦ݻఆ௕Ͱࢦఆ͍ͯ͠Ε͹ϨΠΞ΢τ͸่Εͳ͍͸ͣ
    • ਖ਼͘͠Մมʹͳ͍ͬͯΔ͔νΣοΫ͠Α͏

    View Slide

  162. ౔୆ʹͳΔviewͷαΠζ͕ద੾͔֬ೝ͢Δ
    • cellͱ͔xib͸ߴ͕ࣗ͞༝ʹม͑ΒΕΔ͕ɺ͋·Γʹ΋
    ɹϑϦʔμϜͩͱதͷཁૉͷ੍໿ͱטΈ߹Θͳͯ͘ΤϥʔʹͳΔ
    • ౔୆ͷview͸ϓϨϏϡʔͷ࿮Ͱ͸ͳ͘σβΠϯͷҰ෦ͳͷͰ
    ɹ͜͜΋ͪΌΜͱέΞ͢Δ

    View Slide

  163. ༏ઌ౓Λઃఆͯ͠ͳ͍͔֬ೝ͢Δ
    • ༏ઌ౓͕ग़ͯ͘Δͱͻͱ໨Ͱ͸੍໿͕ਖ਼͍͠ͷ͔ؒҧͬͯΔͷ͔
    ɹ͕Θ͔Γʹ͍͘
    • Storyboard্ͰҰ౓༏ઌ౓ΛΘ͟ͱͣΒͯ͠ௐઅ͠ɺ
    ɹऴΘͬͨΒݩʹ໭ͨ͠Γͯ͠΋͍͍͔΋

    View Slide

  164. ෳ਺ͷ୺຤Ͱ֬ೝ͢Δ
    • Auto LayoutͰ࡞͍ͬͯΔ ≠ શͯͷαΠζͰਖ਼͍͠
    • ϓϨϏϡʔ୺຤Λ੾Γସ͑Α͏

    View Slide

  165. ੍໿่͕Ε͍ͯΔ࣠Λ೺Ѳ͢Δ
    • ଟ͘ͷϫʔχϯάʹک͑ͣɺํ޲ΛݟۃΊΑ͏
    • ͕࣠Θ͔Ε͹ॱʹݟͯղܾ͠΍͍͢
    • ྆࣠ؒҧͬͯͨΒAspect Ratio΍Multiplierɺ
    ɹEqual Width / HeightΛٙ͏

    View Slide

  166. ຊ౰ʹඞཁͳ੍໿Λߟ͑Δ
    • σβΠϯΛ౉͞Εͨ࣌ʹɺͲΕ͕୺຤αΠζʹґଘ͠ͳ͍
    ɹ਺஋ͳͷ͔Λߟ͑Δ
    • ඞཁͰ͋Ε͹σβΠφʔʹ֬ೝ͢Δ

    View Slide

  167. Ұ͔Β૊Έ௚͢
    • ࠷ऴखஈ
    • طଘͷσβΠϯͷมߋ͸ࢥΘ͵͏͔ͬΓΛট͘
    • ৔߹ʹΑͬͯ͸ࣗ෼Ͱશ෦૊Έ௚ͨ͠ํ͕ૣ͍͔΋͠Εͳ͍

    View Slide

  168. transformΛ࢖͍ͬͯͳ͍͔֬ೝ͢Δ
    • transformͰͷม׵͸Auto Layoutͷܭࢉʹ͸Ұ੾Өڹ͠ͳ͍
    • Auto LayoutͰ͸ະม׵࣌ͷۣܗ͕ߟྀ͞ΕΔ

    View Slide

  169. ඳըํ๏͕ಛघͰͳ͍͔֬ೝ͢Δ
    • جຊతʹ͸view͸ڥք಺ʹ഑ஔ͞ΕΔ͕ɺάϥϑΟοΫ
    ɹΤϯδϯ͸ͦͷݶΓͰ͸ͳ͍
    • ඳը͕ಛघͳ৔߹ɺϑϨʔϜͱ͸ҟͳΔੇ๏ͷྖҬʹඳը͢Δ
    ɹ͜ͱ͕͋Δ
    • viewͷclipsToBoundsΛtrueʹ͢Δ͔ϑϨʔϜͷੇ๏Λม͑Ε͹
    ɹൃݟͰ͖Δ

    View Slide

  170. ·ͱΊ

    View Slide

  171. • Auto Layout่ΕͷݪҼΛ୳Δํ๏͸͍ͭ͘΋͋Δ
    • ʮ঱ঢ়ʯʹ߹ͬͨਖ਼͍͠ʮ਍࡯ʯ͕Ͱ͖Ε͹΋͏ා͘ͳ͍
    • ࠓ೔঺հͨ͠಺༰͸໌೔͔Β࢖͑ΔͷͰͥͻ࢖ͬͯͶ

    View Slide

  172. View Slide

  173. View Slide

  174. ؔ࿈ࢿྉ

    View Slide

  175. • σόοάͷͨΊʹ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

    View Slide

  176. • Auto Layoutͷϫʔχϯάղಡʹ͸ʮWTF?ʯ͕ศར
    • https://qiita.com/akatsuki174/items/
    ccf394c03677ac62191e
    • Auto Layoutͷσόοάʹ໾ཱͭϝιου/ϓϩύςΟू
    • https://qiita.com/akatsuki174/items/
    550f885c002fb881674c

    View Slide

  177. ࢀরจݙ

    View Slide

  178. • Mysteries of Auto Layout, Part 2 (WWDC 2015)
    • https://developer.apple.com/videos/play/wwdc2015/219/
    • Α͘Θ͔ΔAuto Layout
    • גࣜձࣾϦοΫςϨίϜ. ઒ᬒ ༤հ ஶ. ॴ ༑ଠ ؂म.

    View Slide

  179. એ఻

    View Slide

  180. ϦϞʔτ࿮΋
    ͋ΔΑʂ
    τʔΫ΍͓୊
    Ԡืͯ͠ΔΑʂ

    View Slide

  181. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    ʘ౤ථΑΖ͘͠ʗ

    View Slide