돌아오신 것을 환영합니다
이 영상에서는 Wishlist(위시리스트) 항목을 추가해 보겠습니다
다른 navigation(탐색) 작업 이전에 이 항목의 외형을 먼저 설정한 후에
Wishlist(위시리스트) 항목에 and add(추가)와 edit detail(디테일 수정) 화면을 더하겠습니다만
그 전에 일단 항목의 외형에 집중해 보겠습니다
HomeView 안에 이 항목을 만들어 보겠습니다
이 부분은 Composable(컴포저블)로서 각 항목의 외형에 대한
Prototype(프로토타입)이 됩니다
여기에서 pass(전달)할 내용은 Wish와 onClick 이벤트입니다
여기에 OnClick을 추가하고 아무 작업도 하지 않도록
아무것도 반환하지 않겠습니다
즉 pass(전달)한 내용이 무엇이든지 그대로 그 코드를 실행하는 것입니다
이 Wish는 무엇일까요?
각 항목의 외형에 대한 정보를 포함한 data class(데이터 클래스)를 생성해야 하므로
Wish를 먼저 설정해 주겠습니다
먼저 새 폴더를 만들겠습니다
Package를 선택합니다
이름은 data로 짓겠습니다
이렇게 data로 했습니다
이 data 패키지 안에는 새 클래스를 만들겠습니다
data class(데이터 클래스)입니다
이름은 Wish로 하겠습니다
이 data class(데이터 클래스)가 Wishlist(위시리스트) 항목인 Wish의 외형을 설정합니다
즉 항목의 property(속성) 등입니다
이대로 이후 데이터베이스 안에 저장할 것이므로 중요한 내용입니다
그리고 데이터베이스에 저장할 수 있도록 데이터 유형을 변환해 주는 강력한 도구인
DAO를 사용해 보겠습니다
이제 data class(데이터 클래스)를 만들었습니다
이 Wish는 말씀드린 대로 property(속성) 몇 개를 가지고 있습니다
하나는 id로, 유형은 Long으로 설정하고 초기 상태에서는
첫 값으로 0을 받도록 하겠습니다
그리고 title을 받되 유형은 string이고 초기 상태에서는 비워 두겠습니다
마지막으로 description도 string 유형으로 초기 상태에는 비워 두겠습니다
됐습니다
애플리케이션의 최종 모습에서 기억하시겠지만 여기에는 ID가 있어서
보고 있는 항목이 무엇인지 알려줍니다
무엇을 보고 있는지 알려주고
제목과 설명 또한 포함되어 있습니다
이 모든 것을 각 Wishlist(위시리스트) 항목에 포함시키겠습니다
이것이 Wish의 구조입니다
WishItem을 사용할 때마다 어떤 Wish 항목인지 알 필요가 있습니다
또한 항목을 클릭하면 세부사항에 대한 화면을 탐색해야 합니다
일단은 Wish 항목의 외형을 설정하는 작업을 계속하겠습니다
Card를 사용하겠습니다
이 Card는 composable(컴포저블)로
여기 보이는 이것인데, 이 composable(컴포저블)로 elevation(그림자 효과)를 추가할 수 있고
여기 보이는 대로 외형을 멋지게 설정하도록 도와줍니다
그래서 이 Card에 디테일을 몇 가지 추가하겠습니다
예를 들면 modifier(속성자)입니다
형식을 좀 더하기 위해 fillMaxWidth로
사용 가능한 최대 가로 길이를 쓰겠습니다
다만 상단에 padding(패딩)을 8픽셀 밀도 정도로 설정하고
Start, 즉 왼쪽에도 8픽셀 밀도를 추가하겠습니다
그리고 end는 오른쪽입니다
이 세 부분에는 패딩을 더하되 하단에는 추가하지 않겠습니다
이렇게 end에도 8픽셀 밀도를 추가해야 이렇게 이중으로 간격이 생기지 않으므로
이렇게 추가를 하겠습니다
이것이 이 modifier(속성자)에 대한 padding(패딩)입니다
그리고 이 Card를 클릭할 수 있게 해야 하므로
이 modifier(속성자)에 clickable을 추가하면 됩니다
여기 Modifier.fillMaxWidth도 있고 padding.clickable도 있는 것입니다
이 .clickable에는 클릭 시 수행할 작업을 추가하겠습니다
여기에는 WishItem으로 pass(전달)하는 onClick 메소드를 실행하도록 하겠습니다
즉 Wishlist(위시리스트) 항목을 생성할 때 function(함수)를 하나 pass(전달)하는데
이 함수는 Card를 디자인으로 삼는 WishItem을 클릭할 때 실행됩니다
여기에 어떤 디테일 요소를 또 pass(전달)할 수 있을까요?
여기에 더할 내용은
여기에 onClick이 있으므로
여기도 여전히 Card에 해당하는 내용입니다
여기에 clickable에 더해서
여기 elevation(그림자 효과)를 추가해서 10픽셀 밀도로 설정하겠습니다
마지막으로 배경 색상을 흰색으로 하기 위해
여기에 .White로 설정을 하겠습니다
이제 배경색을 위한 backgroundColor도 끝났습니다
흰색으로 설정했습니다
여기에 정의한 내용도 이와 같습니다
이제 content(내용)으로는 무엇을 설정할까요?
보이는 대로 이것은 두 item(항목)이 쌓여 있는 형태입니다
그러므로 column(컬럼)을 사용하겠습니다
텍스트와 텍스트, 이렇게 두 개가 있는데
첫 번째 텍스트만 볼드 처리가 되어 있습니다
이 작업은 어떻게 하면 될까요?
여기에 Column을 추가해서 modifier(속성자)를 위해 Modifier.을 쓰고
모든 방향으로 padding(패딩)이 조금 들어가 있으므로
여기 Column을 먼저 import로 불러와서 오류를 없애겠습니다
여기서는 composable(컴포저블) 버전을 사용하겠습니다
그리고 Column에 content(내용)이 필요하므로
이 내용을 텍스트로 가져오겠습니다
첫 텍스트는 wish.title이 되고, fontweight는 FontWeight
.Extrabold입니다
이 FontWeight.Extrabold로 볼드 처리를 하는 것입니다
첫 번째 텍스트는 끝났고, 다음 텍스트는
따로 fontWeight를 추가할 필요는 없고, text는 description이 됩니다
이 wish는 기억하시겠지만 여기 있는 data class(데이터 클래스) wish에서 pass(전달)하는 것으로
title과 description을 포함합니다
그러므로 특정 항목으로 pass(전달)하는 Wish는 모두
이 부분이 되며, 전달하는 내용이 바로
여기 보이는 title과 description이 됩니다
그리고 클릭할 때마다 수행할 작업이 있습니다
이 WishItem으로 전달하는 것은 여기 보이듯 navigation(탐색) 이벤트인데
Edit(수정)이나 Update(수정 반영) 화면으로 넘어가도록 도와줍니다
하지만 여기에 사용자를 object(객체)로서 pass(전달)해야 하는데, 즉 데이터를 데이터베이스 등에서
가져와야 합니다
이것이 WishItem에 대한 내용입니다
LazyColumn에 이 Wishlist(위시리스트) 항목을 표시하는 작업은
가짜 데이터를 사용할 다음 영상에서 해 보겠습니다
다음 영상에서 뵙겠습니다