Skip to content

Commit

Permalink
finilize ChooseCharacter ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@klokidis
klokidis committed May 6, 2024
1 parent 9a214f9 commit 7b7df97
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 183 deletions.
21 changes: 1 addition & 20 deletions .idea/deploymentTargetDropDown.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 9 additions & 9 deletions app/src/main/java/com/example/charactersheet/data/Datasource.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import com.example.charactersheet.model.Character
class Datasource() {
fun loadArtists(): List<Artist> {
return listOf<Artist>(
Artist(R.string.neuvi, R.drawable.neuvi),
Artist(R.string.name1, R.drawable.artist1),
Artist(R.string.name1, R.drawable.artist1),
Artist(R.string.name1, R.drawable.artist1),
Artist(R.string.neuvi, R.drawable.sage),
Artist(R.string.name1, R.drawable.sage),
Artist(R.string.neuvi, R.drawable.sage),
Artist(R.string.name1, R.drawable.sage),
Artist(R.string.name1, R.drawable.artist1),
Artist(R.string.name1, R.drawable.artist1),
Artist(R.string.neuvi, R.drawable.artist1),
Expand All @@ -26,11 +26,11 @@ class Datasource() {
}
fun loadCharacters(): List<Character> {
return listOf<Character>(
Character(R.string.neuvi, R.drawable.neuvi,R.string.name1),
Character(R.string.name1, R.drawable.artist1,R.string.name1),
Character(R.string.name1, R.drawable.artist1,R.string.name1),
Character(R.string.name1, R.drawable.artist1,R.string.name1),
Character(R.string.name1, R.drawable.artist1,R.string.name1),
Character(R.string.app_name, R.drawable.sage,R.string.name1),
Character(R.string.name1, R.drawable.sage,R.string.name1),
Character(R.string.name1, R.drawable.sage,R.string.name1),
Character(R.string.name1, R.drawable.sage,R.string.name1),
Character(R.string.name1, R.drawable.sage,R.string.name1),
Character(R.string.name1, R.drawable.artist1,R.string.name1),
Character(R.string.name1, R.drawable.artist1,R.string.name1),
Character(R.string.name1, R.drawable.artist1,R.string.name1),
Expand Down
7 changes: 2 additions & 5 deletions app/src/main/java/com/example/charactersheet/ui/ChooseArtis.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,8 @@ fun ArtistList(
Color.Black.copy(
alpha = (0.1f)
)
),
contentAlignment = Alignment.Center
) {

}
)
)
Box(
modifier = Modifier
.fillMaxWidth()
Expand Down
226 changes: 77 additions & 149 deletions app/src/main/java/com/example/charactersheet/ui/ChooseCharacter.kt
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,20 @@
package com.example.charactersheet.ui


import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
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.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
Expand All @@ -33,133 +23,93 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.charactersheet.R
import com.example.charactersheet.model.Character
import com.example.charactersheet.ui.theme.CharacterSheetTheme


@Composable
fun ChooseCharacter(
onButtonCard: (Character) -> Unit,
characterList: List<Character>,
) {
val scrollState = rememberScrollState()
// val thisBackgroundColor = MaterialTheme.colorScheme.background

Column(
Modifier
.fillMaxSize()
.verticalScroll(scrollState),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = characterList[0].imageResourceId),
contentDescription = null,
modifier = Modifier
.weight(1f),
contentScale = ContentScale.Crop
)
LazyRow(
modifier = Modifier.fillMaxSize()
) {
items(characterList) { character ->
CharCard(character,onButtonCard)
}
}
Spacer(modifier = Modifier.padding(2.dp))
}
}

@Composable
fun CharCard(character: Character, onButtonCard: (Character) -> Unit) {
Card(
shape = RoundedCornerShape(0.dp),
LazyVerticalGrid(
columns = GridCells.Fixed(2),
modifier = Modifier
.clickable {
}
.padding(end = 3.dp, top = 3.dp, start = 3.dp)
.wrapContentSize(),
onClick = {onButtonCard(character)}
) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(
brush = Brush.verticalGradient(
colors = listOf(
Color.Black.copy(alpha = 0.3f), // Transparent at the bottom
Color.Black.copy(alpha = 0.9f), // 50% opacity at the top
)
)
),
contentAlignment = Alignment.BottomCenter
.padding(start = 10.dp, end = 10.dp, top = 10.dp)
.fillMaxSize()
) {
Image(
painter = painterResource(
id = character.imageResourceId
),
contentDescription = null,
modifier = Modifier
.width(130.dp)
.height(180.dp)
.border(
BorderStroke(2.dp, MaterialTheme.colorScheme.onSurface)
),
contentScale = ContentScale.Crop
)
Text(
modifier = Modifier.fillMaxWidth(),
text = stringResource(id = character.stringResourceId),
style = MaterialTheme.typography.headlineLarge.copy(
color = Color.White,
shadow = Shadow(
color = Color.Black,
offset = Offset(2f, 3f),
blurRadius = 6f
items(characterList) { thisCharacter ->
Box(
modifier = Modifier
.height(240.dp)
.fillMaxWidth()
.padding(bottom = 20.dp, top = 20.dp)
) {
CharacterCard3(
{ onButtonCard(thisCharacter) },
modifier = Modifier
.padding(
top = 30.dp,
start = dimensionResource(R.dimen.padding_medium),
end = dimensionResource(R.dimen.padding_medium),
),
)
),
color = Color.White,
textAlign = TextAlign.Center,
)
}
Box(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
contentAlignment = Alignment.BottomCenter
) {
Image(
painter = painterResource(
id = thisCharacter.imageResourceId
),
contentDescription =
null,
modifier = Modifier
.fillMaxHeight()
.padding(start = 50.dp, bottom = 10.dp,top = 10.dp)
.width(150.dp),
contentScale = ContentScale.Fit
)
Box(
modifier = Modifier
.fillMaxSize()
.padding(bottom = 20.dp, start = 20.dp, end = 20.dp),
contentAlignment = Alignment.BottomStart
) {
Text(
text = stringResource(id = thisCharacter.stringResourceId),
style = MaterialTheme.typography.titleLarge.copy(
fontSize = 30.sp,
color = Color.Black,
shadow = Shadow(
color = Color.White,
offset = Offset(1f, 1f),
blurRadius = 1f
)
)
)
}

}
}
}
}
}

// LazyVerticalGrid(
// columns = GridCells.Fixed(2),
// verticalArrangement = Arrangement.spacedBy(10.dp),
// modifier = Modifier
// .padding(start = 10.dp, end = 10.dp)
// .fillMaxSize()
// ) {
// items(characterList) { thisCharacter ->
// CharacterCard(
// character = thisCharacter,
// {onButtonCard(thisCharacter)},
// modifier = modifier
// .padding(
// top = dimensionResource(R.dimen.padding_medium),
// start = dimensionResource(R.dimen.padding_medium),
// end = dimensionResource(R.dimen.padding_medium),
// ),
// )
// }
// }

@Composable
fun CharacterCard(character: Character, onButtonCard: () -> Unit, modifier: Modifier) {
fun CharacterCard3(onButtonCard: () -> Unit, modifier: Modifier) {
Card(
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.inverseOnSurface,
Expand All @@ -169,53 +119,31 @@ fun CharacterCard(character: Character, onButtonCard: () -> Unit, modifier: Modi
),
modifier = modifier
.clip(MaterialTheme.shapes.medium)
.wrapContentSize()
.padding(bottom = 5.dp)
.height(160.dp)
.fillMaxWidth()
.shadow(elevation = 2.dp, shape = RoundedCornerShape(16.dp)),

onClick = onButtonCard,
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(character.imageResourceId),
contentDescription = null, //no need
modifier = Modifier
.size(width = 140.dp, height = 165.dp),
contentScale = ContentScale.Crop
)
HorizontalDivider(
modifier = Modifier
.size(width = 140.dp, height = 1.dp) //fill the max height
.width(1.dp),
color = Color.DarkGray
)
Spacer(modifier = Modifier.height(3.dp))
Text(
text = LocalContext.current.getString(character.stringResourceId),
style = MaterialTheme.typography.titleMedium,
)
Spacer(modifier = Modifier.height(4.dp))
}
}
}



