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

Transcript

1. 4XJGU6*ͷ

   ϨΠΞ΢τϝΧχζϜ
   for:6.&.*TXJGUd88%$ใࠂձd
   㚉䄍
   

   View Slide

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 {
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. 4XJGU6*ͷϨΠΞ΢τ
   

   View Slide

7. 4XJGU6*ͷϏϡʔώΤϥϧΩʔ
   

   View Slide

8. struct ContentView : View {
   var body: some View {
   }
   }
   Content View
   

   View Slide

9. struct ContentView : View {
   var body: some View {
   Text("A Text View")
   }
   }
   Content View
   A Text View
   

   View Slide

10. struct ContentView : View {
    var body: some View {
    Text("A Text View")
    .padding(5)
    }
    }
    Content View
    Padding View
    A Text View
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. 4XJGU6*ͷϨΠΞ΢τ
    

    View Slide

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
    ͔ͩΒ

    ͓લͷαΠζڭ͑ͯ
    

    View Slide

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
    ͔ͩΒ

    ͓લͷαΠζڭ͑ͯ
    

    View Slide

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
    ͔ͩΒ

    ͓લͷαΠζڭ͑ͯ
    

    View Slide

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
    ͔ͩΒ

    ͓લͷαΠζڭ͑ͯ
    

    View Slide

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
    Ͱ͢
    

    View Slide

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
    Ͱ͢
    

    View Slide

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
    Ͱ
    

    View Slide

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
    
    

    View Slide

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
    
    

    View Slide

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
    
    

    View Slide

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
    
    

    View Slide

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
    
    

    View Slide

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)
    }
    }
    

    View Slide

30. #VJMEJOH$VTUPN7JFXTXJUI4XJGU6*
    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    

    View Slide

31. ٙ໰ɿ
    ࢠϏϡʔͷαΠζΛฉ͘ࡍʹɺ਌ϏϡʔͷαΠζ
    Ҏ֎ʹԿΛ౉͍ͯ͠Δͷ͔ʁͦͯͦ͠ΕΛΧελ
    ϚΠζ͢Δํ๏͸ͳ͍ͷ͔ʁ
    গͳ͘ͱ΋4BGF"SFBͷར༻͸ࢠϏϡʔͰ੍ޚͯ͠ΔͷͰʜ
    

    View Slide

32. ͳΜ͔͋Γͦ͏"
    

    View Slide

33. ʲએ఻ʳ
    

    View Slide

34. גࣜձࣾΏΊΈɺΤϯδχΞઈࢍืूத
    IUUQSFDSVJUZVNFNJDPKQ
    䱰⾂

    ؽ٨ضٌ

    ✌؜猳
    

    View Slide