AutoLayout Algorithm

iOSDC 2017 (Sep 16, 2017)
https://iosdc.jp/2017/node/1317

Library: https://github.com/inamiy/Cassowary

Transcript

1. AutoLayout Algorithm 2017/09/16 iOSDC Japan 2017 Yasuhiro Inami / @inamiy
4. ϚϧνσόΠε ϚϧνϨΠΞ΢τରԠ
6. Auto Layout ʮ੍໿ʯʹΑΔUIͷϨΠΞ΢τܭࢉ
8. Auto Layout + Code view.addConstraints([ NSLayoutConstraint( item: view1, attribute: .centerX, relatedBy: .equal, toItem: view2, attribute: .centerX, multiplier: 1.0, constant: 0 ), ... ])
9. Auto Layout + Visual Format let views = ["v1": view1, "v2": view2] let metrics = ["d": 40, "w1": 100, "w2": 200] let options: NSLayoutFormatOptions = [] let constraints = NSLayoutConstraint.constraints( withVisualFormat: "H:|-(>=d,<=100@250)-[v1(>=w1@750)]-[v2(>=w2@1)]-|", options: options, metrics: metrics, views: views ) view.addConstraints(constraints)
10. Auto Layout + NSLayoutAnchor NSLayoutConstraint.activate([ view1.leftAnchor.constraint(equalTo: view2.leftAnchor), view1.rightAnchor.constraint(equalTo: view2.rightAnchor), view1.topAnchor.constraint(equalTo: view2.topAnchor), view1.heightAnchor.constraint( greaterThanOrEqualTo: view2.heightAnchor, multiplier: 2, constant: 10 ) ])
11. ϨΠΞ΢τଐੑ + ؔ܎ੑ
14. Auto Layoutͷಛ௃ • ʮଐੑ1 = ܎਺ × ଐੑ2 + ఆ਺ʯͷؔ ܎ੑʢ੍໿ʣΛ એݴతʹهड़Ͱ͖Δ • Ϗϡʔ֊૚ʹґଘ͠ͳ͍ • ෆ౳ࣜɺ༏ઌ౓ɺݻ༗αΠζɺऩॖ ੑɾ๲ுੑ • Xcode ʹΑΔGUIαϙʔτ • ಠࣗDSL (Visual Format) • UIStackView΋Auto Layoutϕʔε
15. Auto Layout ͷ ΞϧΰϦζϜɹɹ
16. ଐੑ1 = ܎਺ × ଐੑ2 + ఆ਺
19. は制約の数
20. ઢܗ୅਺
22. or
23. import Accelerate // LU෼ղ͔Β࿈ཱํఔࣜΛղ͘ func solve(_ A: [Double], _ B: [Double]) -> [Double] { var inMatrix = A, solution = B var N = __CLPK_integer( sqrt( Double( A.count ) ) ) var N2 = N, N3 = N, LDA = N, LDB = N var NRHS: __CLPK_integer = 1 var pivots = [__CLPK_integer](repeating: 0, count: Int(N)) var error: __CLPK_integer = 0 dgetrf_(&N, &N2, &inMatrix, &N3, &pivots, &error) var t = "T".cString(using: .utf8)!.first! dgetrs_(&t, &N, &NRHS, &inMatrix, &LDA, &pivots, &solution, &LDB, &error) return solution }
24. ग़དྷ·ͨ͠!
25. ͦΜͳ୯७͡Όͳ͍ • Auto Layout͸ɺ౳͚ࣜͩͰͳ͘ɺෆ౳ࣜ΋ѻ͏ • ༏ઌ౓͕͋ΔͨΊɺඞͣ౳ࣜɾෆ౳͕ࣜ੒ཱ͢Δඞཁ͸ͳ͍ • ༏ઌ౓ͷߴ͍ॱʹɺͳΔ΂͘ଟ͘ͷ੍໿Λຬͨ͢Α͏ʹɺϨ ΠΞ΢τΛ࠷దԽ͢Δ (= ࠷దԽ໰୊) • ࠷దԽ໰୊ = ͋Δ੍໿৚݅Λຬͨ͢ީิͷத͔Βɺ໨తؔ਺ Λ࠷େ·ͨ͸࠷খʹ͢ΔΑ͏ͳղΛٻΊΔ
26. ઢܗܭը໰୊ Linear Programming Problem
27. ઢܗܭը໰୊ ༩͑ΒΕͨઢܗ(1࣍)ͳ౳͓ࣜΑͼෆ౳੍ࣜ໿ͷ΋ͱͰɺઢܗͳ ໨తؔ਺Λ࠷େԽ͋Δ͍͸࠷খԽ͢Δ໰୊ 目的関数 を最大化 最小化する
29. ྫɿੜ࢈ܭը໰୊ 4छྨͷݪྉAɺBɺCɺDΛ༻͍ͯɺ3छྨͷ੡඼XɺYɺZΛੜ ࢈͢Δ޻৔͕ɺ࠷େͷརӹΛ͋͛ΔͨΊʹੜ࢈ܭըΛཱͯΔɻ • ݪྉͷ૯ྔɿA = 80kgɺB = 50kgɺC = 100kgɺD = 70kg • ੡඼ͷՁ֨ɿX = 70ສԁɺY = 120ສԁɺZ = 30ສԁ • ੡඼ίετɿX͸1୯Ґ͋ͨΓ (A, B, C, D) = (5, 0, 7, 3) ͷίε τɺY͸ (0, 2, 0, 11)ɺZ͸ (6, 8, 15, 0) • ૯རӹ = Λ࠷େԽ͍ͨ͠
31. Auto Layout ͬΆ͍ !
32. ղ͖ํ͍Ζ͍Ζ • γϯϓϨοΫε๏ (୯ମ๏) • ತଟ໘ମͰ͋Δ࣮ߦՄೳྖҬͷ௖఺Λ୳ࡧ͢Δ • ପԁମ๏ • ଟ߲ࣜ࣌ؒΞϧΰϦζϜ͕ͩɺ࣮༻తͰͳ͍ • ಺఺๏ (ΧʔϚʔΧʔ๏ͳͲ) • ࣮ߦՄೳྖҬͷ಺෦Λ௨ͬͯ࠷దղ΁ۙͮ͘
33. Auto LayoutΞϧΰϦζϜʹٻΊΒΕΔ΋ͷ • ΠϯλϥΫςΟϒͳUIΞϓϦέʔγϣϯΛ࡞Δ্Ͱɺߴ଎ͳ ύϑΥʔϚϯε͸͔ܽͤͳ͍ • ͙͢Ε࣮ͨ૷ͷʮγϯϓϨοΫε๏ʯͱʮ಺఺๏ʯͷޮ཰ ʹɺେ͖ͳ༏ྼ͸ແ͍ • ͔͠͠ɺ໨తؔ਺΍੍໿ͷඍখͳมԽͷ࠷దԽΛ܁Γฦ͠ߦ ͏৔߹ɺʮγϯϓϨοΫε๏ʯͷํ͕ࠩ෼ߋ৽͕Ͱ͖ͯɺ༏ Ε͍ͯΔ
35. Cassowary
36. Cassowary • UIͷͨΊͷ੍໿ϓϩάϥϛϯάख๏ • 2ஈ֊ʴ૒ରγϯϓϨοΫε๏Λ༻͍ͯɺઢܗ౳ࣜɾෆ౳ ࣜͷ੍໿Λࠩ෼ߋ৽ͯ͠ղ͘ • એݴతͳهड़͕Մೳʢ੍໿ͷॱংɾ֊૚ʹґଘ͠ͳ͍ʣ • Smalltalk/C++/Java/JavaScript/Python/Cocoa*1ͳͲαϙʔτ *1 Auto Layout͸ɺmacOS 10.7 Lion, iOS 6Ҏ͔߱Βαϙʔτɻ ͪͳΈʹɺmacOS 10.5 Leopardʹ͸ɺ CAConstraintLayoutManager ͱ͍͏CALayer༻ͷ੍໿ϨΠΞ΢τػೳ͕͋Δɻ
38. γϯϓϨοΫε๏ Simplex Method
40. εϥοΫม਺ Λಋೖͯ͠ɺෆ౳ࣜΛ౳ࣜʹ௚͢
41. ࢼ͠ʹɺ ΛೖΕͯΈΔͱɺ ʢॳظ࣮ߦՄೳղʣ͕ٻ·Δ ͜ͷͱ͖ɺ ΛಘΔ
42. ͜͜Ͱɺ Λ૿΍ͤ͹ɺ ͸͞Βʹখ͘͞ͳΔ ʹ·ͩ࠷దղͰ͸ͳ͍
43. ͨͩ͠ɺ Λ૿΍͗͢͠Δͱɺଞͷม਺͕ϚΠφεʹͳͬͯ͠ ·͏ͷͰɺখ͘͞ݟੵ΋ͬͯɺ ·Ͱ૿΍͢ ʢ֤ߦͷ੍໿ͷʮ܎਺ʯͱʮఆ਺ʯ͔Β൑அ → 1ߦ໨ΛબͿʣ Ұൠʹɺ ͕࠷খʹͳΔ ߦ໨ΛબͿ
44. બΜͩ1ߦ໨ʹ͍ͭͯ 3 ͰׂΓɺͦͷଞͷߦʹ͸ɺ ʹ͍ͭͯղ ͍ͨ Λ୅ೖʢΨ΢εফڈ๏ʣ ͳ͓ɺ ͷ෦෼ΛʮϐϘοτʯͱ͍͏
45. ࣍ʹɺ Λ૿΍ͯ͠ɺ Λ͞Βʹখ͘͢͞Δ
46. ͕࠷খͱͳΔͷ͸ɺ੍໿2ߦ໨Λબ୒ͨ͠ͱ͖ Λଞͷߦʹ୅ೖ
47. ʹϚΠφεͷ܎਺͕ͳ͍ͷͰɺ͜ΕҎ্খ͘͞Ͱ͖ͳ͍ ʹ࠷దղʹ౸ୡ !
48. ↓ ↓
52. γϯϓϨοΫε๏ (୯ମ๏) 1. ༩͑ΒΕͨઢܗܭը໰୊ʹεϥοΫม਺Λಋೖͯ͠ɺඪ४ܗ ʹ௚͢ 2. ࣮ߦՄೳجఈղͱͳΔ୺఺Λग़ൃ఺ʹબͿ 3. ୺఺ؒΛϐϘοτૢ࡞ͰҠಈ͠ɺ໨తؔ਺Λվળ͢Δ • جఈม਺ʹೖΕΔɾೖΕͳ͍ɺͷબ୒Λ܁Γฦ͢ 4. ࠷దղͱͳΔ୺఺͕ٻ·Δ
53. γϯϓϨοΫε๏ (୯ମ๏) • ઢܗܭը໰୊͕ղ͚ͳ͍έʔε • ࣮ߦෆՄೳʢ࣮ߦՄೳղ͕ଘࡏ͠ͳ͍ʣ • ඇ༗քʢ໨తؔ਺Λ͍͘ΒͰ΋վળͰ͖ͯ͠·͏ʣ • ࠷খఴ͑ࣈنଇ (Bland rule) ... ແݶϧʔϓରࡦ • ໨తؔ਺ͷ܎਺Λॱʹฒ΂ͯɺ࠷ॳʹෛʹͳΔʢ࠷খఴ͑ ࣈʣม਺Λબͼɺ ͷީิʹ͍ͭͯ΋࠷খఴ͑ࣈΛબͿ
54. ྫɿγϯϓϨοΫε๏͕؆୯ʹద༻Ͱ͖ͳ͍৔߹ Ұൠͷઢܗܭը໰୊Λඪ४ܗʹมܗͯ͠΋ɺॳظجఈղΛ؆୯ ʹٻΊΒΕͳ͍৔߹͕͋Δʢඇجఈม਺ʹ0Λ୅ೖͯ͠΋μϝʣ
55. 2ஈ֊γϯϓϨοΫε๏ Two-Phase Simplex Method
56. 2ஈ֊γϯϓϨοΫε๏ 1. ʮϓϥε܎਺ͷεϥοΫม਺Λ࣋ͨͳ੍͍໿ʯʹඇෛͷਓ޻ ม਺ΛՃ͑Δ 2. ਓ޻ม਺ͷ࿨Λऔͬͨɺਓ޻తͳ໨తؔ਺Λ࡞Δ 3. ʮਓ޻తͳ໨తؔ਺ʯͱʮमਖ਼͞Ε੍ͨ໿ʯͷςʔϒϧʹͭ ͍ͯɺୈ1ஈ֊ͷγϯϓϨοΫε๏Λద༻͢Δ 4. ಘΒΕͨ݁Ռ͔Βɺਓ޻ม਺ͱਓ޻໨తؔ਺ΛऔΓআ͍ͨς ʔϒϧʹ͍ͭͯɺୈ2ஈ֊ͷγϯϓϨοΫε๏Λద༻͢Δ
57. ૒ରγϯϓϨοΫε๏ Dual Simplex Method
58. ओ໰୊ͱ૒ର໰୊ ↓
59. ૒ରఆཧɹɹɹɹ Duality Theorem ઢܗܭը໰୊ (ओ໰୊) ͕࠷దղΛ΋ͭͳΒ͹ɺ ૒ର໰୊΋࠷దղΛ΋ͪɺͦͷ࠷ద஋͸౳͍͠
60. ⁷ ओ໰୊ͱ૒ର໰୊ͷͲͪΒΛղ͍ͯ΋ྑ͍
61. ૒ରγϯϓϨοΫε๏Λ࢖͏λΠϛϯά • ઢܗܭը໰୊ͷ࠷ద஋ͱ࠷దղ͕͢Ͱʹٻ·͓ͬͯΓɺ౳ࣜ ੍໿ ͷ Λ ʹஔ͖׵͍͑ͨ৔߹ɺҰ͔ΒγϯϓϨ οΫεදΛ࠶ߏஙʢओ໰୊Λղ͖௚͢ʣ͠ͳͯ͘ྑ͍ • ͳͥͳΒɺ૒ର໰୊ͷ੍໿͸ɺ ʹରͯ͠ෆมͰɺ૒ର ໰୊ͷ࣮ߦՄೳੑ͸อͨΕΔʢͨͩ͠ඇෛ৚݅͸յΕΔʣͷ Ͱɺओ໰୊Λ૒ର໰୊ʹม׵ͯ͠ɺγϯϓϨοΫε๏Λద༻ ͢Ε͹ྑ͍ͨΊ
63. Cassowary + γϯϓϨοΫε๏
64. 1. γϯϓϨοΫε๏ͷద༻ • ϨΠΞ΢τଐੑʢม਺ʣ͸Ұൠʹඇෛ৚͕݅ͳ͍ ʢframe.origin͸ϚΠφεʹͳΓಘΔʣ • ͦͷ··Ͱ͸ɺγϯϓϨοΫε๏͕࢖͑ͳ͍ • ʮඇෛ৚݅ͷͳ͍ม਺ΛؚΉ੍໿ʯͱʮඇෛ৚݅͋Γͷม਺ ͷΈ͔ΒͳΔ੍໿ʯͷ2ͭͷςʔϒϧʹ෼཭͢Δ • લऀ͸ɺʮඇෛ৚݅ͷͳ͍ม਺ = ඇෛ৚݅͋Γͷม਺ͷઢ ܗ݁߹ʯͷܗʹ͢Δ
65. ྫɿ ɺ ͸ඇෛ৚͕݅ͳ͍ͷͰɺԣઢΛҾ্͍ͯʹ෼཭ɻγ ϯϓϨοΫε๏ͷϐϘοτૢ࡞ର৅͸ɺԼ෦෼ͷ੍໿ͷΈɻ
66. 2. ੍໿ͷࠩ෼ߋ৽ʢ௥Ճʣ γϯϓϨοΫεදʹɺ৽ͨͳߦʢ੍໿ʣΛ௥Ճ͢Δ • ৽੍͍͠໿ͷதʹطଘͷجఈม਺͕͋Δ৔߹ɺ୅ೖͯ͠ফڈ • ৽੍͍͠໿ͷதʹطଘͷجఈม਺͸ͳ͍͕ɺ৽͍͠جఈม਺ ͕؆୯ʹٻ·Δ৔߹ɺطଘߦʹ৽͍͠جఈม਺ͷ୅ೖૢ࡞Λ ߦ্ͬͨͰɺ৽ͨͳ੍໿ʹ͍ͭͯߦ௥Ճ͢Δ • ؆୯ʹٻ·Βͳ͍৔߹ɺ2ஈ֊γϯϓϨοΫε๏Λద༻͠ ͯɺجఈม਺ΛٻΊ্ͨͰɺߦ௥Ճ͢Δ
67. ྫɿ͜ͷදʹ ͷ੍໿Λ৽ͨʹ௥Ճ͍ͨ͠৔߹ɺ͢Ͱʹ ͕͋ΔͷͰɺ୅ೖͯ͠ ɻ ͨͩ͠ɺ ͱ ͷͲͪΒ͕جఈม਺ʹͳΔ͔෼͔Βͳ͍ͷͰɺ ( ͸ਓ޻ม਺)ͱ͓͍ͯɺ2ஈ֊γϯϓϨοΫ ε๏Λ࢖͏ɻ
68. ʢ2ஈ֊γϯϓϨοΫε๏ͷద༻݁Ռʣ
69. 3. ੍໿ͷࠩ෼ߋ৽ʢ࡟আʣ γϯϓϨοΫεද͔Βɺ࡟আର৅ͷ੍໿ʹ૬౰͢ΔطଘߦΛ࡟ আ͍ͨ͠ • ͕ɺද͸͢Ͱʹ౓ॏͳΔߦྻૢ࡞ʹΑΓɺ࡟আର৅ͷߦ৘ใ ͕ଞͷ֤ߦʹࠞͬͯ͟͠·͍ͬͯΔͷͰɺ࠶ͼ1ߦʹू໿͠௚ ͔ͯ͠Βߦ࡟আ͢Δඞཁ͕͋Δ • 1ߦʹू໿͠௚͢޻෉ͱͯ͠ɺεϥοΫม਺ͳͲͷ௥Ճม਺͕ ੍֤໿ݻ༗ͷ৘ใͱͯ͠࢖͑ΔͨΊɺϚʔΧʔͱͯ͠ར༻͢ Δʢྑ͍௥Ճม਺͕ͳ͍৔߹ɺμϛʔม਺Λ௥Ճʣ
70. ྫ1ɿલճɺ੍໿Λ௥Ճ্ͨ͠ͷද͔Βɺ ੍໿ Λ࡟আ͍ͨ͠৔߹ɺ ͕ϚʔΧʔͰ͋Γɺ࠷ऴߦʹ͢Ͱʹू໿ ͞Ε͍ͯΔͷͰɺͦͷ··࠷ऴߦΛ࡟আͯ͠ɺԼͷදΛಘΔ
71. ྫ2ɿࠨਤͷ (1) ͷ੍໿ͷू߹͔Βɺ (2) ͷγϯϓϨοΫεදΛಘͨޙɺ ʢ ɺϚʔΧʔ͸ ʣ੍໿Λ ࡟আ͢Δ৔߹Λߟ͑Δɻ ·ͣɺ ͱͳΔߦ͕ͳ͍ͨΊɺ୯ ७ͳߦ࡟আ͸Ͱ͖ͳ͍ɻ ͦ͜Ͱɺ࠷খൺϧʔϧΛ༻͍ͯɺ ͷߦΛબͼɺ(3) ͷܗʹมܗʴଞͷߦʹ୅ ೖͨ͠ޙɺ(4) બΜͩߦΛ࡟আ͢Δɻ ʢ࡟আલ͸Ұ࣌తʹɺ࣮ߦՄೳղʹͳΒ ͳ͍͕ɺ࡟আޙ͸࣮ߦՄೳղͱͳΔʣ
72. 4. ༏ઌ౓ͷѻ͍ ༏ઌ౓͕͋Δ੍໿ʹ͍ͭͯ͸ɺޡࠩΛڐ༰͢Δ1ʙ2ݸͷΤϥʔ ม਺Λಋೖ͠ɺॏΈ Λ෇͚ͯ໨తؔ਺ʹՃ͑ɺ࠷খԽ͢Δ
73. ( ͱ͓͍ͯղ͍ͨ৔߹)
74. 5. ʮม਺1ͭͷ஋ͷมԽʯʹ͍ͭͯࠩ෼ߋ৽ UIૢ࡞Ͱɺ1ͭͷϨΠΞ΢τଐੑͷ஋ΛසൟʹมԽ͍ͤͨ͞৔߹ ʢྫɿ΢Οϯυ΢ͷwidthΛม͑ͯɺϨΠΞ΢τશମ΋Ϩεϙϯ γϒʹมߋʣɺ2छྨͷม਺Λ؅ཧͯ͠ɺಛผॲཧΛߦ͏ • Editม਺ (༏ઌ౓ɾߴ) ... ஋Λมߋ͍ͨ͠ม਺ • ྫɿ window.width = newValue • Stayม਺ (༏ઌ౓ɾ௿) ... ݱࡏҐஔʹ(ͳΔ΂͘)ཹΊ͍ͨม਺ • ྫɿ window.left
75. EditʹΑͬͯɺStayม਺ ͕ ʹมԽ͢Δ৔߹ɿ • ͱ΋ʹجఈม਺Ͱ͸ͳ͍৔߹ɺ࠷దղ͸ͱ΋ʹθϩʹ ͳΔͷͰɺ (มԽ͕ͳ͍ͷͰɺදʹԿ΋͠ͳ͍) • ͕جఈม਺ͷͱ͖ɺ ͷߦΛ୅ೖ ΛಘΔͷͰɺ (stay)ʹ͢Δʹ͸ɺ ʹஔ׵
76. Editม਺ ͷ஋Λ ʹमਖ਼͢Δ৔߹ɿ 2ͭͷΤϥʔม਺͸ৗʹϖΞͰݱΕΔͷͰɺදͷ֤ߦʹ͍ͭͯ ͱஔ͖׵͑Δͱ
77. ʢલϖʔδͷଓ͖ʣ ͭ·Γɺߦ ͷఆ਺߲Λ ʹमਖ਼͢Δ͚ͩ ʢ ܎਺ʹ Λ͔͚ͯఆ਺߲ʹՃ͑ΔʣͰɺද͔ΒEdit੍ ໿Λ࡟আɾ࠶௥ՃΛ͠ͳͯ͘΋ɺΑΓߴ଎ʹࠩ෼ߋ৽Ͱ͖Δɻ ͨͩ͠ɺमਖ਼͞Εͨද͸ɺ࣮ߦՄೳͰͳ͍৔߹͕͋ΔͷͰɺఆ ਺มԽʹର੍ͯ͠໿ෆมͳ૒ରγϯϓϨοΫε๏Λద༻͢Δɻ
80. ·ͱΊ (1) • CassowaryΛཧղ͢Δͷ͸ɺҰݟɺ೉͘͠ݟ͑Δ! • Ͱ΋ɺࠓ·Ͱ࢖ͬͨܭࢉ͸ʮ଍͠ࢉʯʮֻ͚ࢉʯʮ؆୯ͳߦ ྻૢ࡞ʯͷΈ → ඍੵ෼ͳͲ͸ग़ͯ͜ͳ͍ • ߴߍ਺ֶͷ஌͕ࣝ͋Ε͹ɺे෼ཧղͰ͖Δ • Ή͠Ζɺӳޠத৺ͷ࿦จ΍৘ใΛಡΉํ͕େม • ӳޠ >>>>> ਺ֶ
81. ·ͱΊ (2) • Cassowary͸ม਺Λʮ޷͖ͳ͚ͩʯ੍໿ʹ࢖͏͜ͱ͕Մೳ • Auto Layout͸ɺʮ2ͭͷଐੑʯͷؔ܎ੑͷΈ Cassowary͕ڧྗͳྫ // superView, view1, view2ߏ੒Ͱɺ౳ִؒʹ഑ஔ (4ଐੑؒͷؔ܎ੑ) view1.left - superView.left = view2.left - view1.right view1.left - superView.left = superView.right - view2.right
82. Auto Layout͸ ࣗΒͷՄೳੑΛ ੍໿͍ͯ͠Δ
83. One more thing...
84. Cassowary https://github.com/inamiy/Cassowary
85. References • Alan Borning, Kim Marriott, Peter Stuckey, and Yi Xiao. Solving Linear Arithmetic Constraints for User Interface Applications (1997) • ࡉ෦ ത࢙. ϢʔβΠϯλϑΣʔεͷͨΊͷઢܗ౳ࣜɾෆ౳ࣜ ੍໿ղফܥ (2002) • pybee/cassowary (Python version) • robb/Cartography (Auto Layout wrapper in Swift)
86. Thanks! Yasuhiro Inami @inamiy