Skip to content

Commit

Permalink
Merge pull request #74 from Nexters/bugfix/home
Browse files Browse the repository at this point in the history 
[FIX][#6] Home 화면 UI 수정
  • Loading branch information
@josushell
josushell authored Feb 23, 2024
2 parents 9fca576 + 485d018 commit 91a9a01
Showing 1 changed file with 94 additions and 76 deletions.
170 changes: 94 additions & 76 deletions feature/home/src/main/kotlin/com/nexters/ilab/android/feature/home/HomeScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
Expand All @@ -28,9 +27,11 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
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.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
Expand Down Expand Up @@ -78,20 +79,11 @@ internal fun HomeScreen(
horizontalAlignment = Alignment.CenterHorizontally,
) {
HomeTopAppBar(onSettingClick)
Box(modifier = Modifier.fillMaxSize()) {
BackgroundImage(
resId = R.drawable.bg_home_screen,
contentDescription = "Background Image for Home Screen",
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
)
HomeContent(
styleImageList = uiState.styleImageList,
profileImageList = uiState.profileImageList,
onGenerateImgBtnClick = {},
)
}
HomeContent(
styleImageList = uiState.styleImageList,
profileImageList = uiState.profileImageList,
onGenerateImgBtnClick = {},
)
}
}

Expand All @@ -116,10 +108,12 @@ internal fun HomeContent(
profileImageList: List<ProfileImage>,
onGenerateImgBtnClick: () -> Unit,
) {
val configuration = LocalConfiguration.current
val imgSize = (configuration.screenWidthDp - 52)

LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(count = 2),
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(start = 20.dp, end = 20.dp, bottom = 24.dp),
horizontalArrangement = Arrangement.spacedBy(space = 12.dp),
verticalItemSpacing = 12.dp,
) {
Expand All @@ -131,12 +125,21 @@ internal fun HomeContent(
}

itemsIndexed(profileImageList) { index, item ->
val imageHeight = if (index % 6 == 1 || index % 6 == 3) 336 else 162
val imageRatio = if (index % 6 == 1 || index % 6 == 3) imgSize.dp else (imgSize / 2 - 6).dp
val startDp = if (index % 6 == 0 || index % 6 == 2 || index % 6 == 3) 20.dp else 0.dp
val endDp = if (index % 6 == 0 || index % 6 == 2 || index % 6 == 3) 0.dp else 20.dp

KeywordSampleImageItem(
profileImage = item,
imageHeight = imageHeight,
imageRatio = imageRatio,
startDp = startDp,
endDp = endDp,
)
}

item(span = StaggeredGridItemSpan.FullLine) {
Spacer(modifier = Modifier.height(24.dp))
}
}
}

Expand All @@ -149,77 +152,92 @@ internal fun HomeKeywordView(
val pageCount = styleImageList.size
val pagerState = rememberPagerState(pageCount = { pageCount })

Column(modifier = Modifier.fillMaxSize()) {
Spacer(modifier = Modifier.height(32.dp))
Text(
text = stringResource(id = R.string.home_style),
color = Blue500,
style = Subtitle2,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(8.dp))
HorizontalPager(state = pagerState) { page ->
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "#" + styleImageList[page].profileKeyword,
textAlign = TextAlign.Center,
style = Title1,
)
Spacer(modifier = Modifier.height(20.dp))
NetworkImage(
imageUrl = styleImageList[page].profileImage,
contentDescription = "Style Image Example ${page + 1}",
modifier = Modifier
.clip(RoundedCornerShape(topStart = 999.dp, topEnd = 999.dp))
.size(width = 200.dp, height = 266.dp),
)
}
}
Spacer(modifier = Modifier.height(20.dp))
PagerIndicator(
pageCount = pagerState.pageCount,
currentPage = pagerState.currentPage,
targetPage = pagerState.currentPage,
currentPageOffsetFraction = pagerState.currentPageOffsetFraction,
)
Spacer(modifier = Modifier.height(32.dp))
ILabButton(
onClick = onGenerateImgBtnClick,
Box(modifier = Modifier.fillMaxSize()) {
BackgroundImage(
resId = R.drawable.bg_home_screen,
contentDescription = "Background Image for Home Screen",
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
containerColor = Blue600,
contentColor = Color.White,
text = {
Text(
text = stringResource(id = R.string.home_generate_img_with_this_keyword),
style = Subtitle1,
)
},
)
Spacer(modifier = Modifier.height(40.dp))
Text(
text = stringResource(id = R.string.home_profile),
style = Title2,
color = Color.Black,
.wrapContentHeight(),
)

Column(modifier = Modifier.fillMaxSize()) {
Spacer(modifier = Modifier.height(32.dp))
Text(
text = stringResource(id = R.string.home_style),
color = Blue500,
style = Subtitle2,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(8.dp))
HorizontalPager(state = pagerState) { page ->
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "#" + styleImageList[page].profileKeyword,
textAlign = TextAlign.Center,
style = Title1,
)
Spacer(modifier = Modifier.height(20.dp))
NetworkImage(
imageUrl = styleImageList[page].profileImage,
contentDescription = "Style Image Example ${page + 1}",
modifier = Modifier
.clip(RoundedCornerShape(topStart = 999.dp, topEnd = 999.dp))
.size(width = 200.dp, height = 266.dp),
)
}
}
Spacer(modifier = Modifier.height(20.dp))
PagerIndicator(
pageCount = pagerState.pageCount,
currentPage = pagerState.currentPage,
targetPage = pagerState.currentPage,
currentPageOffsetFraction = pagerState.currentPageOffsetFraction,
)
Spacer(modifier = Modifier.height(32.dp))
ILabButton(
onClick = onGenerateImgBtnClick,
modifier = Modifier
.fillMaxWidth()
.padding(start = 20.dp, end = 20.dp)
.height(48.dp),
containerColor = Blue600,
contentColor = Color.White,
text = {
Text(
text = stringResource(id = R.string.home_generate_img_with_this_keyword),
style = Subtitle1,
)
},
)
Spacer(modifier = Modifier.height(40.dp))
Text(
text = stringResource(id = R.string.home_profile),
style = Title2,
color = Color.Black,
modifier = Modifier.padding(start = 20.dp),
)
}
}
}

@Composable
internal fun KeywordSampleImageItem(
profileImage: ProfileImage,
imageHeight: Int,
imageRatio: Dp,
startDp: Dp,
endDp: Dp,
) {
Box(
modifier = Modifier
.width(162.dp)
.height(height = imageHeight.dp)
.height(imageRatio)
.padding(start = startDp, end = endDp)
.clip(RoundedCornerShape(12.dp)),

contentAlignment = Alignment.Center,
) {
NetworkImage(
Expand Down

0 comments on commit 91a9a01

Please sign in to comment.