Jetpack Compose: 効果的なComposable関数のAPI設計

by haru067

Slide 1

Slide 1 text

+FUQBDL$PNQPTF ޮՌతͳ$PNQPTBCMFؔ਺ͷ"1*ઃܭ ,PUMJO'FTU!IBSV

Slide 2

Slide 2 text

ࣗݾ঺հ !IBSV

Slide 3

Slide 3 text

ࠓճ࿩͢͜ͱ Ҿ਺ΛͲͷΑ͏ʹఆٛ͢΂͖͔ @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit, ) { / / ... }

Slide 4

Slide 4 text

ಠࣗͷ"QQ#BSΛ࡞Δͱ͖ɺͲͪΒͰ࣮૷͠·͔͢ʁ @Composable fun AppBar( title: @Composable () -> Unit, ) ͜͜Ͱ࣭໰ @Composable fun AppBar( title: String, )

Slide 5

Slide 5 text

ಠࣗͷ"QQ#BSΛ࡞Δͱ͖ɺͲͪΒͰ࣮૷͠·͔͢ʁ ͜͜Ͱ࣭໰ ͲͪΒ͕γϯϓϧͰ͔͢ʁ @Composable fun AppBar( title: @Composable () -> Unit, ) @Composable fun AppBar( title: String, )

Slide 6

Slide 6 text

ίϯϙʔωϯτ͸࢖͍ճ͞ΕΔ ࢖͍ճ͞ΕΔ෼͚ͩ༻్΋૿͍͑ͯ͘ ଟ༷ͳ༻్ʹରԠͰ͖ͳ͍ͱ͍͚ͳ͍ ͳͥॊೈͳ"1*͕ඞཁ͔ CheckButton TextButton IconButton OutlinedButton PrimaryButton Button

Slide 7

Slide 7 text

ίϯϙʔωϯτ͸࢖͍ճ͞ΕΔ ࢖͍ճ͞ΕΔ෼͚ͩ༻్΋૿͍͑ͯ͘ ଟ༷ͳ༻్ʹରԠͰ͖ͳ͍ͱ͍͚ͳ͍ ͳͥॊೈͳ"1*͕ඞཁ͔ ٯʹݴ͑͹ɺ࢖͍ճ͞ͳ͍ίϯϙʔωϯτ͸ॊೈʹ͢Δඞཁੑ͕ബ͍ Button CheckButton TextButton IconButton OutlinedButton PrimaryButton

Slide 8

Slide 8 text

࡞Δ΋ͷʹΑΔҧ͍ BOESPJEYDPNQPTF ϥΠϒϥϦ ΞϓϦ Button Text Column Calendar VehicleRentalCalendar ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞ HotelBookingCalendar 高低

Slide 9

Slide 9 text

࡞Δ΋ͷʹΑΔҧ͍ BOESPJEYDPNQPTF ϥΠϒϥϦ ΞϓϦ Button Text Column Calendar VehicleRentalCalendar HotelBookingCalendar ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞ 高低

Slide 10

Slide 10 text

࡞Δ΋ͷʹΑΔҧ͍ BOESPJEYDPNQPTF ϥΠϒϥϦ ΞϓϦ Button Text Column Calendar HotelBookingCalendar VehicleRentalCalendar 高低 ͬͪ͜ ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞

Slide 11

Slide 11 text

$PNQPTFͰ͸ɺখ͞ͳίϯϙʔωϯτΛ૊Έ߹Θͤͯ6*Λ࡞͍ͬͯ͘ ΞϓϦʹ͓͚Δ෼ྨ Ϙλϯ Χʔυ ը໘ ͋Δछͷ֊૚ߏ଄

Slide 12

Slide 12 text

$PNQPTFͰ͸ɺখ͞ͳίϯϙʔωϯτΛ૊Έ߹Θͤͯ6*Λ࡞͍ͬͯ͘ ΞϓϦʹ͓͚Δ෼ྨ Ϙλϯ Χʔυ ը໘ ͋Δछͷ֊૚ߏ଄ 高低 ґଘ͞Ε΍͢͞ɾ࠶ར༻͞Ε΍͢͞

