Jetpack Compose
About this episode
See forum comments
Mark complete
Next episode: 14. Add Animations to Compose
Leave a rating/review
Notes: 13. Reuse UI in Multiple Screens
The student materials have been reviewed and are updated as of September 2022.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Intro
[Slide 1 - Generics & reusability]
Demo
Generics are the best example of reusability when it comes to writing code. Whenever you write a generic function, you can write it to fit many or all types of data you send to it, while keeping the base functionality the same.
@Composable
fun <T> SpinnerPicker(
pickerText: String,
preselectedItem: T? = null,
items: List<T>,
itemToName: (T) -> String,
onItemPicked: (T) -> Unit
) {}
val isPickerExpanded = remember { mutableStateOf(false) }
val pickedItem = remember { mutableStateOf(preselectedItem?.let(itemToName) ?: "") }
Row(
modifier = Modifier
.wrapContentWidth()
.padding(start = 16.dp, end = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
DropdownMenuButton(pickerText, onClick = { isPickerExpanded.value = true })
DropdownMenu(
modifier = Modifier.height(300.dp).width(200.dp),
expanded = isPickerExpanded.value,
onDismissRequest = { isPickerExpanded.value = false }) {
}
}
for (item in items) {
DropdownMenuItem(onClick = {
onItemPicked(item)
isPickerExpanded.value = false
pickedItem.value = itemToName(item)
}) {
Text(text = itemToName(item))
}
}
val currentlySelected = if (pickedItem.value.isEmpty()) "None" else pickedItem.value
Text(
text = stringResource(id = R.string.current_selection, currentlySelected),
color = MaterialTheme.colors.onPrimary
)
private val _genresState = mutableStateOf(emptyList<Genre>())
SpinnerPicker(
pickerText = stringResource(id = R.string.genre_select),
items = genres,
itemToName = { it.name },
onItemPicked = {
_addBookState.value = _addBookState.value.copy(genreId = it.id)
})
SpinnerPicker(
items = _books.value,
preselectedItem = currentlySelectedBook.value,
onItemPicked = { bookAndGenre ->
_bookReviewState.value = _bookReviewState.value?.copy(bookAndGenre = bookAndGenre)
currentlySelectedBook.value = bookAndGenre
},
itemToName = { it.book.name },
pickerText = stringResource(id = R.string.book_picker_button_text)
)
SpinnerPicker(
pickerText = stringResource(id = R.string.genre_select),
items = genres,
preselectedItem = currentlySelectedGenre,
itemToName = { it.name },
onItemPicked = { currentGenreFilter.value = it })
@Composable
fun <T> DeleteDialog(
item: T,
message: String,
onDeleteItem: (T) -> Unit,
onDismiss: () -> Unit
) {
AlertDialog(
title = { Text(text = stringResource(id = R.string.delete_title)) },
text = { Text(text = message) },
onDismissRequest = onDismiss,
buttons = {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
DialogButton(
text = R.string.yes,
onClickAction = { onDeleteItem(item) }
)
DialogButton(text = R.string.cancel, onClickAction = onDismiss)
}
})
}