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 {
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
    $VTUPN
    7JFXT
    XJUI
    4XJGU6* IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

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

32. ͳΜ͔͋Γͦ͏"

33. ʲએ఻ʳ

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