돌아오신 것을 환영합니다
이번 영상에서는 여기 보이는 화면에 대한 작업을 하겠습니다
여기는 update(수정 반영)이자 create(생성) 화면이기도 한
두 가지를 포함하는 화면입니다
유일한 차이는 안에 보이는 내용과 자잘한 텍스트 등입니다
보이는 대로입니다
여기는 Add Wish라고 하고 하단에는 그 대신
Update Wish라고 적혀 있습니다
보이는 대로 title과 description은 채워졌습니다
이 부분은 다음 시간에 살펴보고
오늘은 사용자 인터페이스(UI)를 위한 준비를 해 보겠습니다
이것도 많은 내용을 포함하겠지만 오늘 함께 해 보겠습니다
바로 여기 있는 사용자 인터페이스(UI)입니다
또다시 Scaffold와 Nav Bar가 필요하므로
이 부분에 대한 작업은 이미 한 적이 있습니다
바로 App Bar(앱 바)입니다
App Bar(앱 바)는 이미 만들어 놨으니
그 바를 재사용하겠습니다
그리고 back button(뒤로가기 버튼)을 표시하되 몇 가지 기능을 추가할 수도 있습니다
이전에 생성할 때 나중에 수정할 수 있도록 했기 떄문입니다
그 다음에는 간단한 텍스트 수정 및 입력을 위한 두 줄과 아래에 버튼이 하나 있습니다
이 사용자 인터페이스(UI)를 설정해 보겠습니다
일단은 새 파일을 생성해야 합니다
새 Kotlin Class/File이고 composable(컴포저블)이므로
File을 선택해서 이름은 AddEditDetailView로 하겠습니다
네
즉 Add와 Editr과 DeatilView를
따로 보는 것이 아닌 한번에 다루는 것입니다
이것은 composable(컴포저블)입니다
네
이름은 AddEditDetailView입니다
이 AddEditDetailView에는 parameter(매개변수)가 몇 개 필요합니다
필요한 것으로는 id와 viewModel이 있고
viewModel에 더불어 NavController까지 있어야 DeatilView 화면으로
넘어갈 수 있습니다
네
Scaffold부터 시작하겠습니다
여기에 Scaffold를 하나 추가하고
이 Scaffold에는 content(내용)이 필요합니다만
그 전에 먼저 Scaffold 안에 있어야 할 것들을 정의하겠습니다
먼저는 아시다시피 topBar를 사용하고
또 AppBarView를 여기에 사용할 수 있습니다
이전에 직접 만들었던 것입니다
네
여기에 title을 추가해야 하는데
만약 id가 0L과 같지 않다면 "항목 수정 반영"을
여기에 call(호출)하겠습니다
Else의 경우는 "항목 추가"를 호출하도록
이런 식으로 설정할 수 있습니다
이것이 한 가지 방법입니다만
다음으로는 문자열 리소스를 사용하는 법을 알려 드리겠습니다
이 문자열들을 어떻게 나중에 수정할 수 있도록 할 수 있을까요?
예를 들어서, 어떻게 다른 언어로 지원할 수 있을까요?
여기에 보시면 res, values, strings가 있습니다
그렇죠?
이 안에는 여러 문자열들이 있습니다
하나는 벌써 여기에 있는데
이 app_name은 기본적으로 우리가 만든 프로젝트의 이름입니다
하지만 여기에 다른 item(항목)을 추가할 수 있습니다
예를 들어서 이 안에 "항목 수정 반영"을 넣을 수 있습니다
여기에 이름을 update_wish로 설정해서
이것의 내용(content) 또한 Update Wish가 됩니다
즉 그 안의 문자열입니다
여기에는 괄호를 사용할 필요가 없습니다
그리고 다른 문자열을 만들어서 "문자열 추가"에 대한 이름을 포함하게
하겠습니다
내용은 Add Wish입니다
이제 이 리소스를 여기에서 접근할 수 있게 되었습니다
문자열 variable(변수)는 어떻게 접근합니까?
문자열 리소스라는 것을 사용하면 됩니다
여기에 stringResource라고 쓰고
여기에 id를 R.string.update_wish로 정의할 수 있습니다
그리고 else 다음에는
똑같이 stringResource를 쓰되 update_wish가 아니라 add_wish를 사용합니다
이렇게 add_wish를 쓰겠습니다
이제 이 모든 것이 Top App Bar(상단 앱 바)의 중괄호 안에 들어가야 합니다
다른 방식으로 작업해도 이렇게 할 수 있습니다
이렇게 하면 됩니다
다른 방식으로 해도 작동은 했겠지만
문자열 리소스를 사용하는 방법을 보여드리고 싶었습니다
이제 여기에 추가한 Top App Bar(상단 앱 바)가 있습니다만
이 Scaffold에 content(내용)이 있어야 합니다
여기 보이듯이 Scaffold는 비어있을 수 없다고 합니다
그래서 여기에 column(컬럼)을 추가해서 modifier(제어자)를 넣고 modifier.padding을 쓰겠습니다
이제 여기에 Column을 추가하겠습니다
여기는 Jetpack Compose의 modifier(제어자)를 쓰고 Column에 content(내용)을 추가하겠습니다
이제 더이상 오류가 없습니다
AddEditDetailView가 모두 준비가 된 것입니다
이제 Column에 parameter(매개변수)를 더해서 여기에 보이는 것처럼
설정하겠습니다
즉 Column이 content(내용)을 감싸는 것입니다
여기에 .wrapContentSize와 HorizontalAlignment를 쓰고
CenterHorizontally를 쓰겠습니다
그리고 verticalArrangement에 Arrangement.Center을 쓰겠습니다
즉 항목을 가운데 정렬하는 것입니다
이제 여기에 Spacer를 추가해서
여기에 Spacer가 보이므로
먼저 Spacer의 높이를 10픽셀로 설정하겠습니다
즉 Modifier.height(10.dp)이고
이제 dp를 import로 가져와야 합니다
여기에서 Import를 선택하면
Spacer 준비가 끝났습니다
그리고
여기 있는 텍스트 필드를 만들겠습니다
생긴 게 좀 다른 것이 보이실 겁니다
여기에는 특정한 형식이 필요합니다
좋습니다
이 형식을 여기 있는 outline(윤곽선)으로 정의하겠스니다
이것이 outline(윤곽선)이 있는 텍스트 필드이지만
여기에서 수정을 조금 하겠습니다
문자열을 텍스트 필드로 pass(전달)하는 것입니다
여기에 따로 Wishlist(위시리스트) 항목 텍스트 필드를 만들겠습니다
이 작업까지 하면 이 영상이 너무 길어질 것 같네요
이 영상에서는 AddEditDetailView 설정 작업을 시작했습니다
다음 영상에서 각각의 항목이 어떻게 보여야 하는지를 설정해서
항목 테스트 필드의 외관도 수정하여서
직접 형식을 디자인해 보겠습니다
좋습니다
다음 영상에서 뵙겠습니다