アプリのUIレイアウト

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

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

Transcript

1. ΞϓϦͷ6*ϨΠΞ΢τ
   ΅ͬͪήʔϜσϕϩού
   ੢ࢁ৴ߦ
   @5mingame2
   

   View Slide

2. w೥͔ΒձࣾΛసʑͱ͠ͳ͕ΒήʔϜ࡞Γ
   w 1$ɺՈఉ༻ήʔϜػɺΨϥέʔɺεϚϗʜ
   wઐ໳ֶߍͰήʔϜ࡞ΓΛڭ͑ͯ·͢
   w͍͖͞ΜϥϒϥΠϒʂ؍ͯ·͢
   ࣗݾ঺հ
   

   View Slide

3. wεϚϗ΍1$ͰήʔϜΛ࡞Ζ͏ͱͨ࣌͠ʹ௚໘͢
   Δղ૾౓ͷ໰୊
   wͿͬͪΌ͚Ϣʔβʔͷ਺͚ͩଘࡏ͢Δ੎͍
   wͦΕʹͲ͏΍ͬͯऔΓ૊ΜͰ͍Δͷ͔ɺΈΜͳ
   Ͱߟ͍͑ͨͱࢥ͍·͢
   ͸͡Ίʹ
   

   View Slide

4. ࠓ೔ͷΰʔϧ
   

   View Slide

5. w༷ʑͳղ૾౓΁ͷରԠ
   w6*ͷϨΠΞ΢τख๏
   wJ1IPOF9΁ͷରԠ
   ࠓ೔औΓ্͛Δࣄ
   

   View Slide

6. ༷ʑͳղ૾౓΁ͷରԠ
   http://blog.digimerce.jp/2018/01/25/4028/
   

   View Slide

7. wಉ͡ը໘ൺͰ΋ղ૾౓͕ҧ͏
   wJ1IPOFͱJ1BEͰ͍ͩͿΜҧ͏
   wॎը໘ͱԣը໘ʹରԠ͍ͨ͠
   ༷ʑͳղ૾౓΁ͷରԠ
   

   View Slide

8. wը໘ͷղ૾౓Λͦͷ··࠲ඪͱͯ͠ѻ͏ख๏Ͱ
   ͸ແཧ͕͋Δ
   ༷ʑͳղ૾౓΁ͷରԠ
   

   View Slide

9. wಁࢹม׵ʴॎԣൺͰରॲ
   w %දࣔͰ͔ܽͤͳ͍ܭࢉख๏
   ༷ʑͳղ૾౓΁ͷରԠ
   http://www.sousakuba.com/Programming/d3d_camera.html
   

   View Slide

10. wࢹ໺֯ͱΫϦοϓڑ཭ ۙ
    ɺॎԣൺ͕ܾ·Δͱɺ࠲ඪܥ͕ࣗಈతʹܾ
    ·Δ
    w࠲ඪ͕ղ૾౓ґଘͰ͸ͳ͘ͳΔ
    wΫϦοϓڑ཭ ۙ
    ͷҐஔʹશͯͷ6*Λඳը
    ༷ʑͳղ૾౓΁ͷରԠ
    http://www.sousakuba.com/Programming/d3d_camera.html
    

    View Slide

11. wԣ෯ͷҧ͍͸ॎԣൺͷมߋͰରԠͰ͖Δ
    wॎ௕ͷը໘͸ॎԣൺͱΫϦοϓڑ཭ ۙ
    ͔Βࢹ໺
    ֯Λܭࢉͯ͠ରԠ͢Δ ৄࡉ͸লུ
    
    ༷ʑͳղ૾౓΁ͷରԠ
    http://www.sousakuba.com/Programming/d3d_camera.html
    

    View Slide

12. w༷ʑͳղ૾౓΁ͷରԠ
    w6*ͷϨΠΞ΢τख๏
    wJ1IPOF9΁ͷରԠ
    ͻͱͭղܾ
    

    View Slide

13. wղ૾౓ͷҧ͍͸ٵऩͰ͖ͨ
    wͰ͸͜͏͍͏ͷΛͲ͏΍ͬͯѻ͑͹ྑ͍ͷ͔
    6*ͷϨΠΞ΢τख๏
    

    View Slide

