SwiftUI のレイアウトメカニズム / The layout mechanism of SwiftUI

Transcript

1. 4XJGU6*
   ͷ
 ϨΠΞ΢τϝΧχζϜ for
   :6.&.*TXJGU
   
   d88%$ใࠂձd 㚉䄍
2. } var employedBy = "YUMEMI Inc." var job = "iOS Tech Lead" var favoriteLanguage = "Swift" var twitter = "@lovee" var qiita = "lovee" var github = "el-hoshino" var additionalInfo = """ ਂ໷όεͰγϣϧμʔόοά๨Εͨ! """ final class Me: Developable, Talkable {
6. 4XJGU6*
   ͷϨΠΞ΢τ
7. 4XJGU6*
   ͷϏϡʔώΤϥϧΩʔ
8. struct ContentView : View { var body: some View { } } Content View
9. struct ContentView : View { var body: some View { Text("A Text View") } } Content View A Text View
10. struct ContentView : View { var body: some View { Text("A Text View") .padding(5) } } Content View Padding View A Text View
11. struct ContentView : View { var body: some View { Text("A Text View") .padding(5) .border(Color.blue) } } Content View Border View Padding View A Text View
12. struct ContentView : View { var body: some View { Text("A Text View") .padding(5) .border(Color.blue) } } Content View Border View Padding View A Text View
13. struct ContentView : View { var body: some View { Text("A Text View") .padding(5) .border(Color.blue) } } Content View Border View Padding View A Text View
14. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .padding(5) .border(Color.blue) } } Content View Border View Padding View A Text View
15. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View
16. 4XJGU6*
    ͷϨΠΞ΢τ
17. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
18. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
19. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
20. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
21. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ࢲͷαΠζ͸
 X
    I Ͱ͢
22. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X
    I Ͱ͢
23. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X 
    I  Ͱ
24. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y
    Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y 
    Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X 
    I  Ͱ ࢲͷαΠζ͸
 X 
    I 
25. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ͡Ό͓͋લαΠζ͸ X 
    I  Ͱ
 த৺͸ Y
    Z Ͷ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X 
    I  Ͱ ࢲͷαΠζ͸
 X 
    I 
26. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ͡Ό͓͋લαΠζ͸ X 
    I  Ͱ
 த৺͸ Y
    Z Ͷ ͡Ό͓͋લαΠζ͸ X 
    I  Ͱ
 த৺͸ X  
    I   Ͷ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X 
    I  Ͱ ࢲͷαΠζ͸
 X 
    I 
27. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ͡Ό͓͋લαΠζ͸ X 
    I  Ͱ
 த৺͸ Y
    Z Ͷ ͡Ό͓͋લαΠζ͸ X 
    I  Ͱ
 த৺͸ X  
    I   Ͷ ͡Ό͓͋લαΠζ͸ X
    I Ͱ
 த৺͸ X  
    I   Ͷ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X 
    I  Ͱ ࢲͷαΠζ͸
 X 
    I 
28. struct ContentView : View { var body: some View { Text("A Very Long Text That Can't Be Displayed In 1 Line View") .lineLimit(nil) .padding(5) .border(Color.blue) } } Content View Border View Padding View Line Limit View A Text View ͡Ό͓͋લαΠζ͸ X 
    I  ɺ
 த৺͸ Y
    Z Ͷ ͡Ό͓͋લαΠζ͸ X 
    I  ɺ
 த৺͸ X  
    I   Ͷ ͡Ό͓͋લαΠζ͸ X
    I ɺ
 த৺͸ X  
    I   Ͷ ͡Ό͓͋લαΠζ͸ X
    I Ͱ
 த৺͸ X
    I Ͷ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X
    I Ͱ͢ ࢲͷαΠζ͸
 X 
    I  Ͱ ࢲͷαΠζ͸
 X 
    I 
29. final class View: UIView { let label = UILabel() override func layoutSubviews() { super.layoutSubviews() label.frame.size = label.sizeThatFits(bounds.size) label.center = CGPoint(x: bounds.midX, y: bounds.midY) } }
30. #VJMEJOH
    $VTUPN
    7JFXT
    XJUI
    4XJGU6* IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
31. ٙ໰ɿ
    ࢠϏϡʔͷαΠζΛฉ͘ࡍʹɺ਌ϏϡʔͷαΠζ Ҏ֎ʹԿΛ౉͍ͯ͠Δͷ͔ʁͦͯͦ͠ΕΛΧελ ϚΠζ͢Δํ๏͸ͳ͍ͷ͔ʁ
    গͳ͘ͱ΋
    4BGF
    "SFB
    ͷར༻͸ࢠϏϡʔͰ੍ޚͯ͠ΔͷͰʜ
32. ͳΜ͔͋Γͦ͏"
33. ʲએ఻ʳ
34. גࣜձࣾΏΊΈɺΤϯδχΞઈࢍืूத IUUQSFDSVJUZVNFNJDPKQ 䱰⾂
 ؽ٨ضٌ
 ✌؜猳