アプリのUIレイアウト

iPhoneやiPadでアプリを作る時にどうしても詰まるUIのレイアウト。

アプリ「パズル＆モナーク」
https://apple.co/2SkC2Pc
ソースコード
https://github.com/tek-nishi/PuzzleAndMonarch

Transcript

1. ΞϓϦͷ6*ϨΠΞ΢τ ΅ͬͪήʔϜσϕϩού
   ੢ࢁ৴ߦ
   @5mingame2
2. w೥͔ΒձࣾΛసʑͱ͠ͳ͕ΒήʔϜ࡞Γ
   w 1$ɺՈఉ༻ήʔϜػɺΨϥέʔɺεϚϗʜ
   wઐ໳ֶߍͰήʔϜ࡞ΓΛڭ͑ͯ·͢
   w͍͖͞ΜϥϒϥΠϒʂ؍ͯ·͢ ࣗݾ঺հ
3. wεϚϗ΍1$ͰήʔϜΛ࡞Ζ͏ͱͨ࣌͠ʹ௚໘͢ Δղ૾౓ͷ໰୊
   wͿͬͪΌ͚Ϣʔβʔͷ਺͚ͩଘࡏ͢Δ੎͍
   wͦΕʹͲ͏΍ͬͯऔΓ૊ΜͰ͍Δͷ͔ɺΈΜͳ Ͱߟ͍͑ͨͱࢥ͍·͢ ͸͡Ίʹ
4. ࠓ೔ͷΰʔϧ
5. w༷ʑͳղ૾౓΁ͷରԠ
   w6*ͷϨΠΞ΢τख๏
   wJ1IPOF9΁ͷରԠ ࠓ೔औΓ্͛Δࣄ
6. ༷ʑͳղ૾౓΁ͷରԠ http://blog.digimerce.jp/2018/01/25/4028/
7. wಉ͡ը໘ൺͰ΋ղ૾౓͕ҧ͏
   wJ1IPOFͱJ1BEͰ͍ͩͿΜҧ͏
   wॎը໘ͱԣը໘ʹରԠ͍ͨ͠ ༷ʑͳղ૾౓΁ͷରԠ
8. wը໘ͷղ૾౓Λͦͷ··࠲ඪͱͯ͠ѻ͏ख๏Ͱ ͸ແཧ͕͋Δ ༷ʑͳղ૾౓΁ͷରԠ
9. wಁࢹม׵ʴॎԣൺͰରॲ
   w %දࣔͰ͔ܽͤͳ͍ܭࢉख๏ ༷ʑͳղ૾౓΁ͷରԠ http://www.sousakuba.com/Programming/d3d_camera.html
10. wࢹ໺֯ͱΫϦοϓڑ཭ ۙ ɺॎԣൺ͕ܾ·Δͱɺ࠲ඪܥ͕ࣗಈతʹܾ ·Δ
    w࠲ඪ͕ղ૾౓ґଘͰ͸ͳ͘ͳΔ
    wΫϦοϓڑ཭ ۙ ͷҐஔʹશͯͷ6*Λඳը ༷ʑͳղ૾౓΁ͷରԠ http://www.sousakuba.com/Programming/d3d_camera.html
11. wԣ෯ͷҧ͍͸ॎԣൺͷมߋͰରԠͰ͖Δ
    wॎ௕ͷը໘͸ॎԣൺͱΫϦοϓڑ཭ ۙ ͔Βࢹ໺ ֯Λܭࢉͯ͠ରԠ͢Δ ৄࡉ͸লུ ༷ʑͳղ૾౓΁ͷରԠ http://www.sousakuba.com/Programming/d3d_camera.html
12. w༷ʑͳղ૾౓΁ͷରԠ
    w6*ͷϨΠΞ΢τख๏
    wJ1IPOF9΁ͷରԠ ͻͱͭղܾ
13. wղ૾౓ͷҧ͍͸ٵऩͰ͖ͨ
    wͰ͸͜͏͍͏ͷΛͲ͏΍ͬͯѻ͑͹ྑ͍ͷ͔ 6*ͷϨΠΞ΢τख๏
