Jetpack Composeで感じたしあわせ〜♡なところ

+FUQBDL$PNQPTFͰײͨ͡ ͋͠Θͤʙὑͳͱ͜Ζ :VNFNJBQL ʹ͜͠Γ͞ͿΖʙ!TVCSPI@

"CPVU.F ʹ͜͠Γ͞ͿΖʙ ✦౦ژ౎ɾҏ౾େౡग़਎ ✦גࣜձࣾ#FBS5BJM ‣ "OESPJEΤϯδχΞ ,PUMJO+BWB ˑ ‣ 8FCΤϯδχΞ
3BJMT3FBDU

গ͚ͩ͠ ࡞ͬͨϞϊએ఻ ˑ$0-03.!45&3 ΞΠυϧϚελʔγϦʔζʹొ৔͢ΔΞΠυϧͷʜ w ΠϝʔδΧϥʔݕࡧ ϓϨϏϡʔ w ϞόΠϧ୺຤ΛϖϯϥΠτԽɹͰ͖ΔΞϓϦ 8FC൛63-IUUQTJNBTDPMPSNBTUFSXFCBQQ
(JU)VCTVCSPIDPMPSNBTUFS 8FCΞϓϦ൛ϦϦʔεࡁʂ 㾎,PUMJO+4Ͱ࣮૷ ,PUMJO཰ 㾎μʔΫςʔϚରԠ 㾎ଟݴޠରԠ "OESPJE൛Λ+FUQBDL$PNQPTFͰ࣮૷தʂ

࿩͢͜ͱ ˑ+FUQBDL$PNQPTFͰ͔ͦͦͬ͜͜͠Γ࣮૷ͯ͠ಘͨ஌ݟ 㾎+FUQBDL$PNQPTFͰ͋͠Θͤʹͳͬͨͱ͜Ζ ,PUMJO.11Ͱ6*ϩδοΫ·Ͱڞ௨Խ͢Δ໺๬ͷ࿩ 㾎+FUQBDL$PNQPTFͰͭΒ͍ؾ࣋ͪʹͳͬͨͱ͜Ζ 㾎ࠓޙͷల๬

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎6*ίϯϙʔωϯτΛখཻ͍͞౓Ͱѻ͑Δʂ ཻ౓͕େ͖͍ ը໘୯Ґ ɺখ͞ͳมߋ͕શମʹӨڹΛ༩͕͑ͪ ཻ౓͕খ͍͞ ෦඼୯Ґ
ɺมߋ͕ίϯϙʔωϯτ಺ʹऩ·Δ

ɺมߋ͕ίϯϙʔωϯτ಺ʹऩ·Δ $IJQTͱ$IFDLCPYೖΕସ͍͑ͨ ˣ &EJU5FYU$IJQT$IFDLCPYͷ BQQMBZPVU@DPOTUSBJOU˓˓Λશͯमਖ਼ &EJU5FYU͸मਖ਼ͱؔ܎ͳ͍ͷʹʜɹɹ

ɺมߋ͕ίϯϙʔωϯτ಺ʹऩ·Δ @Composable fun SearchBox( params: SearchParams, onParamsChange: (SearchParams) -> Unit = {}, modifier: Modifier = Modifier, ) { Column(Modifier.fillMaxWidth() + modifier) { Spacer(Modifier.preferredHeight(16.dp)) BrandChips(params.brands, ...) Spacer(Modifier.preferredHeight(16.dp)) TypeChips(params.brands, params.types, ... ) } }

