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

DatePickerDialog DatePickerDialog = DatePicker + Dialog 즉, 날짜를 선택할 수 있는 DatePicker를 Dialog 형태로 나타내는 컴포넌트이다. 그림1. DatePicker 사용자에게 특정 날짜를 입력 받기 위해서 사용자가 간단히 선택할 수 있는 UI를 제공하며 Dialog 형태로 나타나므로 공간을 낭비하지 않아서 날짜를 입력 받고자 할 때 유용하게 사용 할 수 있다. DatePickerDialog 구현 DatePickerDialog 부분을 살펴보기 전에 우선 UI 부분을 살펴보면 date : 선택한 날짜 showDatePicker : DatePickerDialog 보이기/숨기기 여부 판별 그림2. 버튼 클릭 시 Dialog Open var date by remember { mutableStateOf ( "Open date picker dialog" ) } var showDatePicker by remember { mutableStateOf ( false ) } if (showDatePicker) { MyDatePickerDialog ( onDateSelected = { date = it } , onDismiss = { showDatePicker = false } ) } Box ( modifier = Modifier. padding (innerPadding). fillMaxSize (), contentAlignment = Alignment. Center ) { Button ( onClick = { showDatePicker = true } ) { Text ( text = date) } } 버튼을 클릭하면 showDatePicker 변수를 true로 초기화하고 그에 따라서 정의한 MyDatePickerDialog 컴포저블 함수를 통해 DatePickerDialog가 나타나게 된다. MyDatePickerDialog 다...

TextField TextField는 문자나 숫자를 사용자가 키보드를 통하여 직접 작성하도록 하여 입력 받을 수 있는 컴포넌트이다. 자유롭게 작성이 가능하지만 키보드의 입력 타입을 제한하여 의도 된 형태로만 입력 할 수 있도록 제한을 할 수도 있다. 그림1. 숫자 입력 선택지가 제한된 경우에는 라디오 버튼이나 체크 박스를 사용할 수 있지만 그렇지 않은 경우도 많기 때문에 TextField가 많이 사용된다. TextField 구현 TextField를 구현하기에 앞서 우선 크게 나누면 TextField는 기본적인 TextField와 테두리가 있는 OutlinedTextField 2가지 가 있다. 이 두 TextField는 디자인 차이일 뿐 동일한 파라미터를 사용하고 구현하기 때문에 사용하는 화면 레이아웃에 맞는 것을 사용하면 된다. TextField 기본적인 TextField로 문자나 숫자를 입력 받을 수 있다. colors 파라미터에서 TextFieldDefaults.colors로 TextField의 배경색, 지시자 색, 포커스 여부에 따른 색 등을 지정 할 수 있는데 해당 예시에서는 unfocusedContainerColor를 Transparent로 지정하여서 TextField의 포커스가 없을 때는 색이 없지만, 선택하면 ContainerColor가 나타나는 것을 그림 1에서 볼 수 있다. 그림2. TextField TextField ( value = text, onValueChange = { setOnTextChange( it ) } , colors = TextFieldDefaults. colors ( // focusedContainerColor = Color.Transparent, unfocusedContainerColor = Color. Transparent , focusedIndicatorColor = Color. Green , unfocus...

Checkbox 체크 박스는 라디오 버튼이나 메뉴 박스와 같이 사용자에게 옵션을 선택할 수 있도록 제시하는 UI 이다. 체크 박스만의 특징을 말하면, 제시한 하나의 물음에 사용자가 여러가지 답을 선택할 수 있도록 하는 것 이다. 만약 좋아하는 음식을 묻는다면 그에 대한 대답이 여럿일 수 있기 때문에 체크 박스를 사용하면 된다. 그림1. Checkbox 특히 체크 박스는 라디오 버튼과 유사한데 라디오 버튼은 하나의 옵션만 선택이 가능하므로 하나의 답 만을 얻어야 한다면 라디오 버튼을 다수의 답을 얻어도 된다면 체크 박스 를 구분하여 사용하면 된다. Checkbox 구현 해당 예시에서는 기본적인 체크 박스 뿐만 아니라 체크 박스를 사용할 때 흔히 많이 사용되는 전체 체크 기능까지 알아보도록 하겠다. 먼저 사용할 변수들을 살펴보면 val sample = listOf ( "Meat" , "Bread" , "Snack" , "Drink" ) val checkList = remember { mutableStateListOf ( false , false , false , false ) } val allChecked = when { checkList. all { it } -> ToggleableState. On checkList. none { it } -> ToggleableState. Off else -> ToggleableState. Indeterminate } sample : Checkbox 옵션들 checkList : Checkbox 각 옵션 체크 여부 allChecked : 전체 선택의 상태 값 여기서 allChecked 보면 checkList 값에 따라 즉, 모든 체크 박스들의 체크 여부에 따라서 값이 초기화되어 전체 체크의 대한 상태 값 을 갖게 된다. 다음으로 체크 박스 구현한 부분을 살펴보면 sample 리스트를 forEachIndexed문으로 Che...

라디오 버튼 라디오 버튼은 사용자가 여러 옵션 중 하나를 선택할 수 있게 하는 UI 중 하나 이다. 옵션들이 직관적으로 나타나기 때문에 사용자가 옵션을 간편하게 선택 가능 하지만 선택할 옵션이 많은 경우에는 그만큼 공간을 많이 차지하기 때문에 적합하지 않을 수 있다. 그림1. Radio Button 라디오 버튼 구현 먼저 변수 부분을 살펴보면  items는 라디오 버튼의 항목들이며 selectedItem은 라디오 버튼 선택 시 옵션을 저장할 변수이다. 다음으로 RadioButton 부분을 보면 items를 forEach문을 사용하여 각 Row를 추가해주었다. 여기서 텍스트를 나타내기 위해 Text 컴포저블이 아닌 ClickableText 컴포저블을 사용하였는데 이는 텍스트를 클릭하였을 때도 옵션이 선택 되도록 하기 위함이다. @Composable fun Main (innerPadding: PaddingValues) { val items = listOf ( "Option 1" , "Option 2" , "Option 3" ) var selectedItem by remember { mutableStateOf ( "Option" ) } Column ( modifier = Modifier . padding (innerPadding) . fillMaxSize (), horizontalAlignment = Alignment. CenterHorizontally , verticalArrangement = Arrangement. Center ) { Text ( text = selectedItem, fontSize = 28 . sp ) Spacer ( modifier = Modifier. height ( 18 . dp )) items. forEach {...