14. w6OJUZͷ6* $BOWBT Λਅࣅͨ 6*ͷϨΠΞ΢τख๏ https://docs.unity3d.com/ja/current/Manual/UISystem.html
15. w࢛֯ͷ̐௖఺ͷҐஔͷܾΊํʹಛ௃͕͋Δ
    w"ODIPSͱ͍͏஋͕ɺ਌ͷ̐௖఺ͷҐஔΛͲΕͩ ͚ड͚ܧ͙͔ΛܾΊΔ
    w͜ͷ࢓༷Λ໨ίϐʔͨ͠ 6*ͷϨΠΞ΢τख๏
16. wΑ͘Θ͔ΒΜͱࢥ͏ͷͰɺ6OJUZͷެࣜυΩϡϝ ϯτΛݟ͍ͯͩ͘͞
    wIUUQTEPDTVOJUZEDPNKBDVSSFOU .BOVBM6*#BTJD-BZPVUIUNM 6*ͷϨΠΞ΢τख๏
17. wʮը໘্୺͔ΒϐΫηϧʯͱ͔ʮӈԼϐολ γʯͱ͔ࢦఆͰ͖Δ
    wॎը໘ͱԣը໘ͷҧ͍Λ͔ͳΓٵऩͰ͖ͨ 6*ͷϨΠΞ΢τख๏
18. 6*ͷϨΠΞ΢τख๏
19. 6*ͷϨΠΞ΢τख๏
20. w͜Ε͸ϋʔυίʔσΟϯάͰͨ͠ʜ 6*ͷϨΠΞ΢τख๏
21. w༷ʑͳղ૾౓΁ͷରԠ
    w6*ͷϨΠΞ΢τख๏
    wJ1IPOF9΁ͷରԠ ;ͨͭղܾ
22. wJ1IPOF9͔ΒʮηʔϑΤϦΞʯ ͕௥Ճ͞Εͨ J1IPOF9ରԠ https://developer.apple.com/jp/ios/update-apps-for-iphone-x/
23. wʮ6*͸͜ͷྖҬʹ഑ஔͯ͠Ͷʯ
    w"QQMFͷެࣜυΩϡϝϯτ͋Γ·͢
    w IUUQTEFWFMPQFSBQQMFDPNKQJPTVQEBUFBQQTGPS JQIPOFY J1IPOF9ରԠ
24. w࠷ॳͷࠒ͸ʮ·͋େৎ෉Ͱ͠ΐ͏ʂʯͱؾʹ͠ ͯͳ͔ͬͨ
    wผͷ6OJUZҊ݅Ͱେ͍ʹϋϚͬͨ
    wલड़ͷϨΠΞ΢τ͚ͩͰ͸શ͘ٵऩͰ͖ͳ͍ J1IPOF9ରԠ
25. w࢓ํͳ͍ͷͰ6OJUZͷରԠํ๏Λௐ΂ͯਅࣅͨ
    wIUUQTGPSVNVOJUZDPNUISFBET JQIPOFQMVTYTVQQPSU J1IPOF9ରԠ
26. wηʔϑΤϦΞͷ༗ແΛௐ΂Δؔ਺Λ࡞੒ J1IPOF9ରԠ // セーフエリアがあるか調べる bool check() { auto* view = (UIView*)ci::app::getWindow()->getNative(); UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, 0, 0); if ([view respondsToSelector: @selector(safeAreaInsets)]) { insets = [view safeAreaInsets]; } return (insets.top > 0) || (insets.bottom > 0) || (insets.left > 0) || (insets.right > 0); }
27. w͋ͱ͸ϋʔυίʔσΟϯά
    w6*ϨΠΞ΢τͷ࠲ඪΛηʔϑΤϦΞ͕͋Δ͚࣌ͩ ແཧ΍Γॻ͖׵͑Δ J1IPOF9ରԠ
28. J1IPOF9ରԠ
29. w༷ʑͳղ૾౓΁ͷରԠ
    w6*ͷϨΠΞ΢τख๏
    wJ1IPOF9΁ͷରԠ ͥΜͿղܾ
30. wؾʹͳͬͨ͜ͱͱ͔࣭໰ͳͲ͋Ε͹ ͋Γ͕ͱ͏͍͟͝·ͨ͠