ɺมߋ͕ίϯϙʔωϯτ಺ʹऩ·Δ @Composable fun SearchBox( params: SearchParams, onParamsChange: (SearchParams) -> Unit = {}, modifier: Modifier = Modifier, ) { Column(Modifier.fillMaxWidth() + modifier) { Spacer(Modifier.preferredHeight(16.dp)) BrandChips(params.brands, ...) Spacer(Modifier.preferredHeight(16.dp)) TypeChips(params.brands, params.types, ... ) } } $IJQTͱ$IFDLCPYΛίϐϖͰೖΕସ͑ &EJU5FYUʹҰ੾৮ΕͣมߋͰ͖Δʂɹɹ

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎7JFX.PEFMɾ$PSPVUJOFTͷαϙʔτ͕ॆ࣮ʂ 7JFX.PEFM !$PNQPTBCMFͷதͰ7JFX.PEFMΛੜ੒͢Δϝιου LFZ΍GBDUPSZ΋ͪΌΜͱ౉ͤΔʂɹ

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎7JFX.PEFMɾ$PSPVUJOFTͷαϙʔτ͕ॆ࣮ʂ $PSPVUJOFT 'MPXΛ4UBUFʹม׵͢Δϝιου ˠ'MPXͰ஋͕ྲྀΕΔͱ!$PNQPTBCMFͷঢ়ଶ͕ߋ৽͞ΕΔʂ

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎7JFX.PEFMɾ$PSPVUJOFTͷαϙʔτ͕ॆ࣮ʂ $PSPVUJOFT val uiModel by viewModel.uiModel.collectAsState(initial =
...) ɹ ColorLists( uiModel.items, onSelect = viewModel::select, onClick = { ... }, onPreviewClick = { ... }, onPenlightClick = { ... }, onAllClick = viewModel::selectAll, modifier = Modifier.fillMaxSize(), ) ྫΠϝʔδΧϥʔͷϦετදࣔ

...) ɹ ColorLists( uiModel.items, onSelect = viewModel::select, onClick = { ... }, onPreviewClick = { ... }, onPenlightClick = { ... }, onAllClick = viewModel::selectAll, modifier = Modifier.fillMaxSize(), ) ྫΠϝʔδΧϥʔͷϦετදࣔ 'MPXˠ4UBUFม׵

...) ɹ ColorLists( uiModel.items, onSelect = viewModel::select, onClick = { ... }, onPreviewClick = { ... }, onPenlightClick = { ... }, onAllClick = viewModel::selectAll, modifier = Modifier.fillMaxSize(), ) ྫΠϝʔδΧϥʔͷϦετදࣔ ϦετʹมԽ͕͋ͬͨΒ ࣗಈߋ৽ʂ

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎4UBUF؅ཧͷ"1*͕࢖͍΍͍͢ʂ ྫ%SBXFS-BZPVUPO val drawer = findViewById<DrawerLayout>(R.id.drawerLayout) //
։ดॲཧ drawer.closeDrawer(Gravity.LEFT) / drawer.openDrawer(Gravity.RIGHT) // ։ดঢ়ଶͷऔಘ drawer.isDrawerOpen(Gravity.LEFT) ։ดϝιου ঢ়ଶΛ%SBXFS-BZPVUͷΠϯελϯε͕࣋ͭ ˠ7JFXͱ4UBUF͕ີ݁߹ͷঢ়ଶ

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎4UBUF؅ཧͷ"1*͕࢖͍΍͍͢ʂ ྫ%SBXFS-BZPVUPO val modalDrawerState = rememberDrawerState(DrawerValue.Closed) ModalDrawerLayout(
drawerState = modalDrawerState, drawerContent = ..., bodyContent = { ... }, ) // ։ดॲཧ modalDrawerState.open() / modalDrawerState.close() // ։ดঢ়ଶͷऔಘ modalDrawerState.isOpen / modalDrawerState.isClosed

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎4UBUF؅ཧͷ"1*͕࢖͍΍͍͢ʂ ྫ%SBXFS-BZPVUPO val modalDrawerState = rememberDrawerState(DrawerValue.Closed) ModalDrawerLayout(
drawerState = modalDrawerState, drawerContent = ..., bodyContent = { ... }, ) // ։ดॲཧ modalDrawerState.open() / modalDrawerState.close() // ։ดঢ়ଶͷऔಘ modalDrawerState.isOpen / modalDrawerState.isClosed ։ดϝιου ঢ়ଶΛ%SBXFS4UBUFΫϥε͕࣋ͭ ˠ7JFXͱ4UBUF͕ૄ݁߹ͳঢ়ଶ

͋͠Θͤʹͳͬͨͱ͜Ζ 㾎3FBDUͱͷ਌࿨ੑ͕ߴ͍ʂ +FUQBDL$PNQPTF΋3FBDU΋ಉ͡એݴత6*ͷࢥ૝ 4UBUFGVMͳ6*ίϯϙʔωϯτͷ࣮૷ʹ༗༻ͳ"1*͕ଘࡏ 4UBUFΫϥεNVUBCMF4UBUF0Gϝιου
VTF4UBUFϝιου ࣅ௨ͬͨಛ௃Λ࣋ͭͨΊɺ֓೦తͳ෦෼ͷॻ͖ຯ͕ࣅ͍ͯΔ ˠ8FCΞϓϦઌߦϦϦʔεޙͷ"OESPJE࣮૷͕໨ʹݟ͑ͯૣ͔ͬͨʂ ˞ݸਓͷײ૝Ͱ͢

