Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Elvis Shi

June 24, 2019
Tweet

More Decks by Elvis Shi

Other Decks in Programming

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