돌아오신 것을 환영합니다
이 영상에서는 Scaffold 설정을 시작해 보겠습니다
먼저는 디자인하고자 하는 Top App Bar(상단 앱 바)를 살펴보겠습니다
특정 페이지에 있을 시 되돌아가도록 해 주는 App Bar(앱 바)를 디자인해 보겠습니다
아직은 페이지나 View(뷰)가 여러 개 있지는 않지만
일단은 HomeView를 새로 만들어서 거기서 시작해 보겠습니다
HomeView는 Scaffold를 포함함으로써 애플리케이션에
구조를 더해줄 것입니다
여기서 이루고자 하는 것은 구조입니다
여기에 Top App Bar(상단 앱 바)를 추가하고
아래쪽에 content(내용) 그리고 Floating Action Button(플로팅 작업 버튼)을 추가하겠습니다
이것을 Scaffold composable(컴포저블)을 사용해서
추가할 수 있습니다
좋습니다
HomeView 안에서 가장 먼저 할 작업은 바로
HomeView가 composable(컴포저블)임을 확인하는 것입니다
여기에 이름인 HomeView를 쓰겠습니다
네
방금 한 작업은 Scaffold를 하나 포함한 HomeView라는 새 파일을 만든 것입니다
좋습니다
이 Scaffold composable(컴포저블)을 통해 여러 property(속성)을 추가할 수 있습니다
여기에서는 scaffoldState를 사용하고 rememberScaffoldState를 필요로 하는 이것을
고르겠습니다
여기 보이듯 modifier도 있고 scaffoldState도 있고
Top Bar(상단 바) composable(컴포저블)를 define(정의)할 수도 있고
Bottom Bar(하단 바)나 snackbarHost에 대한 composable(컴포저블)도 있고
여기에는 composable(컴포저블)로서의 content(내용)도 있는데, PaddingValue를 요구합니다
즉 Scaffold 내부에서 padding value(패딩값)이 주어져 Scaffold를 display(표시)할 수 있게 됩니다
floatingActionButton 또한 흥미로운 부분입니다
즉 사용하고자 하는 다양한 component(컴포넌트)를 위해 composable(컴포저블)을 디자인해야 합니다
지금 사용할 것은 topBar과 floatingActionButton, 그리고
scaffoldState 그리고 backgroundColor가 되겠습니다
차근차근 설정을 해 보겠습니다
일단
현재로서는
순서대로 첫 번째인 App Bar(앱 바)부터 시작합시다
이제 이 Scaffold에는 전달해야 하는 property(속성)이나 parameter(매개변수)가
많이 있습니다
예를 들어 여기에서는 topBar로 설정하겠습니다
이 topBar는 composable(컴포저블)이므로
전체 composable(컴포저블)을 topBar로 pass(전달)할 수 있습니다
먼저 새로운 UI composable(컴포저블)파일을 만들겠습니다
이 새 파일의 이름은 TopBar로 하겠습니다
아뇨, 이름을 AppBar로 바꾸겠습니다
AppBar 파일에는 App Bar(앱 바)에 대한 View(뷰)를 제어할 것이므로
이것 또한 Composable(컴포저블)이며 AppBarView라고 이름 짓겠습니다
AppBarView에 둘 Top App Bar(상단 앱 바)에는 나중에 수정할 수 있는
버튼을 하나 추가해 보겠습니다
이 작업은 어떻게 할 수 있을까요?
일단은 AppBarView가 표시할 title을 알아야 합니다
이걸 먼저 pass(전달)하고, 여기에는 event(이벤트)를 하나 추가해서 이름을 onBackNavClicked로 짓겠습니다
요구하는 parameter(매개변수)는 없고 반환하는 것도 없습니다
그래서 그냥 코드를 실행할 수 있습니다
일단은 초기 상태는 비워둔 상태로 시작하겠습니다
즉 onBackNavClicked 버튼은 초기 상태에 아무 것도 하지 않습니다
이 안에 TopAppBar를 추가하겠습니ㄷ
이 TopAppBar는 Jetpack Compose로 만든 composable(컴포저블)입니다
보이는 대로 사용 가능한 옵션이 꽤 있습니다
저는 여기에서 title을 포함한 옵션으로 선택하겠지만 어떤 parameter(매개변수)라도 괜찮습니다
사용하고자 하는 parameter(매개변수)에 적합한 composable(컴포저블)을 사용하면 됩니다
TopAppBar에 필요한 title은 Text로 지정하겠습니다
즉 텍스트인 composable(컴포저블)입니ㄷ
여기에 Text를 가져오겠습니다
Composable(컴포저블)이되 Material 3인 것으로 골랐습니다
이 텍스트의 내용은 title로 하겠습니다
즉 이 AppBarView라는 composable(컴포저블)로 pass(전달)하는 것이 title이 됩니다
여기에서 몇 가지 더 정의해 보겠습니다
예를 들어 color를 colorResource로 정의하겠습니다
id는 R.color.white입니다
즉 이 white라는 색상이 colors.xml 파일 안에 있는데
여기 있는 FFFFFFFF입니다
보이는 대로 이 Color.kt 파일 안에도 다양한 색상들이 있지만
이 res 폴더에 있는 values 안의 color.xml 파일에도 색상이 많이 있습니다
그러므로 이 색상을 찾기 위해 res 폴더를 의미하는 R을 쓰고
values를 써서 values 폴더를 의미하고
그 안에 있는 colors 파일까지 지정하는 것입니다
colors.xml 파일 안에 white라는 색상이 있는 것입니다
이 색상은 R.color.white를 통해 지정 가능합니다
R.color만 써도 이 값을 지정할 수 있는 것입니다
즉 여기에 values라고 따로 작성할 필요도 없습니다
R.color.white만 써도 충분합니다
이렇게 TopAppBar를 마무리할 수도 있지만
여기에 몇 가지 디테일을 추가해서 수정을 해 보겠습니다
일단 색상은 추가했으니
이제 modifier(수정자)를 추가하겠습니다
Modifier.padding으로 패딩을 더하되 왼쪽에 픽셀 밀도를 4로 지정하겠습니다
왼쪽부터 시작하므로 start를 씁니다
이제 dp와 heightIn을 사용하겠습니다
heightIn은 내용의 높이를 dp의 최솟값과 최댓값 사이로 제한합니다
예를 들어 픽셀 밀도 24 이상으로 커지지 않도록 해 보겠습니다
이 작업을 위해 max를 사용하면 됩니다
Top Bar(상단 바)에 디테일을 더해 보겠습니다
여기 있는 텍스트 property(속성)이 모두 이 title에 대한 것입니다
Text에 colorResource가 있고
padding과 heightIn이 있는 modifier(수정자)도 있습니다
이 부분 작업은 끝났고
이제 TopAppBar에 필요한 다른 항목을 추가하겠습니다
몇 가지는 꼭 필요한 내용들이고
다른 부분은 기본값을 가지고 있습니다
TopAppBar에 elevation을 추가해서 픽셀 밀도는 3으로 설정하고 배경색을
추가하겠습니다
잠깐 여기에서 이 내용이 맞는지
확실히 하고 가겠습니다
여기에 title이 있고
여기에 elevation이 있습니다
또 배경색인 backgroundColor에는 colorResource를 써서
R.color.app_bar_color로 하겠습니다
여기 있는 app_bar_color는
제가 직접 색상값에 추가할 색상입니다
values 폴더로 가서 다른 색상을 추가하되 이름으로
app_bar_color를 쓰겠습니다
이 색상은 필요할 때마다 재사용이 가능합니다
색상에 대한 16진수 색상 코드를 추가하겠습니다
저는 DD151E5F를 써서 분홍색을 사용하겠습니다
됐습니다
여기에 다른 값을 사용해 보셔도 됩니다
다양한 색상을 사용할 수 있습니다
Color Picker(색상 피커)를 통해 특정한 색을 고를 수도 있습니다
그 부분은 다음 영상에서 더 자세히 보여드리겠습니다
네
일단은 App Bar(앱 바)를 마무리짓겠습니다
app_bar_color를 설정했고, App Bar(앱 바)에 navigation(탐색) 아이콘을 추가하겠습니다
navigationIcon으로 아이콘의 모양을
제가 직접 디자인해 보겠습니다
TopAppBar를 사용하기 위해서는 ExperimentalMaterial3Api를 추가해야 합니다
바로 여기 있습니다
그러면 elevation과 다른 기능을 모두 사용할 수 있게 됩니다
이 TopAppBar를 사용하기 위해 이것을 추가하겠습니다
TopAppBar가 작동하기 위해서는 제대로 된 TopAppBar를 가져와야 합니다
그래서 이 import를 지우고 대신 AppBar라는 function(함수)를 사용하겠습니다
Android 1.6 Alpha를 사용하는 옵션입니다
이렇게 하면 오류가 사라질 것입니다
만약 잘못 가져왔다면 다른 옵션으로 시도하시면 됩니다
이제 navigationIcon을 가져오겠습니다
여기에서 navigation(탐색) 아이콘이 요구하는 것을 확인할 수 있습니다
Nullable 형식의 코드입니다
즉 navigationIcon를 따로 지정할 필요는 없지만
저는 하나 추가해 보려고 합니다
이 부분은 조금 있다가 작업하겠습니다
일단은 AppBarView를 HomeView에 추가해 보겠습니다
기억하시겠지만 AppBarView에 title을 추가해야 하므로
WishList로 하겠습니다
여기 아직 오류가 생기는 이유는
TopAppBar에 composable(컴포저블)이 필요하기 때문입니다
따라서 여기서는 중괄호로 묶어야 합니다
중괄호 안에 이 부분을 넣겠습니다
이제 AppBarView를 사용할 수 있습니다
여기 Scaffold에 따르면 패딩값을 사용해야 한다고 합니다
일단은 LazyColumn을 추가하겠습니다
LazyColumn에 modifier(속성자)를 추가해서 Modifier.fillMaxSize를 설정하겠습니다
.padding을 추가하고 it을 사용하겠습니다
LazyColumn에도 content(내용)을 더하고
LazyColumn에 import를 사용하겠습니다
됐습니다
지금은 별다른 일이 일어나지 않지만
곧 변화가 있을 것입니다
지금은 비어 있겠지만 AppBarView를 표시할 것입니다
이제 AppView를 MainActivity 안에서 사용해서 HomeView를 표시하고 앱을 실행시키겠습니다
이렇게 하면 빌드가 진행중인 내용을 하나씩 점검해 볼 수 있습니다
AppBarView 빌드를 시작으로 단계별로 진행하겠습니ㄷ
여기 있습니다
지금까지 작업한 내용은 위쪽의 작은 텍스트, 즉 Top App Bar(상단 앱 바) 뿐입니다
아까 설정한 색깔로 되어 있습니다
이렇게 하면 나중에 AppBar를 마음대로 수정할 수
있게 됩니다
예를 들어 이 back button(뒤로가기 버튼)을 navigation(탐색) 항목으로 사용하기 위해
클릭하면 뒤로 돌아가되
스택을 pop(삭제)해서 최신 view(뷰) 대신 아래쪽의 view(뷰)를
스택에 표시할 수 있습니다
이렇게 설정할 수도 있습니다
물론 아직 작업할 내용은 많지만 Top App Bar(상단 앱 바)를
Scaffold로 작업하는 것을 보여드렸고, 이에 대한 content(내용)도 벌써 만들었습니다
여기 있는 것이 Scaffold의 content(내용)입니다
물론 아직 많은 일이 일어나고 있진 않지만 조금씩 기능을 더할 예정입니다
다음 영상에서 뵙겠습니다