괴발개발 일기

BottomAppBar도 TopAppBar와 동일하게 기본적으로 AppBar를 구현하여 만든다. @Composable fun BottomAppBar( modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), cutoutShape: Shape? = null, elevation: Dp = AppBarDefaults.BottomAppBarElevation, contentPadding: PaddingValues = AppBarDefaults.ContentPadding, content: @Composable..

TopAppBar는 현재 화면과 관련된 정보와 작업이 표시되는 것이며, 제목, 탐색 아이콘 및 작업에 대한 슬롯(Slot API)이 있다. @Composable fun TopAppBar( title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable (() -> Unit)? = null, actions: @Composable RowScope.() -> Unit = {}, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = ..

Text는 컴포즈를 시작하면 가장 처음으로 접하지 않을까 싶다! (text를 작성한 줄 알고 있다가 이제서야 알게되어 작성하게 되었다😅) 그럼 Text에 대해 하나씩 알아가보자! @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecorati..

xml에 EditText가 있다면 compose에는 TextField가 있다! 아래와 같이 간단하게 사용할 수 있다. var text by remember { mutableStateOf("안녕하세요!") } TextField(value = text, onValueChange = { text = it}) 그렇다면 TextField에는 어떤 값들이 있을지 자세히 알아보자! @Composable fun TextField( value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalText..

Checkbox.kt에 들어가면 Checkbox와 TristateCheckbox가 있다. @Composable fun Checkbox( checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, colors: CheckboxColors = CheckboxDefaults.colors() ) { TriStateCheckbox( state = ToggleableState(checked), onClick = if (o..

이제 서버를 선택해야할 시간! 서버를 2가지 고려했었다. AWS vs Firebase AWS가 1년 무료이기도 하고 한 번 붙여볼까 했다가 멈칫하게 되었다. 이 정도 프로젝트에 AWS가 필요할까...? 1년 이상 하게 되면 돈을 내야하는데 가격을 비교한 블로그를 봤는데 ... 그냥 Firebase를 하기로 했다 😁 이제 2번째 고민 Realtime Database vs Cloud Firestore 그래서 Firebase에서 제공하는 데이터 비교를 체크해보았는데 맞게 선택한건지 모르겠지만 우선 머리속에서 의식의 흐름에 따라 선택한 결과가 Cloud Firestore로 나와서 이걸로 사용해 보기로 했다 ..! 이렇게 선택하고 재료들 리스트를 가져와야하니 오픈 API가 없을까 하고 뒤적이던 중 식품안전나라가 ..

이전 scaffold에서 설명하지 않았던 Snackbar에 대해 알아보자! Compose에서 Snackbar는 SnackbarHost를 통해 쉽게 사용할 수 있다. (SnackbarHost를 통하지 않으면 Snackbar의 상태와 꺼지는 시간을 직접 구현해야 할 텐데 정말 필요할 경우가 아니면 굳이..?) 이 SnacbarHost는 Scaffold에서 제공하므로 Scaffold를 사용하면 쉽게 사용할 수 있다. 그러나 Scaffold를 사용하지 않을 수도 있기 때문에 Scaffold에서 사용했을 때와 아닐 때를 나눠서 설명을 하겠다. 우선 SnackbarHost에 대해 알아보자! [Scaffold]에서 [Snackbar]를 사용하여 항목을 적절히 표시, 숨기기 및 취소할 호스트 기본 매개 변수가 포함된 ..

Scaffold란? 다양한 구성요소와 기타 화면 요소를 위한 슬롯을 제공하는 것으로 Material Design에 따라 빠르게 조립할 수 있도록 제공하는 것이다. TopBar, BottomBar, FloatingActionButton, Snackbar 등을 매개변수로 사용할 수 있다. @Composable fun Scaffold( modifier: Modifier = Modifier, scaffoldState: ScaffoldState = rememberScaffoldState(), topBar: @Composable () -> Unit = {}, bottomBar: @Composable () -> Unit = {}, snackbarHost: @Composable (SnackbarHostState) ->..

기본적인 사용법에 이어 이번엔 chain과 barrier에 대해 알아보자! 1. Chain chain에 대한 자세한 설명은 여기를 클릭 constraintLayout의 기능 중 하나로 chain 기능이 있다. 이것을 compose로 구현해 보자! ConstraintLayout(Modifier.size(60.dp)) { val (box1, box2, box3) = createRefs() Box( modifier = Modifier .size(10.dp) .background(Color.Red) .constrainAs(box1) { top.linkTo(parent.top) } ) Box( modifier = Modifier .size(10.dp) .background(Color.Yellow) .constra..

xml을 사용해서 화면을 만들 때 가장 많이 사용하던 것이 LinearLayout, ConstraintLayout 이였다. LinearLayout은 Row, Column 을 사용하면 되지만 ConstraintLayout 은? 아래와 같이 추가하면 사용할 수 있다! implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1" 최신 버전 확인 시작하기 전에 알아야 할게 있다. ConstraintLayout은 상대 위치에 따라 위치와 크기를 지정하기 때문에 xml에서는 View의 id 값을 이용해 해당 뷰의 위치를 지정해서 사용했는데 id값이 없는 compose에서는 어떻게 처리할까? 바로 createRefs()와 createRefFor(..