Nutri Capture - ContentWithSwipeableBottomSheet() 도입

#1 개요

개발해 둔 커스텀 컴포넌트를 본 프로젝트(Nutri Capture)에서 사용했다.

 

#2 개선한 포인트

ContentWithSwipeableBottomSheet()

위의 커스텀 Scaffold를 Nutri Capture 프로젝트에 적용했다.

 

#3 코드 스니펫

#3-1 class MainActivity

...

...
class MainActivity : ComponentActivity() {

    ...

    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        ...
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)
        setContent {
            ...
        }
    }
}

BottomSheet의 매끄러운 동작을 위해, ContentWithSwipeableBottomSheet()는 window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING) 없이 동작하지 않도록 설정해 두었다. 따라서 선언해 둔다.

 

#3-2 fun NutrientScreen()

...

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NutrientScreen() {
    val sheetState = rememberContentWithSwipeableBottomSheetState(
        anchoredDraggableState = AnchoredDraggableState(SheetValue.PartiallyExpanded)
    )

    var sheetExpandedAnchorOffset by remember { mutableStateOf(0.dp) }
    val statusBarHeightDp = with(LocalDensity.current) {
        WindowInsets.statusBars.getTop(this).toDp()
    }
    LaunchedEffect(statusBarHeightDp) {
        sheetExpandedAnchorOffset = statusBarHeightDp
    }

    ContentWithSwipeableBottomSheet(
        sheetContent = {
            NutrientBottomSheet()
        },
        modifier = Modifier
            .fillMaxSize()
            .background(BottomAppBarDefaults.containerColor),
        sheetState = sheetState,
        sheetExpandedAnchorOffset = sheetExpandedAnchorOffset,
        sheetPartiallyExpandedHeight = storedImeMaxHeight(),
        sheetSwipeEnabled = true,
        hasContentNavigationBarPadding = true
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            NutrientHistory()
            NutrientChatBar()
        }
    }
}

이 코드를 참조했다.

 

#3-3 object SystemPreferences

// package com.example.datastore

import android.content.Context
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.datastore.core.DataStore
import androidx.datastore.preferences.core.Preferences
import androidx.datastore.preferences.core.edit
import androidx.datastore.preferences.core.intPreferencesKey
import androidx.datastore.preferences.preferencesDataStore
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.map
import kotlin.math.roundToInt

private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = "system")

object SystemPreferences {
    val IME_MAX_HEIGHT_VALUE_KEY = intPreferencesKey("ime_max_height_dp")
    val DEFAULT_IME_MAX_HEIGHT_VALUE = 250.dp.value.roundToInt()

    private lateinit var appContext: Context

    fun init(context: Context) {
        appContext = context
    }

    fun getImeMaxHeight(): Flow<Dp> {
        return appContext.dataStore.data.map { preferences ->
            (preferences[IME_MAX_HEIGHT_VALUE_KEY] ?: DEFAULT_IME_MAX_HEIGHT_VALUE).dp
        }
    }

    suspend fun setImeMaxHeight(imeHeight: Dp) {
        appContext.dataStore.edit { preferences ->
            preferences[IME_MAX_HEIGHT_VALUE_KEY] = imeHeight.value.toInt()
        }
    }
}

Bottom Sheet가 끝까지 올라온 높이를 쓰거나 읽는 클래스다. ":datastore"라는 모듈을 새로 만들고 그 안에 이 클래스를 넣었다.

 

#3-4 class Application (@HiltAndroidApp)

// package com.example.nutri_capture_new

import android.app.Application
import com.example.datastore.SystemPreferences
import dagger.hilt.android.HiltAndroidApp

@HiltAndroidApp
class NcApplication : Application() {

    override fun onCreate() {
        super.onCreate()
        SystemPreferences.init(context = this)
    }
}

SystemPreferences가 UI 단에 null 값을 전달하는 걸 막기 위해, Application 클래스에서 초기화 작업을 해준다.

 

#4 소스 코드

#4-1 이 게시글 시점의 Commit

GitHub - Kanmanemone/nutri-capture-new

 

#4-2 본 프로젝트의 가장 최신 Commit

GitHub - Kanmanemone/nutri-capture-new