돌아오신 것을 환영합니다
이 영상에서는 navigation(탐색) 아이콘을 다루겠습니다
Navigation(탐색)의 Top App Bar(상단 앱 바)에서 사용할 아이콘을 직접
만들겠습니다
이 Top App Bar(상단 앱 바)를 navigation(탐색) 도구로 사용하거나
메뉴 도구로 사용할 수 있습니다
여기 있는 AppBarView는 Top Bar(상단 바)를 포함하므로
AppBarView를 다른 파일로 내보내면 됩니다
이렇게 하면 App Bar(앱 바)에 대한 유연함을 확보할 수 있습니다
또한 HomeView 파일 크기를 줄이기 위해 UI 요소를 분리하는
작업을 하겠습니다
이 작업을 위해 TopAppBar를 수정하겠습니다
navigationIcon에 대해서는 이전에 언급한 적이 있습니다
이 아이콘 또한 composable(컴포저블)입니다
여기에 navigationIcon을 정의하기 위해
여기에 사용하고자 하는 composable(컴포저블)으르 사용할 수 있지만
저는 위에 새 composable(컴포저블) 앱을 만들어서
Composable(컴포저블)인 navigationIcon을 추가하겠습니다
일단은 entry(엔트리), 입력과 출력이 없는 Nullable 형식으로 두겠습니다
IconButton을 추가하겠습니다
이 정도로 간단하게 두겠습니다
이 navigationIcon은 실제로 클릭이 가능한 버튼이므로
여기에 이것을 사용하는 이유는 나중에 이 아이콘을 보이거나 보이지 않도록
수정하기 위함인데, 그 이유는 다른 화면에 있을 때만 버튼이 보여야
하기 때문입니다
일단 초기 단계에서 navigationIcon을 설정하는 방법을 먼저 보여드리고 싶었습니다
이 부분은 나중에 수정해서 title에 특정 키워드가 포함되어 있다면
이 부분을 표시하고 다른 경우는 표시하지 않도록 하겠습니다
IconButton을 추가하겠습니다
IconButton을 클릭하면 무슨 일이 일어나야 할까요?
onBackNavClicked로 pass(전달)된 내용이어야 할 것입니다
실행할 내용으로 이것을 pass(전달)하겠습니다
그리고 이것이 function(함수)이므로
onClick 안에서 call(호출)할 필요가 있습니다
이제 IconButton은 Icon이라는 type(타입)의 content(내용)을 사용하게 해 주므로
여기에 Icon을 import로 가져오면 됩니다
Composable(컴포저블) Material을 사용하면 되겠습니다
여기서는 Material 3를 사용하지 않겠습니다
이제 이 Icon에 property(속성)을 여러 개 추가하겠습니다
먼저 imageVector인데
즉 아이콘에 사용하고자 하는 이미지를 의미합니다
여기에는 AutoMirrored.Filled.ArrowBack을 추가하겠습니다
Icon 말고 Icons로 수정하겠습니다
여기에 Android X의 Icons가 있는데
이 인터페이스가 ArrowBack을 사용할 수 있게 해 줍니다
이렇게 사용할 수 있습니다
이 안에 다양한 아이콘이 있는데
저는 ArrowBack을 위해 ImageVector를 사용했습니다
이제 Filled 안에 있는 object 종류도 확인할 수 있습니다
보이는 대로 Filled, Outlined, Rounded, TwoTone, Sharp가 있습니다
이것들은 사용할 수 있는 아이콘의 종류입니다
저는 AutoMirrored를 사용했는데
이것은 RTL 형식을 사용하는 사람들에게 자동으로 미러링을 해 줍니다
즉 아랍어나 히브리어 등은 RTL, 즉 right to left 방식으로 오른쪽부터
글을 읽습니다
그러므로 이 경우 뒤로가기 버튼은 왼쪽이 아닌 오른쪽에 위치할 것입니다
아니면 적어도 방향이 바뀔 것입니다
AutoMirrored의 역할은 이와 같습니다
나중에는 아주 익숙해지실 것입니다
그리고 tint를 설정해서 버튼의 색상을 흰색, 즉 White로 만들겠습니다
그리고 contentDescription으로는 null을 사용하겠습니다
이 부분을 위해서 Color을 import해와야 합니다
이 옵션이 UI Graphics에서 오므로 이것을 선택하겠습니다
이 Color는 이제 초기 색상을 포함합니다
지난 영상에서 색상을 직접 정의하는 방법에 대해 다루었습니다
여기에는 고를 수 있는 색상이 아주 많이 마련되어 있습니다
파란색, 청록색, 회색, 초록색, 흰색, 모두 잘 있습니다
만약 디자이너가 직접 만든 색상을 사용하고 싶으시다면\
여기에서 제공하는 대로 White 등을 사용하기보다는, 아이콘 버튼은 그냥 그렇게 하는 것이 좋겠지만
다른 항목에는 필요한 대로 수정해서 사용하시면 됩니다
이제 이 navigationIcon을 TopAppBar에서 사용할 수 있습니다
이대로 실행해 보겠습니다
여기 오니는 대로 Nullable 형식을 수정하라고 하는데, 그 이유는 여기에서
Null 상태인 것이 없기 때문입니다
이 부분은 나중에 작업하도록 하겠습니다
그 의미로 여기에 물음표를 하나 추가해 두었습니다
이제 보이는 대로 뒤로가기 버튼을 만들었습니다
이 버튼에 지금은 별다른 기능이 없습니다
그 이유는 이 버튼이 할 작업을 아직 구현하지 않았기 때문입니다
이 작업을 먼저 하겠습니다
이 Scaffold 안에서 Top App Bar(상단 앱 바)를 호출함으로써 뒤로가기 버튼을 클릭할 때
어떤 작업을 해야 할 지 정할 수 있습니다
이 부분을 App Bar(앱 바) 다음 쉼표로 pass(전달)하겠습니다
보이는 대로 여기에 코드를 추가할 수 있습니다
즉 뒤로가기 버튼을 눌렀을 때 무슨 일이 일어나야 하는지 정하는 것입니다
일단은 이 버튼이 작동하는지를 보기 위해 context를 추가하겠습니다
val context 다음에는 LocalContext입니다
그 다음에 .current입니다
이 정도면 된 것 같습니다
그 다음에는 Toast.makeText(context)에 "버튼을 클릭했음"을 작성하고
Toast.LENGTH_LONG.show를 쓰겠습니다
이제 이 부분을 상단으로 옮기겠습니다
이렇게 하겠습니다
이제 애플리케이션을 실행해서 뒤로가기 버튼을 클릭할 수 있는지 보겠습니다
So I'm just using this toast just to see whether the button actually works.
여기 아래쪽에 "버튼을 클릭했음"이라고 하네요
한 번 더 해 보겠습니다
여기 있습니다
"버튼을 클릭했음"
됐습니다
뒤로가기 버튼은 잘 작동합니다
일단은 어떤 작업을 해야 하는지 디자인을 했고
이 부분은 이후에 좀더 수정을 하겠습니다만
오늘로서는 이 정도로 마무리하겠습니다
오늘은 navigation(탐색) 아이콘을 추가해서 뒤로 가거나 pop(삭제)하도록 하는 법을 배웠습니다
다음에는 이 부분을 수정해서
특정 화면에서만 보이도록 할텐데
바로 WishList 이외의 화면입니다
즉 다른 화면으로 넘어가야만 뒤로가기 버튼이 보이도록 하는 작업이 될 것입니다
다음 영상에서 뵙겠습니다