UIライブラリはどう設計されるべきか

6*ϥΠϒϥϦ͸ Ͳ͏ઃܭ͞ΕΔ΂͖͔ ,B[VIJSP)":"4)* J04%$3FKFDU$POGFSFODF%BZT

ࣗݾ঺հ w ྛ࿨߂ w 5XJUUFSɿLB[VIJSP w HJUIVCɿLB[VIJSP w RJJUBɿLB[VIJSP w
:BIPP+BQBO$PSQ w J04ΞϓϦΤϯδχΞ w J04ΞϓϦࠇଳ

ΞδΣϯμ w 6*ϥΠϒϥϦΛར༻ͯ͠։ൃ͢ΔதͰ௚໘ͨ͠ɺΫϥεͷ ࠶ར༻ੑʹର͢Δ՝୊ͷ঺հ w ৽نʹ։ൃͨ͠ϥΠϒϥϦͰͲͷΑ͏ʹ՝୊Λղܾ͔ͨ͠ ղઆ w 6*ͷڞ௨ΫϥεΛઃܭ͢ΔࡍͷϙΠϯτΛ੔ཧ

J04ΞϓϦͷ6*ϥΠϒϥϦ w ͜͜Ͱ͸ɺ6*,JUͷΫϥεΛܧ ঝͨ͠ܗͰఏڙ͞ΕΔɺ࠶ར༻ ՄೳͳΫϥεΛѻ͏ w $PSF"OJNBUJPO $PSF(SBQIJDT $PSF5FYUͳͲ
ͷ௿ϨΠϠϑϨʔϜϫʔΫ͸ ϑΥʔΧε͔Β֎͢ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZDPOUFOUEPDVNFOUBUJPO$PDPB$PODFQUVBM$PSF"OJNBUJPO@HVJEF*OUSPEVDUJPO*OUSPEVDUJPOIUNM

͋ΔϓϩμΫτͷ࿩

͋ΔϓϩμΫτͰϖʔδϯά6* ͷϥΠϒϥϦΛ࢖ͬͯ։ൃ w 4NBSU/FXT΍NFSDBSJɺ :BIPPχϡʔεͰ࠾༻͞Εͯ ͍ΔΑ͏ͳɺϖʔδϯάͱԣε Ϋϩʔϧϝχϡʔͷ૊Έ߹Θͤ

ͦͷϥΠϒϥϦͰ͸ɺUJUMF͕ઃఆ͞Εͨ7$Λ"SSBZͰ ౉͢ͱɺܾ·ͬͨσβΠϯͷϖʔδϯά6*͕࡞ΒΕΔ ˞Πϝʔδ ࣮ࡍʹؔΘͬͨϓϩμΫτͱ͸ҧ͍·͢ let ary: [UIViewController] = [ {
$0.title = "Page1" return $0 }(UIViewController()), { $0.title = "Page2” return $0 }(UIViewController()), { $0.title = "Page3" return $0 }(UIViewController()) ] pagingViewController.childViewControllers = ary

$0.title = "Page1" return $0 }(UIViewController()), { $0.title = "Page2” return $0 }(UIViewController()), { $0.title = "Page3" return $0 }(UIViewController()) ] pagingViewController.childViewControllers = ary ϝχϡʔ͕͋Δ

$0.title = "Page1" return $0 }(UIViewController()), { $0.title = "Page2” return $0 }(UIViewController()), { $0.title = "Page3" return $0 }(UIViewController()) ] pagingViewController.childViewControllers = ary ϖʔδϯάՄೳͳ ίϯςϯπྖҬ͕͋Δ

ελΠϧ΋ύϥϝʔλͰ౉͢͜ͱ͕Մೳ ˞Πϝʔδ ࣮ࡍʹؔΘͬͨϓϩμΫτͱ͸ҧ͍·͢

ॳظͷγϯϓϧͳཁ݅Λຬ͍ͨͯͨ͠ w ϖʔδϯάͰ͖Δίϯςϯπ w εΫϩʔϧ͞ΕΔϝχϡʔ w ϝχϡʔʹ͸λΠτϧ͕දࣔ͞Ε͍ͯ Δ w ݱࡏͷϖʔδҐஔͷϝχϡʔ͕ڧௐ͞
Εͯɺݱࡏ஍͕Θ͔ΔΑ͏ʹͳ͍ͬͯ Δ ˞Πϝʔδ ࣮ࡍʹؔΘͬͨϓϩμΫτͱ͸ҧ͍·͢

͔͠͠ཁ͕݅গͣͭ͠ෳࡶԽ͍͖ͯ͠ɺ ࠾༻ͨ͠ϥΠϒϥϦͰ͸ରԠ͖͠Εͳ͘ͳΔ

ϓϩμΫτͷ੒௕ʹ൐ͬͯ6*͕ࡉ෼Խ͞Εɺ ͜͏͍ͬͨ͜ͱΛٻΊΒΕΔΑ͏ʹͳ͖ͬͯͨ w ྫ͑͹ w ͋Δը໘Ͱ͸ϝχϡʔͷಛ ఆͷཁૉͷ্ʹαϒλΠτ ϧΛ෇͚͍ͨ w ͋Δը໘Ͱ͸ίϯςϯπͱ
ϝχϡʔͷྖҬؒ΁Ϙλϯ Λฒ΂͍ͨ ˞Πϝʔδ ࣮ࡍʹؔΘͬͨϓϩμΫτͱ͸ҧ͍·͢

ར༻͍ͯͨ͠ϥΠϒϥϦͰ͸ ཁ݅Λຬͨͤͳ͘ͳͬͯ͘Δ

৭ΜͳέʔεͰڞ௨Ͱ࢖ΘΕΔ6*͸ ͲͷΑ͏ʹ࡞ΒΕΔ΂͖ͩΖ͏͔

͜ͷͭΛߟྀͯ͠ઃܭ͞Ε Δͱྑ͍ͷͰ͸ͳ͍͔ͱࢥ͏ ΠϯλϥΫγϣϯͷΈΛ੹຿ͱͯ࣋ͭ͠Ϋϥεʹ͢Δ ϨΠΞ΢τมߋʹରͯ͠͸ग़དྷΔݶΓࣗ༝౓͕ߴ͍ঢ়ଶʹ ͢Δ ಺෦ίϯϙʔωϯτͷબ୒ɾ഑ஔ͸ࣗ༝Ͱ͋Δඞཁ͕͋Δ
BEE4VCWJFX @ ΍BEE$IJME7JFX$POUSPMMFS @ ʹΑΔί ϯϙδγϣϯͰར༻Ͱ͖ΔΑ͏ʹ͢Δ

Ҏ্ͷߟ͑ํʹج͖ͮ ৽ن։ൃͨ͠ϥΠϒϥϦ

IUUQTHJUIVCDPNLB[VIJSP1BHJOH,JU 1BHJOH,JU

1BHJOH,JUͷಛ௃ w ΠϯλϥΫγϣϯ෦෼ΛϥΠϒ ϥϦͰఏڙ w ϝχϡʔྖҬͱίϯςϯπྖҬ ͕࿈ಈͯ͠ಈ͘

1BHJOH,JUͷಛ௃ w ϨΠΞ΢τ͸ࣗ༝ʹܾΊΒΕΔ w ϝχϡʔͱίϯςϯπͷؒ ʹ7JFXΛڬΉ w ϝχϡʔͱίϯςϯπΛฒ ΂ସ͑Δ

1BHJOH,JUͷಛ௃ w த਎ͷ7JFXίϯϙʔωϯτ͸ ΞϓϦͰ༻ҙ͢Δ w ϝχϡʔͷσβΠϯΛม͑Δ w ϝχϡʔʹ6*-BCFMΛͭฒ ΂ͨΓɺ6**NBHF7JFXΛஔ ͍ͨΓ͢Δ

࢖͍ํ

w ҎԼͷ̎ͭͷ7JFX$POUSPMMFSΛ 4UPSZCPBSE্Ͱ$POUBJOFS7JFX Λ࢖ͬͯϨΠΞ΢τ͢Δ w 1BHJOH.FOV7JFX$POUSPMMFS w 1BHJOH$POUFOU7JFX$POUSPMMFS 1BHJOH.FOV7JFX$POUSPMMFS 1BHJOH$POUFOU7JFX$POUSPMMFS

w 4FHVFͰઃఆͨ͠௨ৗͷ$IJME 7JFX$POUSPMMFSͱಉ͡Α͏ʹɺ ίʔυ্Ͱऔಘ͢Δ class ViewController: UIViewController { var menuViewController:
PagingMenuViewController! var contentViewController: PagingContentViewController! // … // ... override func prepare(for segue: UIStoryboardSegue, sender: Any?) { if let vc = segue.destination as? PagingMenuViewController { menuViewController = vc } else if let vc = segue.destination as? PagingContentViewController { contentViewController = vc } } } QSFQBSF GPSTFOEFS ͰTUPSZCPBSEͰઃఆ͠ ͨ7$ΛϓϩύςΟ΁ೖΕΔ

w ϝχϡʔͷཁૉʹ૬౰͢Δ7JFX ͸ɺ1BHJOH.FOV$FMMΛܧঝ͠ ͯΞϓϦέʔγϣϯଆͰ༻ҙ͢ Δ w ΞϓϦ಺Ͱͷڞ௨ͷελΠϧ΍ ը໘ຖͷݸผͷελΠϧͰ౎౓ ༻ҙ͢Δ ͜ͷதͷͦΕͧΕͷཁૉʹ
૬౰

w ಉ༷ʹϖʔδϯάதͷݱࡏҐஔ Λද͢Πϯδέʔλ΋ 1BHJOH'PDVT7JFXΛܧঝͯ͠ ΞϓϦଆͰ༻ҙ͢Δ w ΞϓϦ಺Ͱͷڞ௨ͷελΠϧ΍ ը໘ຖͷݸผͷελΠϧͰ౎౓ ༻ҙ͢Δ ݱࡏදࣔ͞Ε͍ͯΔҐஔΛ
ϝχϡʔ্Ͱදͨ͢ΊͷΠ ϯδέʔλ

var data: (menuTitle: String, vc: UIViewController) = [ (menuTitle: "test1",
vc: UIViewController()), (menuTitle: "test2", vc: UIViewController()), (menuTitle: "test3", vc: UIViewController()) ] w ը໘ʹද͍ࣔͤͨ͞೚ҙͷσʔ λΛ༻ҙ͢Δ w ϝχϡʔ͸λΠτϧจࣈྻ ͷΈ w ίϯςϯπ͸ۭͷ7$Λ༻ҙ ͍ͯ͠Δ

w ϝχϡʔͷදࣔΛ࣮૷͢Δ w ༻ҙͨ͠σʔλΛ%BUB4PVSDF ܦ༝ͰɺඞཁͳλΠϛϯάͰ౎ ౓ฦ͢ w 5BCMF7JFX΍$PMMFDUJPO7JFXͱ ಉ༷ͳ࢓૊ΈͰҎԼΛ౉͢ w
σʔλ਺ w ηϧͷ෯ w σʔλΛόΠϯυͨ͠ηϧ // ϝχʔ෦෼ͷDataSource extension ViewController: PagingMenuViewControllerDataSource { func numberOfItemForMenuViewController( viewController: PagingMenuViewController) -> Int { return data.count } func menuViewController(viewController: PagingMenuViewController, widthForItemAt index: Int) -> CGFloat { return 100 } func menuViewController(viewController: PagingMenuViewController, cellForItemAt index: Int) -> PagingMenuViewCell { let cell = viewController.dequeueReusableCell(withReuseIdentiﬁer: "MenuCell", for: index) as! MenuCell cell.titleLabel.text = data[index].menuTitle return cell } }

w ίϯςϯπͷදࣔΛ࣮૷͢Δ w ༻ҙͨ͠σʔλΛ%BUB4PVSDF ܦ༝ͰɺඞཁͳλΠϛϯάͰ ౎౓ฦ͢ w 5BCMF7JFX΍$PMMFDUJPO7JFX ͱಉ༷ͳ࢓૊Έ w
σʔλ਺ w σʔλΛόΠϯυͨ͠ 7JFX$POUSPMMFS // ίϯςϯπ෦෼ͷDataSource extension ViewController: PagingContentViewControllerDataSource { func numberOfItemForContentViewController( ɹ viewController: PagingContentViewController) -> Int { return data.count } func contentViewController(viewController: PagingContentViewController, viewControllerAt index: Int) -> UIViewController { return data[index].vc } }

w ৼΔ෣͍ͷΈΛ࢓༷ͱͯ࣋ͭ͠ҎԼͷΫ ϥεΛίϯϙδγϣϯ͢Δ w 1BHJOH.FOV7JFX$POUSPMMFS w 1BHJOH$POUFOU7JFX$POUSPMMFS w ҎԼͷཁૉ͸ΞϓϦଆͰ༻ҙ͢Δ w
ϨΠΞ΢τ w த਎ʹԿΛදࣔͤ͞Δ͔

ྫ͑͹ͲͷΑ͏ͳཁ݅΁  ରԠͰ͖ΔΑ͏ʹͳ͔ͬͨ

ྫ͑͹ͲͷΑ͏ͳཁ݅΁  ରԠͰ͖ΔΑ͏ʹͳ͔ͬͨ w ϨΠΞ΢τΛมߋͯ͠ϝχϡʔ ͱίϯςϯπͷؒʹΧςΰϦબ ୒ϘλϯΛݻఆͯ͠ฒ΂͍ͨ ˞Πϝʔδ ࣮ࡍʹؔΘͬͨϓϩμΫτͱ͸ҧ͍·͢

ྫ͑͹ͲͷΑ͏ͳཁ݅΁  ରԠͰ͖ΔΑ͏ʹͳ͔ͬͨ w ϝχϡʔͷҰ෦ཁૉʹ͸্෦ʹ ࠓ೔ɾ໌೔ͱ͍ͬͨ஫ऍΛ͚ͭ ͍ͨ ˞Πϝʔδ ࣮ࡍʹؔΘͬͨϓϩμΫτͱ͸ҧ͍·͢

ྫ͑͹ͲͷΑ͏ͳཁ݅΁  ରԠͰ͖ΔΑ͏ʹͳ͔ͬͨ w ಈըͷϓϨΠϠʔ͕͋ͬͯɺͦ ͷ෦෼͸ϝχϡʔͱࣅͨΑ͏ͳ ײ͡ͷಈ͖ͷ6*Λ࡞ͬͯཉ͍͠ ˞Πϝʔδ ࣮ࡍʹؔΘͬͨϓϩμΫτͱ͸ҧ͍·͢

ҎԼͷ৚݅Λҙࣝ͢Δ͜ͱͰɺ࠶ར༻ੑ Λҡ࣋ͭͭ͠Ϋϥεͷڞ௨Խ͕Ͱ͖ͨ ΠϯλϥΫγϣϯͷΈΛ੹຿ͱͯ࣋ͭ͠Ϋϥεʹ͢Δ ϨΠΞ΢τมߋʹରͯ͠͸ग़དྷΔݶΓࣗ༝౓͕ߴ͍ঢ়ଶʹ ͢Δ ಺෦ίϯϙʔωϯτͷબ୒ɾ഑ஔ͸ࣗ༝Ͱ͋Δඞཁ͕͋Δ
BEE4VCWJFX @ ΍BEE$IJME7JFX$POUSPMMFS @ ʹΑΔί ϯϙδγϣϯͰར༻Ͱ͖ΔΑ͏ʹ͢Δ

·ͱΊ w ڞ௨ΫϥεΛ։ൃ͢Δ࣌͸࠶ར༻ੑͷ؍఺Ͱ੹຿Λҙࣝ͢Δɻ࣮૷ͷ γϯϓϧ͞ͱॊೈੑ͸௨ৗτϨʔυΦϑͳͷͰόϥϯεΛݟۃΊΔ w J04Ͱ6*,JUͷϨΠϠʹڞ௨ΫϥεΛߏங͢Δ৔߹͸ɺΠϯλϥΫγϣ ϯͷΈΛنఆ͢Δͷ͕ྑ͍ w ϨΠΞ΢τ͸ɺΠϯλϥΫγϣϯͷ࢓༷Λյ͞ͳ͍ఔ౓Ͱग़དྷΔݶΓ ࣗ༝౓͕ߴ͍ͱྑ͍
w ಺෦ίϯϙʔωϯτͷ഑ஔ΍ͦͷελΠϧ͸ΞϓϦʹ·͔ͤͯؔ༩͠ ͳ͍ͷ͕ྑ͍

ࢀߟࢿྉ w 6*,JUc"QQMF%FWFMPQFS%PDVNFOUBUJPO w IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJU w $PODFQUTJO0CKFDUJWF$1SPHSBNNJOH w IUUQTEFWFMPQFSBQQMFDPNMJCSBSZDPOUFOUEPDVNFOUBUJPO(FOFSBM$PODFQUVBM $PDPB&ODZDMPQFEJB*OUSPEVDUJPO
w LB[VIJSP1BHJOH,JU w IUUQTHJUIVCDPNLB[VIJSP1BHJOH,JU w ϝϧΧϦεϚϗͰ͔ΜͨΜϑϦϚΞϓϦ w IUUQTXXXNFSDBSJDPNKQ w :BIPPχϡʔεެࣜΞϓϦ:BIPPχϡʔε w IUUQTOFXTZBIPPDPKQQSPNPBQQZKOFXT w 4NBSU/FXT w IUUQTXXXTNBSUOFXTDPNKB

UIライブラリは どう設計されるべきか

UIライブラリは どう設計されるべきか

More Decks by kazuhiro4949

Other Decks in Technology

Featured

Transcript

UIライブラリはどう設計されるべきか

UIライブラリはどう設計されるべきか