[Team 18-Android] 메인화면 구성하기

[taewooyo]

안녕하세요 앨런😀
이번 미션을 진행하게 된, @bn-tw2020 @shncder 입니다. 새롭게 jetpack compose로 레이아웃을 진행했습니다. 따끔한 리뷰에 대해서 흔쾌히 받아드려 수정해보도록 하겠습니다.

===========================================================================================

📑 구현

• Jetpack Compose 을 이용해 레이아웃 구현

• BottomBar 구현

• TopBar 구현

  • TopBar 상태(CLOSED, OPEN)을 활용해 DefaultAppBar, SearchAppBar 분리해서 구현
  • DefaultAppBar는 메인 화면 보여주기
  • SearchAppBar는 검색 리스트 현황 보여주기

• 여행지 리스트 구현

  • Lazy Row 내에서 Column으로 2줄로 구현

• 메인 이미지 구현

  • Coil 라이브러리를 통해 구현
  • image state에 따라 Loading, Error, Success 처리

• 숙소 리스트 구현

  • Lazy Row을 통해 Image, Text 출력
  • Image는 Coil 라이브러리 이용

메인 화면	검색 리스트 화면

🤔 질문사항

• Bottom Navigation을 jetpack Compose을 통해 구현했습니다. xml을 통해서 디자인도 혼용해보고 싶은데 Composable 함수로 이동이 되서 xml을 못쓰게 되던데 어쩔 수 없는 부분인지 궁금합니다.

[sabgilhun]

안녕하세요 bn-tw2020 shncder, 3주간 잘 부탁드립니다. 저도 도움이 될 수 있게 노력하겠습니다.

아쉽게도 저도 Compose를 많이 써보진 못해서 😢

제가 남긴 코멘트를 하나의 의견이라고 보시고 조금 가볍게 봐주세요 :)

질문답변

남겨주신 질문은 조금 찾아보니 AndroidView Composable이란게 있네요.

https://developer.android.com/reference/kotlin/androidx/compose/ui/viewinterop/package-summary?hl=ko#top-level-functions

위 내용이 도움이 되었길 빕니다.

추가

Compose를 사용한다면 공통으로 사용될 컴포넌트들을 정리하여 common/components를 빼내고 여러 화면에서 재사용할 수 있게 작업을 해보시는것도 좋은 경험이 될것 같아요.

ImageView같이 여러 곳에서 사용될 UI를 컴포넌트화 시켜보면 좋을것 같습니다!

[sabgilhun]

https://kotlinlang.org/docs/opt-in-requirements.html#module-wide-opt-in

공부를 위해 하는 프로젝트라, 베타 API 사용에 대한 warning 을 무시해도 될것 같습니다.

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
    kotlinOptions.freeCompilerArgs += ["-Xopt-in=coil.annotation.ExperimentalCoilApi"]
} 

이렇게 추가하면, ExperimentalCoilApi 어노테이션 붙이지 않아도 beta api 사용처에 warning 이 뜨지 않습니다.

[taewooyo]

네 적용해보도록하겠습니다.

[sabgilhun]

popUpTo을 startDestinationRoute 대상으로 한 이유가 궁금합니다.

[taewooyo]

학습할 때 많은 분들이 저런식으로 이용해서 적용해봤습니다.
popUpTo는 BackStack에서 어디까지 이동할 것인지 결정하는 속성으로 알고 있습니다. 알맞은 설정인지 확인 후, 프로젝트에 적용해보겠습니다.

[sabgilhun]

MainAppBar가 '검색탭'에 특화되어 있는 AppBar로 보이네요.

계층을

MainScreen
ㄴ MainAppBar

MianScreen
ㄴ SearchScreen
ㄴㄴ MainAppBar

이런식으로 SearchScreen 안쪽으로 넣는건 어떨까요? 이렇게 하면 다른탭에선 앱바가 노출되지 않겠지만, MainAppBar 가 탭에 따라 동작을 달리하는 것도 그리 좋은 구조는 아닌것 같아서요.

혹시 다른 의견이 있다면 편히 말씀해주세요~

[taewooyo]

좋은 것 같아요. 적용해보도록 하겠습니다.

[sabgilhun]

외부에서 호출하지 않고, TopBar 내부에서 코드 모듈화를 위한 Composable 함수는 private로 숨기는 것은 어떨까요?

[sabgilhun]

Image Loading, Error 처리가 겹치고 있는것 같은데요. 아래처럼 공통화를 해보면 어떨까요?

@Composable
fun HandleImageResult(
    painterState: ImagePainter.State,
    onEmpty: @Composable (() -> Unit)? = null,
    onSuccess: @Composable (() -> Unit)? = null,
    onError: @Composable () -> Unit = { DefaultError() },
    onLoading: @Composable () -> Unit = { DefaultLoading() }
) {
    when (painterState) {
        is ImagePainter.State.Empty -> onEmpty?.invoke()
        is ImagePainter.State.Loading -> onLoading()
        is ImagePainter.State.Success -> onSuccess?.invoke()
        is ImagePainter.State.Error -> onError()
    }
}

@Composable
private fun DefaultLoading() {
    CircularProgressIndicator()
}

@Composable
private fun DefaultError() {
    Image(
        painter = painterResource(id = R.drawable.ic_error),
        contentDescription = "Error Image",
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.FillBounds
    )
}

[sabgilhun]

여기도 travelLocations[index + 1] 들어가야 할것 같습니다~

[sabgilhun]

Item을 만드는 로직을 함수로 빼내면, 가독성이 좋아질것 같아요!

LazyRow(state = scrollState) {
    itemsIndexed(travelLocations) { index, location ->
        MakeColumn(...)
    }
}

@Composable
private fun MakeColumn(...) {
    Column(modifier = Modifier.padding(end = 16.dp)) {
        if (index % 2 == 0) {
            MakeItem(location)
            if (index + 1 < travelLocations.size) {
                MakeItem(travelLocations[index + 1])
            }
        }
    }
}

@Composable
private fun MakeItem(...) {
    Row {
        ...
    }
}

[taewooyo]

적용하면 보다 개발자입장에서도 가독성이 좋은 것 같습니다.