Slide 13

Slide 13 text

ؔ਺ͷprivate/internalͰίϯϙʔωϯτͷར༻Ͱ͖ΔൣғΛ੍ݶ͢Ε͹ʮ࢖ΘΕํʯ͕γεςϜతʹఆ·Δ ൣғΛݶఆ͢Δʹ͸ʁ ϞδϡʔϧԽΛݕ౼͢Δ ίϯϙʔωϯτͷґଘΛ੍ޚ͢Δ :feature:A :feature:B :feature:C :core:ui

Slide 14

Slide 14 text

γϯϓϧͳ"1*Ͱ࡞Δʹ͸ɺͦ΋ͦ΋γϯϓϧʹͰ͖ΔύλʔϯɺͰ͖ͳ͍ύλʔϯΛݟ෼͚Δඞཁ͕͋Γ ˔ίϯϙʔωϯτͷ֊૚Λҙࣝ͢Δ ˔ϞδϡʔϧΛ෼͚ͯՄࢹੑΛ੍ޚ͢Δ ͭ·Γʁ

Slide 15

Slide 15 text

ॊೈͳ"1*Λ࡞Δ

Slide 16

Slide 16 text

ঢ়ଶΛҾ਺ͱͯ͠౉͢͜ͱͰɺίϯϙʔωϯτ͕εςʔτϨεʹͳΓɺίϯϙʔωϯτͷ֎ଆͰঢ়ଶΛ੍ޚɾڞ༗͢ Δ͜ͱ͕ग़དྷΔ TUBUFIPJTUJOH @Composable fun ParentComponent() { Accordion() } @Composable fun Accordion() { var expanded by remember { mutableStateOf(false) } Column { Text( text = "Click to expand", modifier = Modifier.clickable { expanded = !expanded }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }

Slide 17

Slide 17 text

Slide 18

Slide 18 text

ঢ়ଶΛҾ਺ͱͯ͠౉͢͜ͱͰɺίϯϙʔωϯτ͕εςʔτϨεʹͳΓɺίϯϙʔωϯτͷ֎ଆͰঢ়ଶΛ੍ޚɾڞ༗͢ Δ͜ͱ͕ग़དྷΔ TUBUFIPJTUJOH @Composable fun ParentComponent() { var expanded by remember { mutableStateOf(false) } Accordion( expanded = expanded, onExpandedChange = { expanded = !expanded } ) } @Composable fun Accordion( expanded: Boolean, onExpandedChange: () - > Unit, ) { Column { Text( text = "Click to expand", modifier = Modifier.clickable { onExpandedChange() }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }

Slide 19

Slide 19 text

˔਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ˔ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUFIPJTUJOH͢΂͖͔

Slide 20

Slide 20 text

˔਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ˔ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUFIPJTUJOH͢΂͖͔ ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ

Slide 21

Slide 21 text

˔਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ˔ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUFIPJTUJOH͢΂͖͔ ParentComponent onExpandedChange() ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ Accordion Accordion Accordion

Slide 22

Slide 22 text

˔਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ˔ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUFIPJTUJOH͢΂͖͔ ParentComponent onExpandedChange() expanded = true ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ Accordion Accordion Accordion

Slide 23

Slide 23 text

˔਌ͷίϯϙʔωϯτ͕ঢ়ଶΛ੍ޚ͢Δ৔߹ʢͦͷ͏੍ͪޚͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ˔ଞͷίϯϙʔωϯτͱঢ়ଶΛڞ༗͢Δ৔߹ʢͦͷ͏ͪڞ༗ͨ͘͠ͳΔͩΖ͏ɺͱ૝ఆ͞ΕΔ৔߹ʣ ͍ͭTUBUFIPJTUJOH͢΂͖͔ ParentComponent onExpandedChange() expanded = false expanded = false ྫɿΞίʔσΟΦϯΛ։͍ͨΒଞͷΞίʔσΟΦϯΛด͡Δ Accordion Accordion Accordion

Slide 24

Slide 24 text

TUBUFIPJTUJOHΛ͢Δͱঢ়ଶ؅ཧΛ਌ʹ೚ͤΔ͜ͱʹͳΔ Ή΍ΈʹTUBUFIPJTUJOH͢Δͱɺࠓ౓͸਌ͷঢ়ଶ؅ཧ͕๲Ε্͕Γɺෳࡶʹͳͬͯ͠·͏ ࢠͷίϯϙʔωϯτ಺Ͱঢ়ଶΛด͡Δ͜ͱ͕Ͱ͖ΔͷͰ͋Ε͹ɺ ࢠͷதͰঢ়ଶΛ؅ཧ͠׬݁ͨ͠΄͏͕ɺ෼ׂ౷࣏ʹͳͬͯ؅ཧ͠΍͘͢ͳΔ TUBUFIPJTUJOHΛ͠ͳ͍ɺͱ͍͏બ୒ࢶ ParentComponent Accordion Checkbox FilterChip TextField expanded checked text selected

Slide 25

Slide 25 text

ϓϨϏϡʔʢ΋͘͠͸ςετʣΛॻ͘ͱɺTUBUFIPJTUJOH͕ඞཁʹͳΔ͜ͱ͕͋Δ ˔ʮςελϒϧͳίʔυʹमਖ਼ͨ͠Βίʔυ͕៉ྷʹͳͬͨʯʹࣅͨݱ৅ ˔جຊతʹ͸ίʔυΛݟ௚ͨ͢Ίͷྑ͍ஹީ͕ͩɺίϯϙʔωϯτ಺ʹঢ়ଶΛด͡ࠐΊ͍ͨ৔߹ʹ͸໘౗ʹͳΔ @Preview @Composable private fun PreviewExpanded() { Accordion(expanded = true, onExpandedChange = {}) } @Preview @Composable private fun PreviewCollapsed() { Accordion(expanded = false, onExpandedChange = {}) } ϓϨϏϡʔ͸TUBUFIPJTUJOHΛଅਐ͢Δ

Slide 26

Slide 26 text

εςʔτϑϧͳ"1*Λެ։͠ɺεςʔτϨεͳ"1*ΛQSJWBUFʹ͢Ε͹ɺϓϨϏϡʔͭͭ͠ɺ"1*Λγϯϓϧʹอͭ͜ͱ ͕Ͱ͖Δ ΦʔόʔϩʔυʹΑΔTUBUFIPJTUJOHͷӅṭ @Composable fun Accordion() { var expanded by remember { mutableStateOf(false) } Accordion(expanded = expanded, onExpandedChange = { expanded = !expanded }) } @Composable private fun Accordion( expanded: Boolean, onExpandedChange: () - > Unit, ) { Column { Text( text = "Click to expand", modifier = Modifier.clickable { onExpandedChange() }, ) AnimatedVisibility(visible = expanded) { Text("Expanded content") } } }

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

DPNQPTBCMFͳϥϜμΛҾ਺ʹ͢Δ͜ͱͰɺࢠཁૉΛॊೈʹઃఆ͢Δ͜ͱ͕Ͱ͖Δ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable () - > Unit, ) TMPU"1* navigation ΞΠίϯ΍ςΩετͳͲɺத਎Λࣗ༝ʹઃఆͰ͖Δ ྫɿ"QQ#BS title AppBar( title = { Text( . .. ) }, navigationIcon = { IconButton( .. . ) }, )

Slide 30

Slide 30 text

ڞ௨6*ͳͲɺͲ͏ར༻͞ΕΔ͔༧ଌ͕͖ͭͮΒ͍΋ͷ ͍ͭTMPU"1*Λ࢖͏΂͖͔ ྫɿ-JTU*UFN Ұݟ͢ΔͱΞΠίϯͱλΠτϧͷೋͭͰߏ੒͞Ε͍ͯΔΑ͏ʹݟ͑Δ

Slide 31

Slide 31 text

ڞ௨6*ͳͲɺͲ͏ར༻͞ΕΔ͔༧ଌ͕͖ͭͮΒ͍΋ͷ ͍ͭTMPU"1*Λ࢖͏΂͖͔ ྫɿ-JTU*UFN Ұݟ͢ΔͱΞΠίϯͱλΠτϧͷೋͭͰߏ੒͞Ε͍ͯΔΑ͏ʹݟ͑Δ ิ଍ͷςΩετΛग़͍ͨ͠

Slide 32

Slide 32 text

ڞ௨6*ͳͲɺͲ͏ར༻͞ΕΔ͔༧ଌ͕͖ͭͮΒ͍΋ͷ ͍ͭTMPU"1*Λ࢖͏΂͖͔ ྫɿ-JTU*UFN Ұݟ͢ΔͱΞΠίϯͱλΠτϧͷೋͭͰߏ੒͞Ε͍ͯΔΑ͏ʹݟ͑Δ ΞΠίϯΛඇදࣔʹ͍ͨ͠ ิ଍ͷςΩετΛग़͍ͨ͠

Slide 33

Slide 33 text

ॊೈʹͳΔҰํɺهड़͸গ͠৑௕ʹͳΔ TMPU"1*Λ࢖Θͳ͍ɺͱ͍͏બ୒ࢶ Button( content = { Text("Save") }, onClick = { /* . .. */ }), ) Button( content = "Save", onClick = { /* . .. */ }), )

Slide 34

Slide 34 text

ॊೈʹͳΔҰํɺهड़͸গ͠৑௕ʹͳΔ Button( content = { Text("Save") }, onClick = { /* . .. */ }), ) TMPU"1*Λ࢖Θͳ͍ɺͱ͍͏બ୒ࢶ Button( content = "Save", onClick = { /* . .. */ }), ) هड़ͷ؆ܿ͞Λ༏ઌ͢Δબ୒ࢶ΋͋Δ SaveProfileButton( content = { Text("Save") }, onClick = { /* . .. */ }), ) SaveProfileButton( content = "Save", onClick = { /* . .. */ }), ) ༻్͕ݶఆతͳίϯϙʔωϯτʹ͸༗ޮ ඞཁʹͳ͔ͬͯΒTMPU"1*Խͯ͠΋ྑ͍

Slide 35

Slide 35 text

TMPU"1*ʹϨγʔόʔΛࢦఆ͢Δ͜ͱͰίϯϙʔωϯτͷϓϦηοτΛ༻ҙ͢Δ͜ͱ͕Ͱ͖Δ %4-ͰͷTMPU"1* @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable() -> Unit, ) ྫɿ"QQ#BS

Slide 36

Slide 36 text

Slide 37

Slide 37 text

TMPU"1*ʹϨγʔόʔΛࢦఆ͢Δ͜ͱͰίϯϙʔωϯτͷϓϦηοτΛ༻ҙ͢Δ͜ͱ͕Ͱ͖Δ %4-ͰͷTMPU"1* @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } ྫɿ"QQ#BS

