Display images
This commit is contained in:
parent
3352417e12
commit
9ee9d5af0e
@ -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")
|
||||
}
|
@ -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 {
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user