@Preview(showBackground = true)
@Composable
fun GreetingPreview2() {
CharacterSheetTheme {
ChooseCharacter(
{ Character(0, 0, 0) },
listOf(
Character(R.string.neuvi, R.drawable.neuvi, R.string.neuvi),
Character(R.string.name1, R.drawable.artist1, R.string.name1),
Character(R.string.name1, R.drawable.artist1, R.string.name1),
Character(R.string.name1, R.drawable.artist1, R.string.name1),
Character(R.string.name1, R.drawable.artist1, R.string.name1),
Character(R.string.name1, R.drawable.artist1, R.string.name1),
Character(R.string.name1, R.drawable.artist1, R.string.name1),
Character(R.string.app_name, R.drawable.sage, R.string.neuvi),
Character(R.string.name1, R.drawable.sage, R.string.name1),
Character(R.string.name1, R.drawable.sage, R.string.name1),
Character(R.string.name1, R.drawable.sage, R.string.name1),
Character(R.string.name1, R.drawable.sage, R.string.name1),
Character(R.string.name1, R.drawable.sage, R.string.name1),
Character(R.string.name1, R.drawable.sage, R.string.name1),
Character(R.string.name1, R.drawable.artist1, R.string.name1),
)
)
Expand Down

0 comments on commit 7b7df97

Please sign in to comment.