Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
iOSඪ४UIϫʔΫγϣοϓ @hirothings
Slide 2
Slide 2 text
ΞδΣϯμ • ඪ४UIͷఆٛ • ඪ४UIͷϝϦοτ • ඪ४UIΫΠζ • ඪ४ʹ͢UIͱڽΔUIͷόϥϯε • Xcodeʹ͍ͭͯ • XcodeͷσβΠϯπʔϧ • Interface Builder • ΦʔτϨΠΞτ(࣮ԋ) • Asset Catalog • ࡞ͬͯΈΑ͏ • ࣮తʹخ͍͠σβΠϯ • ίϯϙʔωϯτ͕͋ΔͱԿ͕خ͍͠ͷ͔ • ϥοϓΞοϓ
Slide 3
Slide 3 text
ඪ४UIͷఆٛ
Slide 4
Slide 4 text
ඪ४UIͷఆٛ NavigationBar TextView WKInterfaceSwitch TableView Human Interface GuidelinesͰ ఆ͍ٛͯ͠ΔUIɾτϥϯδ γϣϯɾΠϯλϥΫγϣϯΛ ຊεϥΠυͰศ্ٓ ”ඪ४UI”ͱݺͿ͜ͱʹ͠·͢
Slide 5
Slide 5 text
ඪ४UIͷϝϦοτ 1. Ϣʔβʔ͕Ұ؏ͨ͠ૢ࡞ΛମݧͰ͖Δ 2. ͦͷ··͏ͱ͕͔͔Βͳ͍ 3. OSͷΞοϓσʔτʹΑΔUIมߋʹਵͰ͖Δ 4. Light / Dark ModeରԠ͕༰қ
Slide 6
Slide 6 text
ิ: 1. Ϣʔβʔ͕Ұ؏ͨ͠ૢ࡞ΛମݧͰ͖Δ ɾλοϓͯ͠ਐΉ ɾεϫΠϓͯ͠Δ (ࢠͲͰϥʔχϯάͯ͠ ૢ࡞Ͱ͖Δ)
Slide 7
Slide 7 text
ิ: 3. OSͷΞοϓσʔτʹΑΔUIมߋʹਵͰ͖Δ iOS12 iOS13 ྫ) UISegmentedControl ͠ࣅͨΑ͏ͳΧελϜUIΛ࡞͍ͬͯͨΒɺҰؾʹݹ͍͘͞ݟͨʹͳΔ Մೳੑ͕͋Δ
Slide 8
Slide 8 text
ิ: 4. Light / Dark ModeରԠ͕༰қ ̍ߦίʔυΛॻ͔ͳͯ͘ɺࣗಈͰରԠͯ͘͠ΕΔ
Slide 9
Slide 9 text
ඪ४UIΫΠζ
Slide 10
Slide 10 text
ͲΕ͕ඪ४UIʁ 1/2 (ඪ४ͩͱࢥ͏ਓڍख) ❶ ❷ ❸
Slide 11
Slide 11 text
ͲΕ͕ඪ४UIʁ 2/2 (ඪ४ͩͱࢥ͏ਓڍख) ❹ ❺ ❻
Slide 12
Slide 12 text
͑߹Θͤ
Slide 13
Slide 13 text
͑߹Θͤ 1/2 ❶ ❷ ❸ × iOSʹυϩοϓμϯϦετ ඪ४UIʹͳ͍ × υϩϫʔϝχϡʔඪ४UIʹ ͳ͍ ΧελϜϞʔμϧΛͬͯ ࡞ͬͯΔ × tableViewͷstyle: Grouped separatorͷࠨʹσϑΥϧ τͰ伱͕ؒ͋Δɻ BorderΛΧελϚΠζ͍ͯ͠ Δ͔ɺtableΆ͍ΧελϜ ϏϡʔΛ࡞͍ͬͯΔ
Slide 14
Slide 14 text
❹ ❺ ❻ ͑߹Θͤ 2/2 × 6λϒҎ্ͷTabBarඪ४ͩ ͱ࠷ޙͷλϒ͕5λϒʹ֨ ೲ͞ΕΔ × ͜ͷσβΠϯͷDate Picker ඪ४UIʹͳ͍ ○ ඪ४ͷDate Picker
Slide 15
Slide 15 text
ΫΠζͷҙਤ • ͷύϑΥʔϚϯε্͕͠ɺΞϓϦʹٻΊΒΕΔཁ ݅ͷෳࡶ͕͞૿ͨ݁͠ՌɺUIͷෳࡶ͞૿͍ͯ͠Δ • ͩ͜ΘΓͷUIΛ൱ఆ͢ΔΘ͚Ͱͳ͍ɻApp StoreΞϓ ϦͳͲAppleۘΞϓϦͰΰϦΰϦʹΧελΠζͨ͠ UI͕ݟΒΕΔ • ͨͩɺԿ͕ඪ४ͳͷ͔͓ͬͯ͘͜ͱॏཁ
Slide 16
Slide 16 text
ิ: ڍಈ·Ͱඪ४͔Βҳ͢Δͱҧײ͕͋Δ ԼʹεϫΠϓͯ͠Ϧϩʔυ͠Α͏ͱࢥͬͨΒ.. “Folio த్” Ͱݕࡧͯ͠Δͷεϧʔ͍ͯͩ͘͠͞
Slide 17
Slide 17 text
͔ͱݴͬͯɺඪ४UI͚ͩͰը໘Λ Ήͱ؆ૉ͗ͯ͢ΠϚυΩັ͕ྃͳ͍
Slide 18
Slide 18 text
ඪ४ʹ͢UIͱڽΔUI ͷόϥϯε͕େࣄ • ΤϯδχΞʹؾΛ͍͗ͯ͢ແͳUIΛ࡞Δ͜ͱ • શ͘ඪ४Λߟྀ͠ͳ͍ΞʔτͷΑ͏ͳUIΛ࡞Δ͜ͱ ͲͪΒྑ͘ͳ͍
Slide 19
Slide 19 text
ඪ४Λͬͨ͏͑ͰσβΠϯ͢Δͱ • ΤϯδχΞͱͷίϛϡχέʔγϣϯ͕ԁʹͳΔ • Human Interface Guidelineͷཧղ࠷ݶ • ࣭ΣϧΧϜͰ͢! • ͜͜౿Έࠐ͏ɺ͜͜͞Βͬͱྲྀͦ͏ͳͲόϥϯε ײ͕֮࢈·ΕΔ => ίϯτϩʔϥϒϧ
Slide 20
Slide 20 text
Xcodeͱ
Slide 21
Slide 21 text
Xcode • iOS(iPadOS)ΞϓϦͷIDE (౷߹։ൃڥ) • ςΩετΤσΟλ + ϓϨϏϡʔͳͲUI։ൃ͢Δ͏͑Ͱศརͳػ ೳ͕ἧ͍ͬͯΔ • Xcode10ͰͬͱϚϧνΧʔιϧ͕͑ΔΑ͏ʹͳͬͨΓͱɺ͓ͳͱ͜Ζ
Slide 22
Slide 22 text
UI։ൃΛαϙʔτ͢Δ XcodeͷσβΠϯπʔϧ
Slide 23
Slide 23 text
Interface Builder
Slide 24
Slide 24 text
Interface Builder
Slide 25
Slide 25 text
Interface Builder • GUIͰUIKitͷύʔπΛஔͯ͠ϨΠΞτΛΊΔ • ը໘ભҠ • Auto Layout • ෳͰͷදࣔ֬ೝ(ࢀߟఔ) • ੩తͰͳ͍ཁૉίʔυͰࢦఆ͢Δ͜ͱʹͳΔ
Slide 26
Slide 26 text
DEMO
Slide 27
Slide 27 text
ΦʔτϨΠΞτ • ੍ϕʔεͷϨΠΞτ • ༷ʑͳը໘αΠζʹରԠՄೳ SegmentedControllͷ੍ɿ ɾը໘ͷ্Լࠨӈͷதԝ UILabelͷ੍ɿ ɾը໘ͷࠨӈ͔Β16ptͷmargin ɾSegmentedControll͔Β16pt্ʹஔ
Slide 28
Slide 28 text
DEMO • Auto Layoutͷ࣮ફ • ෳͰϓϨϏϡʔ
Slide 29
Slide 29 text
(༨ஊ)ΦʔτϨΠΞτΛΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ ͜͏͍ͬͨσβΠϯͷ߹
Slide 30
Slide 30 text
(༨ஊ)ΦʔτϨΠΞτΛΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ ෳͰӾཡͰ͖ΔΑ͏ɺͲ͜ʹ੍Λ͚ͭΔ͔ ɾλΠτϧ্෦͔ΒݻఆҐஔʹஔ ɾը૾͔ΒϘλϯ·ͰͷmarginݻఆͤͣαΠ ζͰՄม͢Δ͜ͱͰɺSEαΠζͷͰදࣔͰ͖ ΔΑ͏ʹ͢Δ ૢ࡞ੑΛߟྀͯ͠Ͳ͜ʹॏཁͳϘλϯΛஔ͔͘ Ϙλϯը໘Լ͔Βݻఆͯ͠ɺαΠζ͕େ͖͘ ͯԡ͍͢͠Α͏ʹ͢Δ
Slide 31
Slide 31 text
(༨ஊ)ΦʔτϨΠΞτΛΜͰΔΤϯδχ Ξ͕ԿΛߟྀ͍ͯ͠Δ͔ • σβΠϯఏڙ࣌ɺ੍ͷࢦఆΛ ͯ͘͠Εͯྑ͍͚Ͳɺϑϩϯ τΤϯυΤϯδχΞ͕ߟྀ͢ ͖ྖҬͩͱࢥ͏ • FigmaSketch੍ͷࢦఆ͕Մೳ
Slide 32
Slide 32 text
Asset Catalog
Slide 33
Slide 33 text
Asset Catalog • ΞϓϦͷΧϥʔύϨοτը૾ΛGUIͰཧ • Light / DarkͷࢦఆՄೳ • ίʔυ͔Βར༻Ͱ͖Δ
Slide 34
Slide 34 text
࡞ͬͯΈΑ͏ Ͱ..
Slide 35
Slide 35 text
࡞ͬͯΈΑ͏ • ؆୯ͳΞϓϦΛ࡞Δ͜ͱͰɺཧղ͕͞Βʹਂ·Δ • ΤϯδχΞͷؾ࣋ͪνϣοτ͔Δ • XcodeͷσβΠϯπʔϧʹ͍ͭͯΔ͜ͱ͕Ͱ͖Δ
Slide 36
Slide 36 text
1͔Βʁ ԿΛͲ͏࡞ͬͨΒ͍͍ͷ͔͔Β ͳ͍
Slide 37
Slide 37 text
https://github.com/hirothings/iOS- DefaultUISampler
Slide 38
Slide 38 text
• iOSͷඪ४UIΛ·ͱΊͨ୯७ͳΞϓϦ • Interface BuilderͷઃఆΛม͑ͨΓUIΛஔ͍ͨΓͯ͠৮ͬ ͯΈ͍ͯͩ͘͞ • ৄ͘͠READMEࢀর iOS-DefaultUISampler
Slide 39
Slide 39 text
Runͯ͠Έ·͠ΐ͏ Cmd + R
Slide 40
Slide 40 text
࣮తʹخ͍͠σβΠϯ
Slide 41
Slide 41 text
• ޮతʹ࣮Ͱ͖Δ => ݁Ռతʹૣ͍ • ίʔυʹடং͕ੜ·ΕΔ • ৭ͷఆٛ • UIύʔπ..etc • ΞϓϦશମͷmarginنଇੑ͕͋ͬͯཉ͍͠ • ը໘͝ͱʹNavigationBar͔Βͷmargin͕ϚνϚνͩͬͨΓ͢Δͱਏ͍ ίϯϙʔωϯτԽ
Slide 42
Slide 42 text
σβΠϯ ͜͏࣮Ͱ͖Δ͔Βخ͍͠ɻ ࣮ ৭ UI ※ύʔπͱͯ͠ΫϥεʹΓग़ͨ͠Primary Button Λ͍·Θ͍ͯ͠Δ
Slide 43
Slide 43 text
iOSͷඪ४UIʹ͍ͭͯগ͠ཧղ͕ਂ·ͬͨ ͳͥඪ४UIΛΔ͜ͱ͕େࣄͳͷ͔ཧղͰ͖ͨ XcodeͷσβΠϯπʔϧʹ͍ͭͯѲͰ͖ͨ UIΛΉͱ͖ʹΤϯδχΞ͕Ͳ͏͍͏͜ͱΛߟ͍͑ͯΔ ͔νϣοτ͔ͬͨ XcodeͰΞϓϦΛRunͰ͖ͨ ϥοϓΞοϓ