Slide 38

Slide 38 text

Slide 39

Slide 39 text

˔࢖͍ํΛ֮͑Δඞཁ͕͋Δ %4-ͰͷTMPU"1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, )

Slide 40

Slide 40 text

Slide 41

Slide 41 text

˔࢖͍ํΛ֮͑Δඞཁ͕͋Δ ˔࢖͍ํΛڧ੍͢Δ͜ͱ͸Ͱ͖ͳ͍ %4-ͰͷTMPU"1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, )

Slide 42

Slide 42 text

Slide 43

Slide 43 text

%4-ͰͷTMPU"1*ͷ஫ҙ఺ @Composable fun AppBar( title: @Composable () -> Unit, navigationIcon: @Composable AppBarIconScope.() -> Unit, ) @Stable class AppBarIconScope { @Composable fun BackButton(back: () - > Unit, modifier: Modifier = Modifier) { IconButton(onClick = back, modifier = modifier) { Icon( painter = painterResource(id = R.drawable.ic_back), contentDescription = null, ) } } } AppBar( title = { Text("Title") }, navigationIcon = { BackButton(back = { /* .. . * / }) }, ) AppBar( title = { Text("Title") }, navigationIcon = { IconButton( /* . .. */ ) { Icon( /* ... * / ) } }, ) ˔࢖͍ํΛ֮͑Δඞཁ͕͋Δ ˔࢖͍ํΛڧ੍͢Δ͜ͱ͸Ͱ͖ͳ͍ "QQ#BSͷྫͷΑ͏ʹɺ࢖༻ස౓͕ߴ͘ɺ༻్ʹҰఆͷ܏޲͕͋ΔʢΠϨΪϡϥʔ΋ͨ·ʹ͋Δʣ৔߹ʹ͸༗ޮ