͜Ε͚ͩࣅ͍ͯΔͳΒɺ8FCͱ"OESPJEͰ 1SFTFOUFSPS7JFX.PEFM·Ͱ ίʔυΛڞ௨ԽͰ͖ΔͷͰ͸ʜʁ ˞͔͜͜Βগ͠୤ઢ

Ծઆ6*ϩδοΫ·Ͱڞ௨ԽͰ͖Δͷ͔ʁ 㾎ݕূ಺༰ $0-03.!45&3ͷ8FC"OESPJEΞϓϦͷ࣮૷Λڞ௨Խ 㾎΍Δ΂͖͜ͱ .PEFM 3FQPTJUPSZͷ,PUMJO.11ରԠˠ׬ྃ 7JFX.PEFMͷ,PUMJO.11ରԠ
8FC൛ͷ࣮૷Λ7JFX.PEFMʹ߹Θͤͯमਖ਼ CZ,PUMJO.11

݁࿦Ͱ͖ͨʂʂʂ ΠϝʔδΧϥʔϓϨϏϡʔը໘ͷ6*ϩδοΫ ˠDPNNPO.BJOԼʹ͍ΔͷͰ.11ରԠࡁ ΠϝʔδΧϥʔݕࡧը໘ͷ6*ϩδοΫ ˠDPNNPO.BJOԼʹ͍ΔͷͰ.11ରԠࡁ

Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎7JFX.PEFMΛ,PUMJO.11ʹରԠͨ͠ܗࣜͰ࣮૷ ڞ௨෦෼ΛFYQFDUम০ࢠΛ͚࣮ͭͯ૷ expect open class ViewModel constructor(coroutineScope: CoroutineScope?
= null) { protected val viewModelScope: CoroutineScope } DPMPSNBTUFSTIBSFEVUJMJUJFTTSDDPNNPO.BJO

㾎7JFX.PEFMΛ,PUMJO.11ʹରԠͨ͠ܗࣜͰ࣮૷ ڞ௨෦෼ΛFYQFDUम০ࢠΛ͚࣮ͭͯ૷ Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ expect open class ViewModel constructor(coroutineScope: CoroutineScope?
= null) { protected val viewModelScope: CoroutineScope } DPMPSNBTUFSTIBSFEVUJMJUJFTTSDDPNNPO.BJO FYQFDUम০ࢠΛ͚ͭɺ7JFX.PEFMΫϥεͷଘࡏΛఆٛ͢ΔΠϝʔδ "OESPJE+4J04ͦΕͧΕʹ޲͚࣮ͨࡍͷ࣮૷͸ผͰఆٛ͢Δ

Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎7JFX.PEFMΛ,PUMJO.11ʹରԠͨ͠ܗࣜͰ࣮૷ "OESPJE޲͚ͷ࣮૷ DPMPSNBTUFSTIBSFEVUJMJUJFTTSDBOESPJE.BJO import androidx.lifecycle.viewModelScope as androidViewModelScope import
androidx.lifecycle.ViewModel as AndroidViewModel actual open class ViewModel actual constructor( coroutineScope: CoroutineScope? ) : AndroidViewModel() { protected actual val viewModelScope = coroutineScope ?: androidViewModelScope }

androidx.lifecycle.ViewModel as AndroidViewModel actual open class ViewModel actual constructor( coroutineScope: CoroutineScope? ) : AndroidViewModel() { protected actual val viewModelScope = coroutineScope ?: androidViewModelScope } "OESPJE޲͚࣮૷͸"OESPJE7JFX.PEFMΛܧঝ

