Tweet
Tweet

Slide 1

Slide 1 text

X 1

Slide 2

Slide 2 text

ര଎ϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ1/2ʣ NOODL BEGINNER COURSE 2

Slide 3

Slide 3 text

X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ: ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 3

Slide 4

Slide 4 text

X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε= ϊʔυ 4

Slide 5

Slide 5 text

X L001-01 ϨετϥϯΞϓϦ 5

Slide 6

Slide 6 text

X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞੒ 6 Componentͷ࡞੒

Slide 7

Slide 7 text

X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 7 Menu Componentͷத਎ͷ࡞੒

Slide 8

Slide 8 text

X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ͸্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͠2 pix͚ͩͣΒ͢ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ઢΛ࡞੒Ͱ͖Δ 8 Menuόʔ্෦ʹബ͍࢓੾Γઢ࡞੒

Slide 9

Slide 9 text

X Stack LayoutΛ࢖ͬͯΞΠίϯΛฒ΂ΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͠΍͍͢ ΞΠίϯ͸ImageΛ࢖͍ɺ৭΍഑ஔΛௐ੔͢ΔɻΞΠίϯؒ͸Stack LayoutͷItem SpacingͰௐ੔͢Δͱྑ͍ 9 ΞΠίϯͷ഑ஔ

Slide 10

Slide 10 text

X ComponentsͷPagesϑΥϧμ಺ʹTopͱ͍͏ComponentΛ࡞੒͢ΔɻϑΥϧμ಺ʹ࡞Δࡍ͸ϑΥϧμӈͷ̏఺ΞΠίϯ͔Β࡞੒͢Δ 10 Top Componentͷ࡞੒

Slide 11

Slide 11 text

X ࠷ॳͷ਌ϊʔυΛPageͰ࡞੒͢ΔʢGroupͰ͸ͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞੒͢ΔɻHeader͸·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔ 11 Top Componentͷத਎ͷ࡞੒ ࿮૊Έ͔Β࡞Δ

Slide 12

Slide 12 text

X RectangleͰഎܠ৭Λࢦఆ͢Δɻݕࡧ૭ྖҬΛGroupͰαΠζɾҐஔࢦఆ͢ΔɻImageͰMenuΞΠίϯΛ഑ஔ͢Δ ˎ͜ͷΑ͏ʹImageͷ਌ʹGroupΛஔ͔ͳͯ͘΋੒ཱ͢ΔɻҰํɺ਌GroupͰྖҬΛ࡞Δͱݟ͑ͳ͍TapྖҬʹͰ͖ͨΓɺͳʹ͔ͱศར 12 Headerͷத਎ͷ࡞੒ MenuΞΠίϯͱݕࡧ૭ྖҬͷ഑ஔ

Slide 13

Slide 13 text

X Search Group಺ʹRectangleͰݕࡧ૭Λ࡞੒͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ จࣈೖྗՄೳͳςΩετϘοΫεʹ͸Text InputΛ࢖͏ɻΞΠίϯ΍ςΩετͷҐஔ͸దٓௐ੔͢Δ 13 Headerͷத਎ͷ࡞੒ ݕࡧ૭ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ

Slide 14

Slide 14 text

X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group, Content Height)Λ࡞੒͠ɺ͞ΒʹRectangleΛ࢖ͬͯനʹ͢Δ 14 Topͷத਎ͷ࡞੒

Slide 15

Slide 15 text

X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺ਌ͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 15 Paddingͷখٕ

Slide 16

Slide 16 text

X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺ೚ҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦෼ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳ਺ૠೖ͠ɺScroll ViewͷPad Left, Pad RightΛௐ੔͢Δ 16 Section1ͷத਎ͷ࡞੒ ԣεΫϩʔϧίϯςϯπ

Slide 17

Slide 17 text

X Component InputsΛ࡞੒͠ɺ+PortͰ3ͭPortΛ࡞੒͢Δɻ(Title, Img, text) ˎPortΛ࡞੒͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛ઀ଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 17 Card Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ

Slide 18

Slide 18 text

X Component OutputsΛ࡞੒͠ɺ+PortͰ1ͭPortΛ࡞੒͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 18 Card Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ

Slide 19

Slide 19 text

X Topʹ໭ΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ಺༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨ৘ใʹॻ͖׵͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 19 Card Itemͷը૾΍આ໌ͷมߋɺTag෇͚

Slide 20

Slide 20 text

X Scroll ViewͷScroll To IndexͷIndexΛ2ʹ͢Δ
 BooleanͷValueʹνΣοΫΛೖΕͯSaved Value→Scroll To IndexͷDoʹܨ͙ ˎIndex͸୺͔Β0, 1, 2ɾɾͳͷͰ2ʹͨ͠৔߹͸3ຕ໨ʹͳΔ 20 Scroll ViewͷॳظҐஔͷઃఆ

Slide 21

Slide 21 text

X Section2ʹStack LayoutΛ࢖ͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent Heightʹͯ͠ॊೈʹ͓ͯ͘͠ 21 Section2ͷ࡞੒

Slide 22

Slide 22 text

X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆͨ͠஋͕Scroll Viewͷ஋ʹ൓ө͞ΕΔΑ͏ʹͳΔ 22 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ੔͢Δ

Slide 23

Slide 23 text

X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 23 HeaderͱScroll Viewͷલޙؔ܎Λमਖ਼͢Δ

Slide 24

Slide 24 text

X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞੒͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 24 IndexΛ࡞੒͢Δ

Slide 25

Slide 25 text

X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞੒͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛ഑ஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞੒͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 25 Restaurantϖʔδͷ࡞੒

Slide 26

Slide 26 text

X ໭ΔϘλϯ͸120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞੒͢Δ 26 ໭ΔϘλϯͷ࡞੒

Slide 27

Slide 27 text

X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹ൒෼ඃ͍ͬͯΔͷ͸Card Item3಺ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 27 Card ItemͱTagͷ࡞੒

Slide 28

Slide 28 text

X Flow LayoutΛ༻͍ͯImageΛฒ΂ΔɻHeight 800 px 28 ը૾ΛྻͰฒ΂Δ

Slide 29

Slide 29 text

X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode͸৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍ͸ߋ৽͕ඞཁͰ͢ 29 ը૾Λมߋͯ͠੔͑Δ

Slide 30

Slide 30 text

X Topʹ໭ΓPage NavigationΛ࡞੒͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹ઀ଓ͢Δ 30 Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ

Slide 31

Slide 31 text

X Restaurantʹ໭ΓPage Navigation BackΛ࡞੒͢Δ ໭ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹ઀ଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢Ε͹׬੒Ͱ͢ˎˎ 31 Restaurantϖʔδͷ໭ΔϘλϯΛઃఆ͢Δ

Slide 32

Slide 32 text

X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 32