Slide 44

Slide 44 text

Ҿ਺ʹσϑΥϧτ஋Λઃఆ͢Δ͜ͱͰɺίϯϙʔωϯτͷॊೈੑΛอͪͭͭɺ؆ܿʹهड़͢Δ͜ͱ͕Ͱ͖Δ σϑΥϧτҾ਺ @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), ) @Composable fun SomeComponent() { Button(onClick = {}) { .. . } }

Slide 45

Slide 45 text

Ҿ਺ʹσϑΥϧτ஋Λઃఆ͢Δ͜ͱͰɺίϯϙʔωϯτͷॊೈੑΛอͪͭͭɺ؆ܿʹهड़͢Δ͜ͱ͕Ͱ͖Δ σϑΥϧτҾ਺ σϑΥϧτ஋͕େྔʹ͋Δ৔߹͸ɺ ͦΕΒΛ·ͱΊͨΦϒδΣΫτΛ࡞Δ͜ͱ΋༗ޮ $PNQPOFOU%FGBVMUT @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), ) @Composable fun SomeComponent() { Button(onClick = {}) { .. . } } object ButtonDefaults { val shape: Shape @Composable get() = ... @Composable fun buttonColors( ... ): ButtonColors = ... @Composable fun buttonElevation( .. . ): ButtonElevation = ... }