14. w6OJUZͷ6* $BOWBT
    Λਅࣅͨ
    6*ͷϨΠΞ΢τख๏
    https://docs.unity3d.com/ja/current/Manual/UISystem.html
    

    View Slide

15. w࢛֯ͷ̐௖఺ͷҐஔͷܾΊํʹಛ௃͕͋Δ
    w"ODIPSͱ͍͏஋͕ɺ਌ͷ̐௖఺ͷҐஔΛͲΕͩ
    ͚ड͚ܧ͙͔ΛܾΊΔ
    w͜ͷ࢓༷Λ໨ίϐʔͨ͠
    6*ͷϨΠΞ΢τख๏
    

    View Slide

16. wΑ͘Θ͔ΒΜͱࢥ͏ͷͰɺ6OJUZͷެࣜυΩϡϝ
    ϯτΛݟ͍ͯͩ͘͞
    wIUUQTEPDTVOJUZEDPNKBDVSSFOU
    .BOVBM6*#BTJD-BZPVUIUNM
    6*ͷϨΠΞ΢τख๏
    

    View Slide

17. wʮը໘্୺͔ΒϐΫηϧʯͱ͔ʮӈԼϐολ
    γʯͱ͔ࢦఆͰ͖Δ
    wॎը໘ͱԣը໘ͷҧ͍Λ͔ͳΓٵऩͰ͖ͨ
    6*ͷϨΠΞ΢τख๏
    

    View Slide

18. 6*ͷϨΠΞ΢τख๏
    

    View Slide

19. 6*ͷϨΠΞ΢τख๏
    

    View Slide

20. w͜Ε͸ϋʔυίʔσΟϯάͰͨ͠ʜ
    6*ͷϨΠΞ΢τख๏
    

    View Slide

21. w༷ʑͳղ૾౓΁ͷରԠ
    w6*ͷϨΠΞ΢τख๏
    wJ1IPOF9΁ͷରԠ
    ;ͨͭղܾ
    

    View Slide

22. wJ1IPOF9͔ΒʮηʔϑΤϦΞʯ
    ͕௥Ճ͞Εͨ
    J1IPOF9ରԠ
    https://developer.apple.com/jp/ios/update-apps-for-iphone-x/
    

    View Slide

23. wʮ6*͸͜ͷྖҬʹ഑ஔͯ͠Ͷʯ
    w"QQMFͷެࣜυΩϡϝϯτ͋Γ·͢
    w IUUQTEFWFMPQFSBQQMFDPNKQJPTVQEBUFBQQTGPS
    JQIPOFY
    J1IPOF9ରԠ
    

    View Slide

24. w࠷ॳͷࠒ͸ʮ·͋େৎ෉Ͱ͠ΐ͏ʂʯͱؾʹ͠
    ͯͳ͔ͬͨ
    wผͷ6OJUZҊ݅Ͱେ͍ʹϋϚͬͨ
    wલड़ͷϨΠΞ΢τ͚ͩͰ͸શ͘ٵऩͰ͖ͳ͍
    J1IPOF9ରԠ
    

    View Slide

25. w࢓ํͳ͍ͷͰ6OJUZͷରԠํ๏Λௐ΂ͯਅࣅͨ
    wIUUQTGPSVNVOJUZDPNUISFBET
    JQIPOFQMVTYTVQQPSU
    J1IPOF9ରԠ
    

    View Slide

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);
    }
    

    View Slide

27. w͋ͱ͸ϋʔυίʔσΟϯά
    w6*ϨΠΞ΢τͷ࠲ඪΛηʔϑΤϦΞ͕͋Δ͚࣌ͩ
    ແཧ΍Γॻ͖׵͑Δ
    J1IPOF9ରԠ
    

    View Slide

28. J1IPOF9ରԠ
    

    View Slide

29. w༷ʑͳղ૾౓΁ͷରԠ
    w6*ͷϨΠΞ΢τख๏
    wJ1IPOF9΁ͷରԠ
    ͥΜͿղܾ
    

    View Slide

30. wؾʹͳͬͨ͜ͱͱ͔࣭໰ͳͲ͋Ε͹
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide