대형 서점 탐험 Cotton마을
중심에는 대형 서점이 있었는데 하늘 높이 솟은 책장과 끝없는 책의 복도의 경이로움 속에는
지하 세계의 이야기와 고대의 지식들도 있었습니다
안으로 들어가면 거대함에 압도됩니다
각 복도에는 발견되기를 기다리는 이야기가 손짓하고 있습니다
공상 과학이나 미스테리 전기 등의 장르를 나타내는 표지판이 보입니다
이제 우리의 이야기에 마법을 부려봅시다
Jetpack Compose로 평행을 그립니다
이 대형 서점을 탐색하는 것은 Jetpack Compose 앱의 화면을 통해 탐험하는 것과 같습니다
각 책장이나 장르 선택은 앱의 특별한 화면이나 목적으로 볼 수 있는데
서점을 탐험할 복도를 고르는 것처럼 말입니다
앱에서는 다음에 어떤 화면을 탐색할 지 결정합니다
이제 Jetpack Compose 애플리케이션에 이를 구현해 보겠습니다
그러기 위해 빈 액티비티로 새 프로젝트를 만드는데
NavigationSample이라 이름 짓고
프로젝트를 만듭니다
좋습니다
첫 컴포저블과 첫 화면부터 시작합니다
Greeting과 GreetingPreview를 지우겠습니다
여기 greeting도 말입니다
이제 됐습니다
우리가 필요한 것은 첫 화면입니다
그리고 이는 컴포저블 입니다
FirstCreen이 아니라 FirstScreen입니다
첫 화면은 몇 가지 정보를 가질 것입니다
제가 만들 화면은 사용자가 이름을 입력할 수 있는
창이 있을 것입니다
그리고 클릭할 버튼이 있는데
클릭하면 다른 화면으로 이동합니다
왜 이름을 입력하게 할까요
한 화면에서 다른 화면으로 혹은 한 컴포저블에서 다른 컴포저블로 정보를 보내는 법을 알아보기
위함입니다
그러므로 가끔은 import하거나 코드를 복사해서 간단하게 만들 것입니다
직접 입력하고 싶으시다면 걱정하지 마십시오
그렇게 하셔도 됩니다만 저는 복사해서 붙여 넣겠습니다
이 것은 mutableStateOf를 이용하는 다른 방법인데 어떤 방법도 좋습니다
모든 세부 사항을 담을 컬럼을 만들겠습니다
이 것이 Column이 될 것이고 이 것이 동작하려면 Column을 import해야 하므로
그렇게 하고
padding과 dp도 import되어야 하고
Arrangement도 동일합니다
이제 보겠습니다
인식이 안됐습니다
Arrangement를 입력하면
됐습니다
가끔 붙여 넣기 하면 제대로 인식을 못하는데 그래도 여전히 녹화 작업에서 저는 많은 시간을
줄일 수 있고 가끔은 볼 때도 말입니다
왜냐하면 이 것들을 이미 한 열 번은 해 보았기 때문입니다
modifier가 무엇인지 verticalArrangement와 padding 등이 무엇인지 아실 것입니다
그러므로 지금부터 종종 미리 준비된 코드를 붙여 넣겠습니다
그러면 모든 과정이 좀 더 쉬워질 것입니다 왜냐하면 컬럼이나 remember, mutableState 등이 무엇인지
100번째 보여드리는 것이 목적이 아니라 새 개념을 알아보는 것이 중요하기
때문입니다
말씀 드렸듯 사용자가 이름을 입력할 입력 창과 버튼을 만들 것인데
그 위쪽에 만들 것은 또 다른 창 혹은 또 다른 컴포저블로 그냥 글씨가
될 것입니다
그리하여 현재 화면이 무엇인지 알 수 있게 말입니다
여기에 Text를 import해서 사용하고
다음으로 Text와 테두리 쳐진 창 사이에 들어갈 Spacer입니다
좋습니다
다음은 테두리 쳐진 텍스트 창인데 사용자가 이름을 입력할 수 있는
텍스트 창입니다
그 혹은 그녀의 이름일 필요는 없고 그냥 이름입니다
그리고 테두리 쳐진 텍스트 창의 값은 여기 위에 설정한 이 remember 변수의 값인
name이 될 것입니다
테두리 쳐진 텍스트 창의 값을 바꾸면 그 값으로 name속성의 값에
할당할 것이며 기본적으로 지금까지 여러 번 한 것입니다
그리고 마지막으로 버튼입니다
이 버튼은 그저 Go to Next Screen이라고 표시될 것입니다
이 버튼 컴포저블을 import합니다
그냥 다음 화면으로 이동이라고 표시할 것이고
onClick 이벤트에서
재미있는 부분이 나옵니다
이 곳에서 한 화면에서 다른 화면으로 이동하는 실제 변화가 있을 곳이며
이제 미리 보기를 설정하여 화면이 어떻게 보일지 보도록 하겠습니다
그러므로 @Preview 키워드를 추가해서 분할 화면에 컴포저블을
표시합니다
몇 초간 초기화를 합니다
제 경우에는 최소 한 번은 빌드 후 새로 고침을 해야 첫 화면을 볼 수 있습니다
됐습니다
화면이 보입니다
Preview에 배경을 추가하겠습니다
showBackground = true입니다
하얀색 배경이 생겨서 더 잘 보입니다
여기까지 입니다
이번 영상에서는 첫 화면을 설정했습니다
다음 영상에서 두 번째 화면을 설정하고
한 화면에서 다른 화면으로 실제 탐색을 해보겠습니다
다음 강의에서 뵙겠습니다