Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エンジニアとデザイナーがわかる iPadの画面サイズ対応入門

エンジニアとデザイナーがわかる iPadの画面サイズ対応入門

ああうえ

January 26, 2023
Tweet

More Decks by ああうえ

Other Decks in Programming

Transcript

  1. SizeClass • ԿpointҎ্ͱ͔Ͱ͸ͳͯ͘ɺ୺຤͝ͱʹܾ·͍ͬͯΔ • ྫ: iPhone 8 PlusͱiPhone 14ͷHorizontalSizeClassΛൺֱ •

    iPhone 8 Plus(ԣը໘): Regular(736pt) • iPhone 14(ԣը໘): Compact(844pt) • iPhone 14ͷํ͕pt਺͕େ͖͍͕ɺCompact
  2. SizeClassͷදه • wC, hC, wR, hR, wAny, hAnyͳͲͱॻ͘ɻXcode্ͳͲͰͨ·ʹݟ͔͚ ·͢Ͷ •

    wC: ෯͕Compact • hC: ߴ͕͞Compact • wR: ෯͕Regular • hR: ߴ͕͞Regular
  3. ΫΠζ: ͦΕͧΕͷHorizontalSizeClass͸ͲΕ? • iPad Pro 12.9Πϯν(ୈ6ੈ୅)(ԣ޲͖)Ͱ1/2ʹ෼ׂͨ͠ͱ͖ 2: Regular • iPad

    Pro 12.9Πϯν(ୈ6ੈ୅)(ԣ޲͖)Ͱ1/3ʹ෼ׂͨ͠ͱ͖ 1: Compact • iPhone 14 Pro(ԣ޲͖) 1: Compact • iPhone 14 Pro Max(ԣ޲͖) 2: Regular • 1: Compact, 2: Regular
  4. ͦͷଞ: HIGʹै͏ • On iPad, consider placing controls on the

    sides of the screen in landscape orientation. • iPadͷԣ޲͖ͷը໘Ͱ͸ɺૢ࡞ੑͷ؍఺͔Βը໘ͷ྆୺ʹ഑ஔ͢Δ͜ͱ ΛקΊΒΕ͍ͯΔ • https://developer.apple.com/design/human-interface-guidelines/ foundations/layout/
  5. willTransitionͷ࢖͍Ͳ͖ • A common use of this method is to

    make changes to the high-level presentation style when the current size class changes. • > ϋΠϨϕϧϓϨθʔςϯγϣϯελΠϧ < • ΞχϝʔγϣϯΛ͍ͨ࣌͠ͱ͔Ͱ͢Ͷ
  6. (ಡ·ͳ͍)ϋϚΔέʔε • SketchͷྫͷΑ͏ʹCollectionViewͷFlowLayoutͷinsetʹܭࢉͨ͠஋Λઃఆ͍ͯ͠Δ৔߹ɺinset͕ collectionViewͷ෯Λ௒͑ͯ͠·͏ͱϥϯλΠϜΤϥʔ(negative or zero sizes are not supported

    in the fl ow layout)ͰΫϥογϡ͢Δ • viewWillTransitionͰcoordinator.animateΛݺͼग़ͨ࣌͠ͷclosure͕ݺ͹ΕΔλΠϛϯά͸ viewWillLayoutSubviewsΑΓ΋ޙ • viewWillLayoutSubviewsͰcollectionViewLayout.invalidateLayout()ΛݺΜͰ͍Δ৔߹ɺλΠϛϯάతʹ ্هͷΤϥʔ͕ग़Δ৔߹͕͋Δ • ͳͥviewWillLayoutSubviewsͰinvalidateLayout()ΛݺͿඞཁ͕͋Δ͔ͱ͍͏ͱɺUITabBarControllerͳ ͲͰผλϒΛ։͍͍ͯΔ్தʹը໘ճసͳͲΛ͢ΔͱinvalidateLayout()͕ػೳ͠ͳ͍έʔε͕͋Γɺλ ϒʹ໭͖ͬͯͨ৔߹ʹݺͼ͍ͨ