괴발개발 일기

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..

이전 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(..

컴포즈에서 이미지를 넣는 방법에는 여러 가지가 있다. painter, imageVector, imageBitmap 그리고 인터넷에서 로드할 땐 AsyncImage(coil), GlideImage(glide) Ⅰ. Image Image는 compose 의 Image.kt를 들어가보면 어떤 값을 쓸 수 있는지도 자세히 알 수 있다. (설명은 제외했다) fun Image( bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = Default..