Display images

This commit is contained in:
Joren 2024-04-29 17:53:35 +02:00
parent 3352417e12
commit 9ee9d5af0e
Signed by untrusted user who does not match committer: Joren
GPG Key ID: 280E33DFBC0F1B55
2 changed files with 54 additions and 4 deletions

View File

@ -66,6 +66,7 @@ dependencies {
debugImplementation(libs.androidx.ui.test.manifest)
implementation("androidx.navigation:navigation-compose:$nav_version")
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")
implementation("com.squareup.retrofit2:retrofit:2.11.0")
implementation("com.squareup.retrofit2:converter-gson:2.11.0")
implementation("io.coil-kt:coil-compose:2.6.0")
}

View File

@ -1,24 +1,40 @@
package com.ti.mobpo.ui.screens
import androidx.compose.foundation.Image
import com.ti.mobpo.ui.PokeSearchViewModel
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.ti.mobpo.R
import com.ti.mobpo.ui.SearchBar
import androidx.lifecycle.viewmodel.compose.viewModel
import com.ti.mobpo.model.PokemonDetails
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.ti.mobpo.ui.theme.MobileSecurityTheme
@Composable
fun PokeSearchScreen(pokeSearchViewModel: PokeSearchViewModel) {
@ -44,8 +60,12 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) {
searchResults?.let { results ->
if (results.isNotEmpty()) {
results.forEach { pokemon ->
Text(text = pokemon.name)
LazyVerticalGrid(
columns = GridCells.Adaptive(150.dp),
) {
items(items = results, key = { pokemon -> pokemon.id }) { pokemon ->
PokemonCard(pokemon)
}
}
} else {
Text("No results found")
@ -54,9 +74,38 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) {
}
}
@Composable
fun PokemonCard(pokemon: PokemonDetails) {
Card(
shape = MaterialTheme.shapes.medium,
elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
modifier = Modifier
.padding(4.dp)
.fillMaxWidth()
.aspectRatio(1f)
) {
AsyncImage(
model = ImageRequest.Builder(context = LocalContext.current).data(pokemon.sprites.other.officialArtwork.frontDefault)
.crossfade(true).build(),
contentDescription = pokemon.name,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxWidth()
)
}
}
@Preview(showBackground = true)
@Composable
fun PokeSearchApp(){
val pokeSearchViewModel: PokeSearchViewModel = viewModel()
PokeSearchScreen(pokeSearchViewModel)
}
@Preview(showBackground = true)
@Composable
fun PhotosGridScreenPreview() {
MobileSecurityTheme {
}
}