Slide 46

Slide 46 text

Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍

Slide 47

Slide 47 text

Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Ұݟศརʹݟ͑ΔσϑΥϧτҾ਺͕ͩɺ҉໧తʹ஋Λઃఆ͢Δ͜ͱʹͳΔ ͜ͷ҉໧తͳ஋ͷଘࡏʹؾ͔ͮͳ͍͜ͱͰ໰୊ʹͳΔ৔߹͕͋Δ ҆қʹσϑΥϧτҾ਺Λઃఆ͠ͳ͍ @Composable fun CenteredText() { Column { Text( text = "தԝἧ͍͑ͨ͠จࣈྻ", textAlign = TextAlign.Center, modifier = Modifier .align(Alignment.CenterHorizontally) .padding(32.dp) ) } } ྫɿ5FYUͷதԝἧ͑ UFYU"MJHOͷࢦఆ͕ඞཁͩͬͨ

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

ݩʑίϯϙʔωϯτʹؔ࿈ͨ͠Ϋϥε͕ଘࡏ͍ͯͨ͠ΓɺҾ਺͕૿͑ͯ͘ΔͱҰͭͷΫϥεͰҾ਺Λ·ͱΊͨ͘ͳΔ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ @Composable fun HouseHeader( name: String, address: String, ) ϑϥοτʹॻ͘ @Composable fun HouseHeader( house: House, ) ΫϥεͰ·ͱΊΔ data class House( val name: String, val address: String, )

Slide 54

Slide 54 text

