돌아오신 것을 환영합니다
이 영상에서는 Floating Action Button(플로팅 작업 버튼)을 애플리케이션 하단에
추가해 보겠습니다
일단 지금은 이 버튼이 없으므로
WIshlist(위시리스트) 하단에는 아무것도 없습니다
이 부분을 작업해 보겠습니다
여기에 Action Button(작업 버튼)을 어떻게 추가할 수 있을까요?
Floating Action Button(플로팅 작업 버튼)은 말그대로 하단에서 '떠다니는' 버튼으로
아래에 있는 내용이 무엇이든지 그 위에 떠 있습니다
그러므로 HomeView로 돌아가서 항목을 추가하는데 쓸 버튼을
다시 확인해 보겠습니다
이 Scaffold에서 사용할 수 있는 또다른 property(속성)이 바로 Floating Action Button(플로팅 작업 버튼)입니다
이 App Bar(앱 바) 다음에 와야 하므로 이 부분 다음입니다
좋습니다
여기에서 이 부분이 끝나므로
여기에 floatingActionButton을 추가하겠습니다
바로 이것입니다
이제 이 버튼의 parameter(매개변수)로 무엇을 포함할 지 정의할 수 있습니다
그것을 위해 새로운 파일을 하나 만들 수도 있지만
여기에서는 기본으로 제공되는 FloatingActionButton이라는 composable(컴포저블)을 사용하겠습니다
이 composable(컴포저블)에는 onClick 이벤트가 있지만
이외에 수정할 수 있는 다른 요소들도 있습니다
그러므로 일단은 아무 작업도 하지 않겠습니다
여기에 "Navigation(탐색)을 추가해서"
"화면 수정" 아니면 "화면 추가"로 하겠습니다
이 작업을 하게 될 것입니다
이 부분에 TODO라는 키워드를 넣으면 도움이 됩니다
이 FloatingActionButton은 늘 그렇듯이 modifier(속성자)라는 property(속성)을 포함합니다
여기에 Modifier.padding을 써서
이 버튼에 대해 모든 방향으로 padding(패딩)을 더해 보겠습니다
값은 20 픽셀 밀도로 하겠습니다
이제 DP를 가져오고
여기에 꼭 쉼표를 써야 합니다
그 다음에는 이 코멘트가 onClick을 닫는 부분을 방해하지 않도록 합니다
네
안 그러면 오류가 생깁니다
이 다음에는 뭘 더해 볼까요?
contentColor을 사용해서 색상을 설정하겠습니다
흰색입니다
이 부분은 Floating Action Button(플로팅 작업 버튼)의 content(내용)에 해당하므로
더하기 기호(+)가 흰색이 되어야 합니다
그래서 Color.White를 사용하겠습니다
배경 색상으로는 Color.Black을 쓰겠습니다
그리고 Floating Action Icon(플로팅 작업 아이콘)에 사용할 아이콘으로는
Icon이 아니라
확인해 보겠습니다
imageVector가 있는 Icon으로 사용해야 하므로, 이것으로 설정해서
Icons.Default.add인데
여기에 아까 말씀드린 더하기 기호가 있습니다만 원 등을 사용하셔도 됩니다
저는 이것으로 선택해서 contentDescription을 추가하겠습니다
일단은 그냥 null로 하겠습니다
contentDescription에 "버튼 추가" 등의 내용을 따로 추가하셔도 됩니다
이제 Floating Action Button(플로팅 작업 버튼) 부분이 끝났습니다
이제 애플리케이션을 실행해서 이 버튼이 존재하는지 확인해 보겠습니다
그리고 화면에 표시되는지도 봅시다
여기 확인할 수 있습니다
Floating Action Button(플로팅 작업 버튼)입니다
설정한 대로 검은색 원 안에 흰색 더하기 기호가 있습니다
물론 아직은 아무 작업도 하지 않습니다만
이후에 변경해 보겠습니다
여기에 Toast를 추가해서
이전에 한 것과 동일한 작업을 할 수 있습니다
이 Toast를 onClick 안에 추가하겠습니다
여기에 Floating Action Button(플로팅 작업 버튼)을 의미하는
FAB을 사용해서 "FAB을 클릭했음"이라고 하겠습니다
다시 실행해서 제대로 작동하는 지 보겠습니다
위쪽에 있는 코드를 복사해서
context 등을 그대로 사용하여 버튼을 클릭할 수 있게 했습니다
아래에 "FAB을 클릭했음"이 뜹니다
이제 이 버튼이 작동한다는 것을 알 수 있습니다
이 다음 단계는 다른 화면으로 탐색하도록 하는 것입니다
다른 화면으로 넘어가기 전에 먼저 그 화면을 설정해야 할 것입니다
좋습니다
차근차근 같이 작업을 해 봅시다
다음 영상에서 뵙겠습니다