Compose World

BottomAppBar 모서리 둥글게 BottomAppBar서 모서리를 둥글게 만들기 위해서는 Modifier.clip을 사용할 수 있다. 아래 코드처럼 RoundedCornerShape(topStart = 40.dp, tepEnd = 40.dp)를 적용하여 위쪽의 왼쪽과 오른쪽 모서리를 둥글게 만들 수 있다.  Scaffold ( bottomBar = { BottomAppBar ( modifier = Modifier . background (Color. Transparent ) . clip ( RoundedCornerShape ( topStart = 40 . dp , topEnd = 40 . dp )), containerColor = Color. Green ) { Row ( modifier = Modifier. fillMaxWidth (), horizontalArrangement = Arrangement. SpaceEvenly ) { IconButton ( onClick = {} ) { Icon (Icons.Filled. Add , contentDescription = "add" ) } IconButton ( onClick = {} ) { Icon (Icons.Filled. Add , contentDescription = "add" ) } IconButton ( onClick = {} ) { Icon (Icons.Filled. Add , contentDescription = "add" ) } } } } ) { innerPadding -> Column ( modifier = Modifier . padding (innerP...

버튼 클릭 시 Toast message를 보여주기 위해서 `val context=LocalContext.current` 변수 초기화 후 사용 val context = LocalContext . current Column ( modifier = Modifier . padding (innerPadding) . fillMaxSize (), verticalArrangement = Arrangement. Center , horizontalAlignment = Alignment. CenterHorizontally ) { Button ( onClick = { Toast.makeText(context, "Message" , Toast. LENGTH_SHORT ).show() } ) { Text ( "Alarm" ) } } 그림1. 실행화면

BasicTextField  이전에 기본적인 구현 방법인 TextField와 OutlinedTextField를 구현 하는 방법을 알아봤었다. TextField는 사용자에게 선택지가 정해지지 않은 입력을 받기 위해 사용할 수 있는 컴포넌트이다. 그림1. OutlinedTextField 그만큼 자주 사용되어 미리 정의된 기본적인 TextField 스타일이 아닌 커스텀이 필요한 경우 가 있다. 그런 경우에 BasicTextField를 사용하여 구현할 수 있다. BasicTextField 구현 TextField와 OutlinedTextField를 구현해 봤다면 BasicTextField 또한 쉽게 구현할 수 있다. 왜냐하면 TextField와 OutlinedTextField도 결국에는 BasicTextField 사용하여 구현되기 때문 인데 결국 BasicTextField에서 몇 개의 스타일을 고정하여 정의한 것이라 할 수 있다. 이런 점들을 보면 BasicTextField를 직접 사용하여 구현한다면 더욱 다양한 스타일로 TextField의 디자인이 가능해진다. 단, 이는 반대로 말하면 기존의 정의되어 있는 것이 없기 때문에 일일이 다 스타일을 지정해주어야만 한다 는 의미이다. 그렇기 때문에 보통은 TextField를 활용하는 것이 좋다. 그림2. TextField Custom BasicTextField ( value = text, onValueChange = setOnTextChange, modifier = Modifier . background (Color. LightGray , shape = RoundedCornerShape ( 20 )) . size ( width = 250 . dp , height = 50 . dp ) . border ( width = 1 . dp , color = Color. Gray , shape = RoundedCornerShape ( 20...