Skip to content

Instantly share code, notes, and snippets.

@manueldidonna
Created May 4, 2020 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manueldidonna/1eef3017a4ff4e42865641482ea78817 to your computer and use it in GitHub Desktop.
Save manueldidonna/1eef3017a4ff4e42865641482ea78817 to your computer and use it in GitHub Desktop.
A sample list with jetpack compose. It has bad performance
import androidx.compose.Composable
import androidx.ui.core.Alignment
import androidx.ui.core.Modifier
import androidx.ui.foundation.*
import androidx.ui.foundation.shape.corner.CornerSize
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.graphics.ColorFilter
import androidx.ui.layout.*
import androidx.ui.material.Card
import androidx.ui.material.MaterialTheme
import androidx.ui.material.ripple.ripple
import androidx.ui.res.imageResource
import androidx.ui.tooling.preview.Preview
import androidx.ui.unit.dp
import androidx.ui.unit.sp
data class PokemonPreview(
val slot: Int,
val nickname: String,
val level: Int
)
@Composable
fun PokemonList(pokemon: List<PokemonPreview>, onSelection: (slot: Int) -> Unit) {
AdapterList(data = pokemon) {
PokemonCard(name = it.nickname, level = it.level) {
onSelection(it.slot)
}
if (it.slot == pokemon.lastIndex)
Spacer(modifier = Modifier.preferredHeight(16.dp))
}
}
@Composable
private fun PokemonCard(name: String, level: Int, onClick: () -> Unit) {
Card(
modifier = Modifier
.fillMaxWidth()
.preferredHeight(120.dp)
.padding(start = 16.dp, top = 4.dp, bottom = 4.dp, end = 16.dp),
color = MaterialTheme.colors.surface,
shape = MaterialTheme.shapes.medium.copy(CornerSize(8.dp))
) {
Clickable(onClick = onClick, modifier = Modifier.ripple()) {
Stack {
Image(
modifier = Modifier
.gravity(Alignment.BottomEnd)
.preferredSize(96.dp)
.offset(10.dp, 15.dp),
asset = imageResource(id = R.drawable.pokeball_s),
colorFilter = ColorFilter.tint(MaterialTheme.colors.onSurface.copy(alpha = 0.7f))
)
Column(
modifier = Modifier
.gravity(Alignment.TopStart)
.padding(start = 24.dp, top = 24.dp)
) {
Text(
modifier = Modifier,
text = name,
style = MaterialTheme.typography.body2.copy(fontSize = 18.sp),
color = MaterialTheme.colors.onSurface
)
CardLabel(text = "Lv. $level", modifier = Modifier.padding(top = 12.dp))
}
}
}
}
}
@Composable
private fun CardLabel(text: String, modifier: Modifier = Modifier) {
Box(
modifier = modifier,
shape = RoundedCornerShape(8.dp),
backgroundColor = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
paddingBottom = 4.dp,
paddingTop = 4.dp,
paddingEnd = 8.dp,
paddingStart = 8.dp
) {
Text(
text = text,
style = MaterialTheme.typography.subtitle1.copy(fontSize = 12.sp),
color = MaterialTheme.colors.onSurface
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment