Slide 1
Slide 1 text
AutoLayout
Algorithm
2017/09/16 iOSDC Japan 2017
Yasuhiro Inami / @inamiy
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
ϚϧνσόΠε
ϚϧνϨΠΞτରԠ
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Auto Layout
ʮ੍ʯʹΑΔUIͷϨΠΞτܭࢉ
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Auto Layout + Code
view.addConstraints([
NSLayoutConstraint(
item: view1,
attribute: .centerX,
relatedBy: .equal,
toItem: view2,
attribute: .centerX,
multiplier: 1.0,
constant: 0
), ...
])
Slide 9
Slide 9 text
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)
Slide 10
Slide 10 text
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
)
])
Slide 11
Slide 11 text
ϨΠΞτଐੑ
+
ؔੑ
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Auto Layoutͷಛ
• ʮଐੑ1 = × ଐੑ2 + ఆʯͷؔ
ੑʢ੍ʣΛ એݴతʹهड़Ͱ͖Δ
• Ϗϡʔ֊ʹґଘ͠ͳ͍
• ෆࣜɺ༏ઌɺݻ༗αΠζɺऩॖ
ੑɾுੑ
• Xcode ʹΑΔGUIαϙʔτ
• ಠࣗDSL (Visual Format)
• UIStackViewAuto Layoutϕʔε
Slide 15
Slide 15 text
Auto Layout ͷ
ΞϧΰϦζϜɹɹ
Slide 16
Slide 16 text
ଐੑ1 = × ଐੑ2 + ఆ
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
は制約の数
Slide 20
Slide 20 text
ઢܗ
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
or
Slide 23
Slide 23 text
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
}
Slide 24
Slide 24 text
ग़དྷ·ͨ͠!
Slide 25
Slide 25 text
ͦΜͳ୯७͡Όͳ͍
• Auto Layoutɺ͚ࣜͩͰͳ͘ɺෆࣜѻ͏
• ༏ઌ͕͋ΔͨΊɺඞͣࣜɾෆཱ͕ࣜ͢Δඞཁͳ͍
• ༏ઌͷߴ͍ॱʹɺͳΔ͘ଟ͘ͷ੍Λຬͨ͢Α͏ʹɺϨ
ΠΞτΛ࠷దԽ͢Δ (= ࠷దԽ)
• ࠷దԽ = ͋Δ੍݅Λຬͨ͢ީิͷத͔Βɺతؔ
Λ࠷େ·ͨ࠷খʹ͢ΔΑ͏ͳղΛٻΊΔ
Slide 26
Slide 26 text
ઢܗܭը
Linear Programming Problem
Slide 27
Slide 27 text
ઢܗܭը
༩͑ΒΕͨઢܗ(1࣍)ͳ͓ࣜΑͼෆ੍ࣜͷͱͰɺઢܗͳ
తؔΛ࠷େԽ͋Δ͍࠷খԽ͢Δ
目的関数 を最大化 最小化する
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
ྫɿੜ࢈ܭը
4छྨͷݪྉAɺBɺCɺDΛ༻͍ͯɺ3छྨͷXɺYɺZΛੜ
࢈͢Δ͕ɺ࠷େͷརӹΛ͋͛ΔͨΊʹੜ࢈ܭըΛཱͯΔɻ
• ݪྉͷ૯ྔɿA = 80kgɺB = 50kgɺC = 100kgɺD = 70kg
• ͷՁ֨ɿX = 70ສԁɺY = 120ສԁɺZ = 30ສԁ
• ίετɿX1୯Ґ͋ͨΓ (A, B, C, D) = (5, 0, 7, 3) ͷίε
τɺY (0, 2, 0, 11)ɺZ (6, 8, 15, 0)
• ૯རӹ = Λ࠷େԽ͍ͨ͠
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Auto Layout
ͬΆ͍ !
Slide 32
Slide 32 text
ղ͖ํ͍Ζ͍Ζ
• γϯϓϨοΫε๏ (୯ମ๏)
• ತଟ໘ମͰ͋Δ࣮ߦՄೳྖҬͷΛ୳ࡧ͢Δ
• ପԁମ๏
• ଟ߲ࣜ࣌ؒΞϧΰϦζϜ͕ͩɺ࣮༻తͰͳ͍
• ๏ (ΧʔϚʔΧʔ๏ͳͲ)
• ࣮ߦՄೳྖҬͷ෦Λ௨ͬͯ࠷దղۙͮ͘
Slide 33
Slide 33 text
Auto LayoutΞϧΰϦζϜʹٻΊΒΕΔͷ
• ΠϯλϥΫςΟϒͳUIΞϓϦέʔγϣϯΛ࡞Δ্Ͱɺߴͳ
ύϑΥʔϚϯε͔ܽͤͳ͍
• ͙͢Ε࣮ͨͷʮγϯϓϨοΫε๏ʯͱʮ๏ʯͷޮ
ʹɺେ͖ͳ༏ྼແ͍
• ͔͠͠ɺత੍ؔͷඍখͳมԽͷ࠷దԽΛ܁Γฦ͠ߦ
͏߹ɺʮγϯϓϨοΫε๏ʯͷํ͕ࠩߋ৽͕Ͱ͖ͯɺ༏
Ε͍ͯΔ
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Cassowary
Slide 36
Slide 36 text
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༻ͷ੍ϨΠΞτػೳ͕͋Δɻ
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
γϯϓϨοΫε๏
Simplex Method
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
εϥοΫม
Λಋೖͯ͠ɺෆࣜΛࣜʹ͢
Slide 41
Slide 41 text
ࢼ͠ʹɺ ΛೖΕͯΈΔͱɺ
ʢॳظ࣮ߦՄೳղʣ͕ٻ·Δ
͜ͷͱ͖ɺ ΛಘΔ
Slide 42
Slide 42 text
͜͜Ͱɺ Λ૿ͤɺ ͞Βʹখ͘͞ͳΔ
ʹ·ͩ࠷దղͰͳ͍
Slide 43
Slide 43 text
ͨͩ͠ɺ Λ૿͗͢͠Δͱɺଞͷม͕ϚΠφεʹͳͬͯ͠
·͏ͷͰɺখ͘͞ݟੵͬͯɺ ·Ͱ૿͢
ʢ֤ߦͷ੍ͷʮʯͱʮఆʯ͔Βஅ → 1ߦΛબͿʣ
Ұൠʹɺ ͕࠷খʹͳΔ ߦΛબͿ
Slide 44
Slide 44 text
બΜͩ1ߦʹ͍ͭͯ 3 ͰׂΓɺͦͷଞͷߦʹɺ ʹ͍ͭͯղ
͍ͨ ΛೖʢΨεফڈ๏ʣ
ͳ͓ɺ ͷ෦ΛʮϐϘοτʯͱ͍͏
Slide 45
Slide 45 text
࣍ʹɺ Λ૿ͯ͠ɺ Λ͞Βʹখ͘͢͞Δ
Slide 46
Slide 46 text
͕࠷খͱͳΔͷɺ੍2ߦΛબͨ͠ͱ͖
Λଞͷߦʹೖ
Slide 47
Slide 47 text
ʹϚΠφεͷ͕ͳ͍ͷͰɺ͜ΕҎ্খ͘͞Ͱ͖ͳ͍
ʹ࠷దղʹ౸ୡ !
Slide 48
Slide 48 text
↓
↓
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
γϯϓϨοΫε๏ (୯ମ๏)
1. ༩͑ΒΕͨઢܗܭըʹεϥοΫมΛಋೖͯ͠ɺඪ४ܗ
ʹ͢
2. ࣮ߦՄೳجఈղͱͳΔΛग़ൃʹબͿ
3. ؒΛϐϘοτૢ࡞ͰҠಈ͠ɺతؔΛվળ͢Δ
• جఈมʹೖΕΔɾೖΕͳ͍ɺͷબΛ܁Γฦ͢
4. ࠷దղͱͳΔ͕ٻ·Δ
Slide 53
Slide 53 text
γϯϓϨοΫε๏ (୯ମ๏)
• ઢܗܭը͕ղ͚ͳ͍έʔε
• ࣮ߦෆՄೳʢ࣮ߦՄೳղ͕ଘࡏ͠ͳ͍ʣ
• ඇ༗քʢతؔΛ͍͘ΒͰվળͰ͖ͯ͠·͏ʣ
• ࠷খఴ͑ࣈنଇ (Bland rule) ... ແݶϧʔϓରࡦ
• తؔͷΛॱʹฒͯɺ࠷ॳʹෛʹͳΔʢ࠷খఴ͑
ࣈʣมΛબͼɺ ͷީิʹ͍ͭͯ࠷খఴ͑ࣈΛબͿ
Slide 54
Slide 54 text
ྫɿγϯϓϨοΫε๏͕؆୯ʹద༻Ͱ͖ͳ͍߹
ҰൠͷઢܗܭըΛඪ४ܗʹมܗͯ͠ɺॳظجఈղΛ؆୯
ʹٻΊΒΕͳ͍߹͕͋Δʢඇجఈมʹ0Λೖͯ͠μϝʣ
Slide 55
Slide 55 text
2ஈ֊γϯϓϨοΫε๏
Two-Phase Simplex Method
Slide 56
Slide 56 text
2ஈ֊γϯϓϨοΫε๏
1. ʮϓϥεͷεϥοΫมΛ࣋ͨͳ੍͍ʯʹඇෛͷਓ
มΛՃ͑Δ
2. ਓมͷΛऔͬͨɺਓతͳతؔΛ࡞Δ
3. ʮਓతͳతؔʯͱʮमਖ਼͞Ε੍ͨʯͷςʔϒϧʹͭ
͍ͯɺୈ1ஈ֊ͷγϯϓϨοΫε๏Λద༻͢Δ
4. ಘΒΕͨ݁Ռ͔ΒɺਓมͱਓతؔΛऔΓআ͍ͨς
ʔϒϧʹ͍ͭͯɺୈ2ஈ֊ͷγϯϓϨοΫε๏Λద༻͢Δ
Slide 57
Slide 57 text
ରγϯϓϨοΫε๏
Dual Simplex Method
Slide 58
Slide 58 text
ओͱର
↓
Slide 59
Slide 59 text
ରఆཧɹɹɹɹ
Duality Theorem
ઢܗܭը (ओ) ͕࠷దղΛͭͳΒɺ
ର࠷దղΛͪɺͦͷ࠷ద͍͠
Slide 60
Slide 60 text
⁷
ओͱରͷͲͪΒΛղ͍ͯྑ͍
Slide 61
Slide 61 text
ରγϯϓϨοΫε๏Λ͏λΠϛϯά
• ઢܗܭըͷ࠷దͱ࠷దղ͕͢Ͱʹٻ·͓ͬͯΓɺࣜ
੍ ͷ Λ ʹஔ͖͍͑ͨ߹ɺҰ͔ΒγϯϓϨ
οΫεදΛ࠶ߏஙʢओΛղ͖͢ʣ͠ͳͯ͘ྑ͍
• ͳͥͳΒɺରͷ੍ɺ ʹରͯ͠ෆมͰɺର
ͷ࣮ߦՄೳੑอͨΕΔʢͨͩ͠ඇෛ݅յΕΔʣͷ
ͰɺओΛରʹมͯ͠ɺγϯϓϨοΫε๏Λద༻
͢Εྑ͍ͨΊ
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Cassowary
+
γϯϓϨοΫε๏
Slide 64
Slide 64 text
1. γϯϓϨοΫε๏ͷద༻
• ϨΠΞτଐੑʢมʣҰൠʹඇෛ͕݅ͳ͍
ʢframe.originϚΠφεʹͳΓಘΔʣ
• ͦͷ··ͰɺγϯϓϨοΫε๏͕͑ͳ͍
• ʮඇෛ݅ͷͳ͍มΛؚΉ੍ʯͱʮඇෛ݅͋Γͷม
ͷΈ͔ΒͳΔ੍ʯͷ2ͭͷςʔϒϧʹ͢Δ
• લऀɺʮඇෛ݅ͷͳ͍ม = ඇෛ݅͋Γͷมͷઢ
ܗ݁߹ʯͷܗʹ͢Δ
Slide 65
Slide 65 text
ྫɿ ɺ ඇෛ͕݅ͳ͍ͷͰɺԣઢΛҾ্͍ͯʹɻγ
ϯϓϨοΫε๏ͷϐϘοτૢ࡞ରɺԼ෦ͷ੍ͷΈɻ
Slide 66
Slide 66 text
2. ੍ͷࠩߋ৽ʢՃʣ
γϯϓϨοΫεදʹɺ৽ͨͳߦʢ੍ʣΛՃ͢Δ
• ৽੍͍͠ͷதʹطଘͷجఈม͕͋Δ߹ɺೖͯ͠ফڈ
• ৽੍͍͠ͷதʹطଘͷجఈมͳ͍͕ɺ৽͍͠جఈม
͕؆୯ʹٻ·Δ߹ɺطଘߦʹ৽͍͠جఈมͷೖૢ࡞Λ
ߦ্ͬͨͰɺ৽ͨͳ੍ʹ͍ͭͯߦՃ͢Δ
• ؆୯ʹٻ·Βͳ͍߹ɺ2ஈ֊γϯϓϨοΫε๏Λద༻͠
ͯɺجఈมΛٻΊ্ͨͰɺߦՃ͢Δ
Slide 67
Slide 67 text
ྫɿ͜ͷදʹ ͷ੍Λ৽ͨʹՃ͍ͨ͠߹ɺ͢Ͱʹ
͕͋ΔͷͰɺೖͯ͠ ɻ
ͨͩ͠ɺ ͱ ͷͲͪΒ͕جఈมʹͳΔ͔͔Βͳ͍ͷͰɺ
( ਓม)ͱ͓͍ͯɺ2ஈ֊γϯϓϨοΫ
ε๏Λ͏ɻ
Slide 68
Slide 68 text
ʢ2ஈ֊γϯϓϨοΫε๏ͷద༻݁Ռʣ
Slide 69
Slide 69 text
3. ੍ͷࠩߋ৽ʢআʣ
γϯϓϨοΫεද͔Βɺআରͷ੍ʹ૬͢ΔطଘߦΛ
আ͍ͨ͠
• ͕ɺද͢ͰʹॏͳΔߦྻૢ࡞ʹΑΓɺআରͷߦใ
͕ଞͷ֤ߦʹࠞͬͯ͟͠·͍ͬͯΔͷͰɺ࠶ͼ1ߦʹू͠
͔ͯ͠Βߦআ͢Δඞཁ͕͋Δ
• 1ߦʹू͢͠ͱͯ͠ɺεϥοΫมͳͲͷՃม͕
੍֤ݻ༗ͷใͱͯ͑͠ΔͨΊɺϚʔΧʔͱͯ͠ར༻͢
Δʢྑ͍Ճม͕ͳ͍߹ɺμϛʔมΛՃʣ
Slide 70
Slide 70 text
ྫ1ɿલճɺ੍ΛՃ্ͨ͠ͷද͔Βɺ ੍
Λআ͍ͨ͠߹ɺ ͕ϚʔΧʔͰ͋Γɺ࠷ऴߦʹ͢Ͱʹू
͞Ε͍ͯΔͷͰɺͦͷ··࠷ऴߦΛআͯ͠ɺԼͷදΛಘΔ
Slide 71
Slide 71 text
ྫ2ɿࠨਤͷ (1) ͷ੍ͷू߹͔Βɺ (2)
ͷγϯϓϨοΫεදΛಘͨޙɺ
ʢ ɺϚʔΧʔ ʣ੍Λ
আ͢Δ߹Λߟ͑Δɻ
·ͣɺ ͱͳΔߦ͕ͳ͍ͨΊɺ୯
७ͳߦআͰ͖ͳ͍ɻ
ͦ͜Ͱɺ࠷খൺϧʔϧΛ༻͍ͯɺ
ͷߦΛબͼɺ(3)
ͷܗʹมܗʴଞͷߦʹ
ೖͨ͠ޙɺ(4) બΜͩߦΛআ͢Δɻ
ʢআલҰ࣌తʹɺ࣮ߦՄೳղʹͳΒ
ͳ͍͕ɺআޙ࣮ߦՄೳղͱͳΔʣ
Slide 72
Slide 72 text
4. ༏ઌͷѻ͍
༏ઌ͕͋Δ੍ʹ͍ͭͯɺޡࠩΛڐ༰͢Δ1ʙ2ݸͷΤϥʔ
มΛಋೖ͠ɺॏΈ Λ͚ͯతؔʹՃ͑ɺ࠷খԽ͢Δ
Slide 73
Slide 73 text
( ͱ͓͍ͯղ͍ͨ߹)
Slide 74
Slide 74 text
5. ʮม1ͭͷͷมԽʯʹ͍ͭͯࠩߋ৽
UIૢ࡞Ͱɺ1ͭͷϨΠΞτଐੑͷΛසൟʹมԽ͍ͤͨ͞߹
ʢྫɿΟϯυͷwidthΛม͑ͯɺϨΠΞτશମϨεϙϯ
γϒʹมߋʣɺ2छྨͷมΛཧͯ͠ɺಛผॲཧΛߦ͏
• Editม (༏ઌɾߴ) ... Λมߋ͍ͨ͠ม
• ྫɿ window.width = newValue
• Stayม (༏ઌɾ) ... ݱࡏҐஔʹ(ͳΔ͘)ཹΊ͍ͨม
• ྫɿ window.left
Slide 75
Slide 75 text
EditʹΑͬͯɺStayม ͕ ʹมԽ͢Δ߹ɿ
• ͱʹجఈมͰͳ͍߹ɺ࠷దղͱʹθϩʹ
ͳΔͷͰɺ (มԽ͕ͳ͍ͷͰɺදʹԿ͠ͳ͍)
• ͕جఈมͷͱ͖ɺ ͷߦΛೖ
ΛಘΔͷͰɺ (stay)ʹ͢Δʹɺ ʹஔ
Slide 76
Slide 76 text
Editม ͷΛ ʹमਖ਼͢Δ߹ɿ
2ͭͷΤϥʔมৗʹϖΞͰݱΕΔͷͰɺදͷ֤ߦʹ͍ͭͯ
ͱஔ͖͑Δͱ
Slide 77
Slide 77 text
ʢલϖʔδͷଓ͖ʣ
ͭ·Γɺߦ ͷఆ߲Λ ʹमਖ਼͢Δ͚ͩ
ʢ ʹ Λ͔͚ͯఆ߲ʹՃ͑ΔʣͰɺද͔ΒEdit੍
Λআɾ࠶ՃΛ͠ͳͯ͘ɺΑΓߴʹࠩߋ৽Ͱ͖Δɻ
ͨͩ͠ɺमਖ਼͞Εͨදɺ࣮ߦՄೳͰͳ͍߹͕͋ΔͷͰɺఆ
มԽʹର੍ͯ͠ෆมͳରγϯϓϨοΫε๏Λద༻͢Δɻ
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
·ͱΊ (1)
• CassowaryΛཧղ͢ΔͷɺҰݟɺ͘͠ݟ͑Δ!
• Ͱɺࠓ·Ͱͬͨܭࢉʮ͠ࢉʯʮֻ͚ࢉʯʮ؆୯ͳߦ
ྻૢ࡞ʯͷΈ → ඍੵͳͲग़ͯ͜ͳ͍
• ߴߍֶͷ͕ࣝ͋ΕɺेཧղͰ͖Δ
• Ή͠Ζɺӳޠத৺ͷจใΛಡΉํ͕େม
• ӳޠ >>>>> ֶ
Slide 81
Slide 81 text
·ͱΊ (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
Slide 82
Slide 82 text
Auto Layout
ࣗΒͷՄೳੑΛ
੍͍ͯ͠Δ
Slide 83
Slide 83 text
One more thing...
Slide 84
Slide 84 text
Cassowary
https://github.com/inamiy/Cassowary
Slide 85
Slide 85 text
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)
Slide 86
Slide 86 text
Thanks!
Yasuhiro Inami
@inamiy