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. } 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 {
  2. struct ContentView : View { var body: some View {

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

    Text("A Text View") .padding(5) } } Content View Padding View A Text View
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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 ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
  10. 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 ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
  11. 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  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
  12. 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  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ
  13. 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 Ͱ͢
  14. 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 Ͱ͢
  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 ԶͷαΠζ͸ Y Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y Z ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y  Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ԶͷαΠζ͸ Y  Z  ͔ͩΒ
 ͓લͷαΠζڭ͑ͯ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X  I  Ͱ
  16. 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 
  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 ͡Ό͓͋લαΠζ͸ X  I  Ͱ
 த৺͸ Y Z Ͷ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X  I  Ͱ ࢲͷαΠζ͸
 X  I 
  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 ͡Ό͓͋લαΠζ͸ X  I  Ͱ
 த৺͸ Y Z Ͷ ͡Ό͓͋લαΠζ͸ X  I  Ͱ
 த৺͸ X    I   Ͷ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X  I  Ͱ ࢲͷαΠζ͸
 X  I 
  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 ͡Ό͓͋લαΠζ͸ X  I  Ͱ
 த৺͸ Y Z Ͷ ͡Ό͓͋લαΠζ͸ X  I  Ͱ
 த৺͸ X    I   Ͷ ͡Ό͓͋લαΠζ͸ X I Ͱ
 த৺͸ X    I   Ͷ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X  I  Ͱ ࢲͷαΠζ͸
 X  I 
  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 ͡Ό͓͋લαΠζ͸ X  I  ɺ
 த৺͸ Y Z Ͷ ͡Ό͓͋લαΠζ͸ X  I  ɺ
 த৺͸ X    I   Ͷ ͡Ό͓͋લαΠζ͸ X I ɺ
 த৺͸ X    I   Ͷ ͡Ό͓͋લαΠζ͸ X I Ͱ
 த৺͸ X I Ͷ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X I Ͱ͢ ࢲͷαΠζ͸
 X  I  Ͱ ࢲͷαΠζ͸
 X  I 
  21. 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) } }