돌아오신 것을 환영합니다
이 영상에서는 텍스트 수정 필드나 outline(윤곽선) 표시가 된 텍스트를 다루겠습니다
여기 보이는 대로입니다
먼저 AddEditDetailView에서 새 composable(컴포저블)을 만들겠습니다
이름은 WishTextField로 하겠습니다
Composable을 추가하고 fun WishTextField를 쓰겠습니다
이 WishTextField에는 몇 가지 디테일 요소가 필요합니다
표시할 label과 그 value를 알아야 하고
또 ValueChangeListener를 받을 때 어떤 작업을 할지 설정해야 합니다
그래서 OnValueChangeListener이지만
onValueChanged라고 부르겠습니다
값이 변할 때마다 변한 값의 문자열을 pass(전달)하도록 하겠습니다
이렇게 하면 텍스트 안에서 보이는 것을 계속해서
수정할 수 있게 해 줍니다
먼저 label에 넣을 내용은
Title(제목) 혹은 Description(설명)입니다
네
여기 있는 작은 부분이 label에 해당합니다
Value란 텍스트 필드 안에 있는 값이고
onValueChanged는 이 텍스트 필드를 클릭하고 뭔가를 변경할 때에 수행될 작업입니다
즉 사용자 인터페이스(UI)를 update, 혹은 수정사항을 반영하는 것입니다
이 WishTextField 안에는 기본으로 제공되는 OutlinedTextField를 사용하겠습니다
이것의 value는 value이고
onValueChange는 아까 만든 onValueChanged입니다
이제 여기에 label이 있는데
이 OutlinedTextField에 label을 추가할 수 있는 것입니다
이 창을 닫겠습니다
이 label을 보기 전에 괄호가 잘 닫혀 있는지 확인하겠습니다
이 OutlinedTextField는 이렇게 label을 포함하는데
이것은 텍스트로 text = label이고 색상은 검은색으로
Color.Black입니다
여기에 먼저 Text를 import로 가져오겠습니다
이것으로 사용하겠습니다
이것이 OutlinedTextField에 사용할 Text입니다
여기에 modifier(제어자)도 하나 추가하겠습니다
여기에 쉼표를 추가하고 modifier(제어자)는 Modifier.fillMaxWidth입니다
즉 화면을 꽉 채우라는 뜻입니다
여기에서는 keyboardOptions라는 것을 사용하겠습니다
이전에는 다룬 적이 없었는데
아주 강력한 기능입니다
이것을 다시 열어서
이 항목의 어느 부분이든 클릭하면 어떤 키보드가 뜰지를 설정할 수 있습니다
즉 어떻게 생긴 키보드이며 어떤 버튼이 있는지에 대한 내용입니다
예를 들어 어떤 필드는 클릭하면 숫자 패드만 있는 키보드가 뜨고
어떤 필드는 클릭하면 '추가' 버튼이 여기 생겨서
이메일 주소 등을 기입할 수 있게 됩니다
혹은 링크를 입력할 때 .com을 제공해 주기도 합니다
이런 식으로 키보드에 대한 옵션을 수정할 수 있습니다
여기에서는 Android가 제공하는 키보드 옵션을 사용해 보겠습니다
KeyboardType을 이 키보드 옵션으로 pass(전달)할 수 있습니다
여기에 KeyboardType을 쓰는데
이렇게 쓰면 KeyboardType.Text를 쓰겠습니다
다른 종류도 있습니다
Email, Ascii, 그리고 Text
저는 여기에서 Text를 쓰겠습니다
하지만 다른 옵션으로도 시도해 보실 수 있습니다
다음으로는 colors를 TextField로 정의하고
Defaults.outlineTextFieldColors입니다
여기에서는 사용하려는 개별 색상을 정의할 수 있습니다
예를 들면 텍스트 색상, 강조된 테두리 색상, 강조 취소된 테두리 색상 등
이제 직접 정의할 수 있습니다
예를 들면 여기에 강조 표시가 보입니다
이것이 강조된 상태입니다
여기에 사용된 색상은 언제나 검은색입니다
하지만 이것을 수동적으로 override(오버라이딩)할 수 있습니다
어떻게 하는지 보여드리겠습니다
그 다음에는 원하는 색상으로 직접 바꾸어 보시기 바랍니다
색상은 textColor, color...
그냥 Color.Black을 쓰겠습니다
그 다음은 강조 표시 혹은 강조 표시 취소돈 테두리 색상과 커서 색상입니다
모두 검은색을 사용하겠습니다
이 방식의 검은색을 쓰셔도 되고
ColorResource를 쓰셔도 되는데, 이러면 리소스를 원하는 것으로 직접 사용하거나
Override(오버라이딩)하기 더 용이해집니다
원하는 색상을 사용하시면 됩니다
미리 정의된 색상을 쓰는 방식이고, 우리가 정의한 색상을 쓰는 방식입니다
Res.Values.Color을 사용합니다
여기서 가져오는 게 맞을 겁니다
네
이렇게 override(오버라이딩)할 수 있습니다
항목에 강조 표시를 줄 때 테두리 색상을 정하는 것인데
즉 여기를 클릭하면 강조 표시가 검은색으로 보이게 됩니다
그런데 이것을 바꿀수 있다는 것입니다
예를 들어 강조 표시를 빨간색으로 해 봅시다
또 강조 표시가 취소되면 파란색으로 해 보겠습니다
좋습니다
이런 식으로 여러 가지를 시도해 보실 수 있습니다
이 경우에는 Preview를 가지는 의미가 없으므로
Preview에 Composable을 더해서 fun WishTestFieldPrev
이렇게 이름을 짓겠습니다
여기서는 WishTextField의 label을 text로 가집니다
Value도 text이고 onValueChanged는 아무 작업도 하지 않습니다
이렇게 하면 그냥 preview(프리뷰)를 보여 줍니다
바로 이렇게 말입니다
여전히 오류가 있다고 합니다
OutlinedTextField인데요
한번 봅시다
이 Text가 적절한 옵션일까요?
여기 있는 Text를 지우고 한 번 보겠습니다
위쪽의 imports를 확인해서 어떻게 만족할 수 있는지 봅시다
여기에서는 Material을 쓰겠습니다
Material 3가 아닌 버전입니다
이 옵션을 선택하겠습니다
Material 3를 사용하는 OutlinedTextField가 오류를 발생시키는 것 같습니다
그러므로 OutlinedTextField를 다시 import로 가져오고 기존 Material 버전을 쓰겠습니다
Material 3 버전이 아닙니다
여기 material.OutlinedTextField가 있고 Defaults도 있습니다
이제 됐습니다
네
이렇게 하면 WishTextField 디자인이 완료되었습니다
이 빌드를 새로고침해서 이 WishTextField의 preview(프리뷰)를 좀더 설정하겠습니다
테두리 쪽의 text 부분이 보입니다
화면이 잘 움직여지지 않네요
됐습니다
여기에 Text라고 하는 것이 보입니다
네
즉 텍스트 필드 preview(프리뷰)는 현재 이렇게 보입니다
여기에 몇 가지를 더해서 Scaffold가 표시할 수 있도록 하겠습니다
그러나 그 전에 ViewModel에 디테일을 pass(전달)할 수 있도록 준비작업이 필요합니다
이렇게 해야 state(상태)를 WishTitle의 값으로 전달할 수 있게 됩니다
오늘 영상은 여기까지입니다
다음 영상에서는
ViewModel 설정 작업을 하겠습니다