androidx.lifecycle.ViewModel as AndroidViewModel actual open class ViewModel actual constructor( coroutineScope: CoroutineScope? ) : AndroidViewModel() { protected actual val viewModelScope = coroutineScope ?: androidViewModelScope } "OESPJE޲͚࣮૷͸BOESPJE7JFX.PEFM4DPQFΛอ࣋

Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎7JFX.PEFMΛ,PUMJO.11ʹରԠͨ͠ܗࣜͰ࣮૷ +4޲͚ͷ࣮૷ DPMPSNBTUFSTIBSFEVUJMJUJFTTSDKT.BJO actual open class ViewModel actual
constructor(coroutineScope: CoroutineScope?) { protected actual val viewModelScope = coroutineScope ?: MainScope() }

Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎7JFX.PEFMΛ,PUMJO.11ʹରԠͨ͠ܗࣜͰ࣮૷ +4޲͚ͷ࣮૷ DPMPSNBTUFSTIBSFEVUJMJUJFTTSDKT.BJO actual open class ViewModel actual
constructor(coroutineScope: CoroutineScope?) { protected actual val viewModelScope = coroutineScope ?: MainScope() } +4޲͚࣮૷͸Կ΋ܧঝ͠ͳ͍ɺ.BJO4DPQF Λอ࣋͢Δ ˠ6*ϩδοΫΛهड़͢ΔΫϥεͰϓϥοτϑΥʔϜຖͷ࣮૷ࠩΛٵऩͰ͖ͨʂ

Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎6*ϩδοΫΛ࣮૷ ύʔιφϧΧϥʔΛ"1*͔Βऔಘ͢Δ1SFWJFX7JFX.PEFMΫϥε class PreviewViewModel( private val repository: IdolColorsRepository,
coroutineScope: CoroutineScope? = null, ) : ViewModel(coroutineScope) { @ExperimentalCoroutinesApi private val _idolsLoadState: MutableStateFlow<LoadState> by lazy { MutableStateFlow(LoadState.Loaded<List<IdolColor>>(listOf())) } @ExperimentalCoroutinesApi val uiModel: Flow<FullscreenPreviewUiModel> get() = _idolsLoadState.map { FullscreenPreviewUiModel(it) } .apply { launchIn(viewModelScope) } fun fetch(ids: List<String>) { val job = viewModelScope.launch(start = CoroutineStart.LAZY) { runCatching { repository.search(ids) } .onSuccess { _idolsLoadState.value = LoadState.Loaded(it) } .onFailure { _idolsLoadState.value = LoadState.Error(it) } } _idolsLoadState.value = LoadState.Loading job.start() } } ࣗલ࣮૷ͨ͠7JFX.PEFMΛܧঝˠ"OESPJEͱ+4Ͱڞ௨ར༻͕Մೳʂ

Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎7JFX.PEFMͷJOKFDU ,PJOΛ࢖ͬͯ1SFWJFX7JFX.PEFMͷΠϯελϯεΛ஫ೖPO class PreviewActivity : AppCompatActivity() { private
val viewModel: PreviewViewModel by viewModel() @ExperimentalMaterialApi @ExperimentalLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Preview(intent.screenType, viewModel, ::finish) } } }

val viewModel: PreviewViewModel by viewModel() @ExperimentalMaterialApi @ExperimentalLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Preview(intent.screenType, viewModel, ::finish) } } } 1SFWJFX7JFX.PEFMͷΠϯελϯεΛ"DUJWJUZʹ஫ೖ

val viewModel: PreviewViewModel by viewModel() @ExperimentalMaterialApi @ExperimentalLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Preview(intent.screenType, viewModel, ::finish) } } } !$PNQPTBCMFʹ1SFWJFX7JFX.PEFMͷΠϯελϯεΛ౉͢

Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎7JFX.PEFMͷJOKFDU ,PJOΛ࢖ͬͯ1SFWJFX7JFX.PEFMͷΠϯελϯεΛ஫ೖPO class FullscreenPreviewContainer : RComponent<FullscreenPreviewProps, FullscreenPreviewState>() {
val viewModel: PreviewViewModel by inject() override fun FullscreenPreviewState.init() { uiModel = FullscreenPreviewUiModel.INITIALIZED } override fun componentDidMount() { launch { viewModel.uiModel.collect { setState { uiModel = it } } } } }

class FullscreenPreviewContainer : RComponent<FullscreenPreviewProps, FullscreenPreviewState>() { val viewModel: PreviewViewModel by
inject() override fun FullscreenPreviewState.init() { uiModel = FullscreenPreviewUiModel.INITIALIZED } override fun componentDidMount() { launch { viewModel.uiModel.collect { setState { uiModel = it } } } } } Ͳ͏΍ͬͯڞ௨Խͤͨ͞ͷ͔ 㾎7JFX.PEFMͷJOKFDU ,PJOΛ࢖ͬͯ1SFWJFX7JFX.PEFMͷΠϯελϯεΛ஫ೖPO 3$PNQPOFOUˠ"OESPJEͰݴ͏"DUJWJUZతͳΫϥε