ݩʑίϯϙʔωϯτʹؔ࿈ͨ͠Ϋϥε͕ଘࡏ͍ͯͨ͠ΓɺҾ਺͕૿͑ͯ͘ΔͱҰͭͷΫϥεͰҾ਺Λ·ͱΊͨ͘ͳΔ ͕ɺجຊతʹ͸ϑϥοτʹॻ͍ͨ΄͏͕ྑ͍ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ @Composable fun HouseHeader( name: String, address: String, ) ϑϥοτʹॻ͘ 👍 @Composable fun HouseHeader( house: House, ) ΫϥεͰ·ͱΊΔ data class House( val name: String, val address: String, )

Slide 55

Slide 55 text

Ϋϥεʹ·ͱΊͨ৔߹ɺఆٛΛݟͳ͍ͱίϯϙʔωϯτʹඞཁͳ஋͕Θ͔ΒͣɺϫϯΫογϣϯڬΉ͜ͱʹͳΔ data class House( val name: String, val address: String, ) σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿՄಡੑ )PVTFͷఆٛΛݟΔ·ͰΘ͔Βͳ͍ Ұ໨ͰԿ͕ඞཁ͔Θ͔Δ @Composable fun HouseHeader( name: String, address: String, ) @Composable fun HouseHeader( house: House, ) 👀

Slide 56

Slide 56 text

ίϯϙʔωϯτ಺Ͱࢀর͠ͳ͍ϑΟʔϧυ͕Ϋϥεʹؚ·ΕΔ৔߹ɺແҙຯʹ࠶ίϯϙʔζ͕૸ͬͯ͠·͏ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿύϑΥʔϚϯε name,address͕มΘͬͨ ͱ͖͚ͩ࠶ίϯϙʔζ @Composable fun HouseHeader( name: String, address: String, )

Slide 57

Slide 57 text

ίϯϙʔωϯτ಺Ͱࢀর͠ͳ͍ϑΟʔϧυ͕Ϋϥεʹؚ·ΕΔ৔߹ɺແҙຯʹ࠶ίϯϙʔζ͕૸ͬͯ͠·͏ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿύϑΥʔϚϯε name,address͕มΘͬͨ ͱ͖͚ͩ࠶ίϯϙʔζ data class House( val name: String, val address: String, ) @Composable fun HouseHeader( house: House, ) @Composable fun HouseHeader( name: String, address: String, )

Slide 58

Slide 58 text

ίϯϙʔωϯτ಺Ͱࢀর͠ͳ͍ϑΟʔϧυ͕Ϋϥεʹؚ·ΕΔ৔߹ɺແҙຯʹ࠶ίϯϙʔζ͕૸ͬͯ͠·͏ σʔλΫϥεͰҾ਺Λ·ͱΊΔ΂͖͔ɿύϑΥʔϚϯε name,address͕มΘͬͨ ͱ͖͚ͩ࠶ίϯϙʔζ data class House( val name: String, val address: String, val imageUrl: String, ) @Composable fun HouseHeader( house: House, ) @Composable fun HouseHeader( name: String, address: String, )

Slide 59

Slide 59 text

Slide 60

Slide 60 text

ΫϥεͷϓϩύςΟ͕૿͑ͨࡍɺͦͷϓϩύςΟͱ͸ແؔ܎ͳίϯϙʔωϯτͷϓϨϏϡʔ͕ΤϥʔʹͳΔ ϓϨϏϡʔ͕ո͍͠ઃܭΛᖰΓग़͢ @Composable fun HouseHeader( house: House, ) data class House( val name: String, val address: String, val imageUrl: String, )

Slide 61

Slide 61 text

ΫϥεͷϓϩύςΟ͕૿͑ͨࡍɺͦͷϓϩύςΟͱ͸ແؔ܎ͳίϯϙʔωϯτͷϓϨϏϡʔ͕ΤϥʔʹͳΔ ϓϨϏϡʔ͕ո͍͠ઃܭΛᖰΓग़͢ @Preview @Composable fun PreviewHouseHeader() { HouseHeader( House( name = "House", address = "Address", ) ) } @Composable fun HouseHeader( house: House, ) data class House( val name: String, val address: String, val imageUrl: String, )

