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

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

Af64bc38c0ffcfcabdf430759ee491ce?s=128

Elvis Shi

June 24, 2019
Tweet

Transcript

  1. 4XJGU6*ͷ
 ϨΠΞ΢τϝΧχζϜ for:6.&.*TXJGUd88%$ใࠂձ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 {
  3. None
  4. None
  5. None
  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$VTUPN7JFXTXJUI4XJGU6* IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

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

  32. ͳΜ͔͋Γͦ͏"

  33. ʲએ఻ʳ

  34. גࣜձࣾΏΊΈɺΤϯδχΞઈࢍืूத IUUQSFDSVJUZVNFNJDPKQ 䱰⾂
 ؽ٨ضٌ
 ✌؜猳