val viewModel: PreviewViewModel by inject() override fun FullscreenPreviewState.init() { uiModel = FullscreenPreviewUiModel.INITIALIZED } override fun componentDidMount() { launch { viewModel.uiModel.collect { setState { uiModel = it } } } } } 1SFWJFX7JFX.PEFMͷΠϯελϯεΛ3$PNQPOFOUʹ஫ೖ

val viewModel: PreviewViewModel by inject() override fun FullscreenPreviewState.init() { uiModel = FullscreenPreviewUiModel.INITIALIZED } override fun componentDidMount() { launch { viewModel.uiModel.collect { setState { uiModel = it } } } } } VJ.PEFM͕ߋ৽͞ΕΔ౓ʹ࠶ඳը͕͔͔ΔΑ͏ઃఆ DPNQPOFOU%JE.PVOUˠ"OESPJEͷPO$SFBUFʹ૬౰

ΊͬͪΌ͍͍ײ͡ʂʂʂ ࣌୅͸+FUQBDL$PNQPTFͱ ,PUMJO.11ʂʂʂ

ͭΒ͍ؾ࣋ͪʹͳͬͨͱ͜Ζ 㾎"1*͕සൟʹมΘΔ ϝιου΍Ҿ਺͕ফ໓͢Δ͜ͱ͸೔ৗ஡൧ࣄ ·͊Ћ൛ͳͷͰʜ αϯϓϧίʔυ෇͖Ͱ୳͢ͱEFW൛ͷ৘ใ্͕Ґʹώοτ͕ͪ͠ 㾎جຊతͳίϯϙʔωϯτʹ΋ॏେͳόά͕࢒͍ͬͯͨΓ͢Δ
ྫ5FYU'JFME ผίϯϙʔωϯτʹઌʹϑΥʔΧε͕౰ͨΔͱ*.&͕ग़ͯ͜ͳ͍ ˢϚδͰࠔͬͯΔ

ͭΒ͍ؾ࣋ͪʹͳͬͨͱ͜Ζ 㾎.PEJpFSʹ׳Ε͕ඞཁ 7JFXͷݟͨ໨Λมߋ͢ΔϏϧμʔΫϥε ϝιουͷ࣮ߦॱʹΑͬͯNBSHJOͷద༻Ґஔ͕มΘͬͨΓ͢Δ Modifier.preferredHeight(32.dp) .background( color
= MaterialTheme.colors.primary, shape = CircleShape, ) .border(BorderStroke(1.dp, MaterialTheme.colors.primary), CircleShape) .wrapContentHeight(Alignment.CenterVertically) .padding(horizontal = 12.dp) όάʁͦΕͱ΋࢓༷ʁ +FUQBDL$PNQPTFɺָ͍͠ͷ͚ͩͲຊ൪ར༻͸ͪΐͬͱͭΒ͍ʜ

㾎+FUQBDL$PNQPTF Ћ൛ ཉ͍͠ػೳ͸͔ͳΓἧ͖ͬͯͨʂຊ൪Ͱ࢖͑Δ೔΋͍ۙʜʁ 7JFXͱ4UBUFͷ෼཭͕ߟྀ͞Εͨίϯϙʔωϯτɺ࢖͍΍͍͢ʂ 㾎+FUQBDL$PNQPTF 3FBDU ,PUMJO.11
એݴత6*Ͱἧ͑ͨը໘࣮૷ ,PUMJO.11͸ඇৗʹ૬ੑ͕Αͦ͞͏ 6*Ҏ֎શͯͷϩδοΫΛ,PUMJOͰ࣮૷Ͱ͖Δੈք͕΍ͬͯ͘Δʂʜ͔΋ ·ͱΊ %SBXFS-BZPVU΍#BDLESPQͷ࣮૷͕ຊ౰ʹ؆୯ʂ +FUQBDL$PNQPTFͰͷ6*࣮૷ͷָ͠͞ΛΈͳ͞Μ΋ຯΘͬͯΈͯ͸ʜʂ 5IBOLZPVGPSMJTUFOJOH

Jetpack Composeで感じたしあわせ〜♡なところ

Jetpack Composeで感じたしあわせ〜♡なところ

Transcript

More Decks by subroh_0508

Other Decks in Technology

Featured