Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔ͷ಺༰

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

໨࣍

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ࠓ೔ͷܗࣜ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ίϯιʔϧϩάಡΉܥ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Warningൃੜ ͷϚʔδϯ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

ղੳͰ͖ͳ͍͜ͱ΋͋Δ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Warningൃੜ

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

໌Β͔ʹ͓͔͍͠ʂʂ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ղܾ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Veiwʹରͯ͠෇͚Δ৔߹

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

੍໿ʹରͯ͠෇͚Δ৔߹

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

ผ్#SJEHJOH)FBEFSΛ ༻ҙ͢Δ

Slide 62

Slide 62 text

CASE 6. hasAmbiguousLayoutΛ࢖͏

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

CASE 7. recursiveDescriptionΛ࢖͏

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

CASE 8. _autolayoutTraceΛ࢖͏

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

CASE 9. _printHierarchyΛ࢖͏

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

͜ͷը໘ͷ͜ͱ

Slide 89

Slide 89 text

͜ͷը໘ͷ͜ͱ

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

CASE 10. _ivarDescriptionΛ࢖͏

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

׬੒

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

׬੒

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

࡞Γ͍ͨϨΠΞ΢τ iPhone 8 Plus iPhoneSE ෯͕଍Γͳ͘ͳͬͨΒͬͪ͜ ͷϥϕϧΛলུͯ͠ௐઅ ࠷௿ͷԣ෯͸֬อ

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

׬੒

Slide 123

Slide 123 text

LLDB࢖͏ܥ

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

׬੒ʂ ղܾ

Slide 151

Slide 151 text

CASE 16. facebook / chiselΛ࢖͏

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

border EFQUIͱΞυϨεΛ ࢦఆ

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

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

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

·ͱΊ

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

No content

Slide 173

Slide 173 text

No content

Slide 174

Slide 174 text

ؔ࿈ࢿྉ

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

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

Slide 177

Slide 177 text

ࢀরจݙ

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

એ఻

Slide 180

Slide 180 text

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

Slide 181

Slide 181 text

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