[2022.07.02 ~ 03] 코딩 일기 : 48 ~ 49일 차

48 ~ 49일 차 코딩 일기입니다.

우선 포트폴리오 사이트 제작 관련입니다.

사이트 관련 외관 작업과 데이터 연결 작업까지 해서 우선 따라서 만들었습니다.

마지막으로 서버에 올리면 끝이긴 한데 제 스타일에 맞게 수정과 노션에 포트폴리오 올리는 작업이 추가적으로 필요하기 때문에

차차 진행을 해나갈 예정입니다.

그 다음은 LOLketing관련입니다.

해당 화면을 Compose로 구현을 해보려고 하는데 아직 하나하나 다 모르는 것들 투성이더라고요

1. 최상단 타이틀 영역의 배경이 처음에는 투명이었다가 검은색으로 변경해야 하는데 어떻게 작업이 가능한가?

2. Tab영역은 어떻게 구현해야 하는가?

3. 1번이랑 비슷한데 tab 영역이 스크롤 하면 타이틀 아래에 고정시켜야 하는데 어떻게 해야 하는가?

4. Grid는 어떻게 적용시켜야 하는가?

쓰고 보니 UI 대부분이 다 모르는 부분이군요 ㅠ
xml이면 바로 진행이 가능한데 Compose를 학습 예정이기에 하나하나 또 공부를 해봐야 했습니다.

 

우선 가장 가볍게 Grid는 학습을 진행하였습니다.

@Composable
fun GridTest() {
    val list = (1..10).map { "${it}번째 아이템" }
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 150.dp),
        modifier = Modifier.fillMaxWidth()
    ) {
        items(list) {
            GridTestItem(it)
        }
    }
}

@Composable
fun GridTestItem(item: String) {
    val red = Random.nextInt(256)
    val green = Random.nextInt(256)
    val blue = Random.nextInt(256)
    val color = Color(red, green, blue)
    Box(modifier = Modifier
        .size(150.dp)
        .background(color)
    ) {
        Text(text = item, color = White)
    }
}

자세한 속성에 대해서도 알아봐야 하긴 하지만 우선 이걸 가지고서 저 UI 표시 정도는 가능할 듯합니다.

그다음은 TabLayout입니다.

Tab을 그리기 위해서는 TabRow 또는 ScrollableTabRow가 있는데 저 UI에서 필요한 건 ScrollableTabRow였습니다.

그런데 Indicator 영역이 자동 설정으로 되어있는 영역은 너무 커서 크기를 조정하고 싶었습니다.

속성 값으로는 바꿀 수는 방법을 못 찾았고 다른 분께서 올려주신 코드를 통해서 결과를 얻을 수 있었습니다.

https://medium.com/@sukhdip_sandhu/jetpack-compose-scrollabletabrow-indicator-matches-width-of-text-e79c0e5826fe

Jetpack Compose ScrollableTabRow Indicator Matches Width of Text

이 글에서 정보를 얻었습니다~

일단 viewpager랑 tab 연결하는 것도 보긴 했는데

아직은 정확하게 이해하려면 좀 더 봐야겠네요

Tab과 ViewPager 같은 경우는 기존 방식 좀 더 쉬운 것 같은 느낌이네요