Slide 62

Slide 62 text

@Preview @Composable fun PreviewHouseHeader() { HouseHeader( House( name = "House", address = "Address", ) ) } ΫϥεͷϓϩύςΟ͕૿͑ͨࡍɺͦͷϓϩύςΟͱ͸ແؔ܎ͳίϯϙʔωϯτͷϓϨϏϡʔ͕ΤϥʔʹͳΔ ϓϨϏϡʔ͕ո͍͠ઃܭΛᖰΓग़͢ ͜͜ʹimageUrl͕ͳ͍ͷͰϏϧυΤϥʔ @Composable fun HouseHeader( house: House, ) data class House( val name: String, val address: String, val imageUrl: String, )

Slide 63

Slide 63 text

ίϯϙʔωϯτ͕Կॏʹ΋ωετ͢Δͱ͖ɺόέπϦϨʔͷΑ͏ʹ ஋Λதܧ͢ΔͨΊʹίϯϙʔωϯτͷҾ਺͕૿͑ͯ͠·͏ 1SPQFSUZESJMMJOH BookingScreen ScheduleSection Schedule CheckinRow checkinDateTime checkinDateTime checkinDateTime ͜ͷลͰ͸checkinDateTime͸ ௚઀࢖͏Θ͚Ͱ͸ͳ͍

Slide 64

Slide 64 text

લड़ͷ௨Γɺجຊతʹ͸ඞཁͳϓϩύςΟΛϑϥοτʹྻڍͨ͠΄͏͕͍͍ ʢ1SPQFSUZESJMMJOHͰߏΘͳ͍ʣ ΫϥεΛ࡞Δ͜ͱͰҙຯͷ͋ΔάϧʔϓԽ͕Ͱ͖ΔͷͰ͋Ε͹ɺΫϥεʹू໿͢Δͷ΋͋Γ 1SPQFSUZESJMMJOH͢΂͖͔

Slide 65

Slide 65 text

લड़ͷ௨Γɺجຊతʹ͸ඞཁͳϓϩύςΟΛϑϥοτʹྻڍͨ͠΄͏͕͍͍ ʢ1SPQFSUZESJMMJOHͰߏΘͳ͍ʣ ΫϥεΛ࡞Δ͜ͱͰҙຯͷ͋ΔάϧʔϓԽ͕Ͱ͖ΔͷͰ͋Ε͹ɺΫϥεʹू໿͢Δͷ΋͋Γ 1SPQFSUZESJMMJOH͢΂͖͔ @Composable fun BookingOverview( mealSectionTitle: String, mealSectionSubtitle: String, scheduleSectionTitle: String, scheduleSectionSubtitle: String, meals: List, schedule: Schedule, ) @Composable fun BookingOverview( mealSectionUiState: MealSectionUiState, scheduleSectionUiState: ScheduleSectionUiState, ) Ұ໨ͰΘ͔Δ͜ͱͰͷՄಡੑɹʻɹҙຯతʹ·ͱ·͍ͬͯΔ͜ͱͰͷՄಡੑ

Slide 66

Slide 66 text

·ͱΊ ຊจ ຊจ γϯϓϧʹͰ͖ΔύλʔϯɺͰ͖ͳ͍ύλʔϯΛݟ෼͚Δ ˔Ͳ͏࢖ΘΕΔίϯϙʔωϯτͳͷ͔ ˔ϞδϡʔϧΛ෼͚ͯՄࢹੑΛ੍ޚ͢Δ ॊೈͳ"1*Λ࡞Δ ˔TUBUFIPJTUJOH͢΂͖͔ ˔TMPU"1*Λ࢖͏͢΂͖͔ ˔%4-ͰͷTMPU"1*ͷ׆༻ ˔σϑΥϧτҾ਺ͷ׆༻ͱةݥੑ ˔Ҿ਺ΛΫϥεͰ·ͱΊΔ΂͖͔