アプリのUIレイアウト

by Nobuyuki Nishiyama

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔ͷΰʔϧ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

6*ͷϨΠΞ΢τख๏

Slide 19

Slide 19 text

6*ͷϨΠΞ΢τख๏

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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