다시 오신 것을 환영합니다
이번 영상에서 각각의 항목이 LazyColumn에서 어떻게 보일지
디자인할 것입니다
리스트 안에서 어떻게 보일지를 의미합니다. 여기 텍스트 하나, 또 다른 텍스트 그리고 두 개의 버튼이 보입니다
아이콘으로 표시되어 있습니다
우리가 달성하려는 UI입니다
이를 위해 ShoppingList.kt 파일로 이동합니다
그리고 쇼핑 목록 앱 밖에서 composable(컴포저블)을 하나 더 생성합니다 즉, 여기 맨
아래입니다
이제 쇼핑 목록 앱을 닫으면
제 경우에는 줄 번호 115입니다
여러분의 줄 번호가 다소 다를 것입니다
여기에 무엇을 넣을까요?
컴포저블을 넣을 것입니다
우리만의 컴포저블을 만들 것입니다
쇼핑 목록 아이템이 어떻게 생겨야 할지 디자인하는 것입니다
이러한 쇼핑 목록 아이템 객체에 통과하려는 세부 사항이 무엇이 있을까요?
한번 살펴보겠습니다
먼저 쇼핑 항목 자체를 통과해야 합니다 이를 통해 이름과
수량을 알 수 있습니다
그런 다음 버튼을 클릭하면 발생할 것을 통과시켜야 합니다
즉, 수정 버튼과 삭제 버튼을 클릭할 때를 의미합니다
이제 이를 모두 쇼핑 목록 아이템에 통과시키겠습니다
중괄호({})를 입력하여 오류를 없애고 먼저 추가할
item 유형은 ShoppingItem입니다
두 번째는 onEditClick이고 1 또는 0 파라미터를 포함하고 Unit을 출력합니다
그리고 onDeleteClick도 동일하게 설정합니다
여기에 lambda(람다) 함수가 있습니다
이 역시 람다 함수입니다
람다 함수는 Edit 액션이 작동되면 실행됩니다
이 쇼핑 목록 아이템 특정입니다
여기에는 파라미터가 들어가지 않고 값을 출력하지도 않습니다
다시 말하자면 함수를 통과시키는 것인데
onEditClick이 파라미터가 되는 것입니다
빈 또는 매우 간단한 람다 함수 표현을 사용하는 것입니다
람다 함수는 기본적으로 매우 짧은 형식의 함수로 수정을 하여
코드를 덜 사용할 수 있습니다
이를 통해 함수의 파라미터로 함수를 받아 들이도록 만드는
것입니다
이제 onEditClick 위치에서 ShoppingListItem에 함수를 통과시킬 수 있고
함수 또는 파라미터가 필요 없으며 출력 값도 없을 것입니다
이것이 이 Unit의 역할입니다
다시 말하자면 이 위치에서 코드를 실행할 수 있다는 의미입니다
이것을 어디에서 또 봤나요?
이와 동일하게 보지는 않았으나
onClick을 사용할 때마다 보았습니다
따라서 여러 구역에서 이를 보았습니다
예를 들어 여기 onClick의 경우 동일하게 나와있습니다
괄호 그리고 또 람다
그리고 대시 기호(-) 화살표 그리고 Unit입니다
즉
여기 이것이 onClick이 클릭될 때 실행될 코드를 의미합니다
이것이 전부입니다
즉, 지금까지 계속 사용했던 것이나 onClick을 직접 만든 적이 없었던
것뿐입니다
이것이 여기에서 발생하는 것입니다
우리만의 onClick을 만들어서 이 함수를 부를 때 발생할 것을 설정하는 것입니다
따라서 이 함수를 부르면 함수에 직접 코드를 통과시키므로
함수를 부르면 이 코드가 실행되는 것입니다
매우 강력하고 이해하기 약간 복잡할 수 있으나 몇 번 사용하다 보면
점점 더 자연스러워질 것입니다
이처럼 상당히 멋집니다
이것의 대략적인 역할입니다
이제 ShoppingListItem에 넣을 내용이 무엇일까요?
모든 것을 Row(로우)에 넣는 것이 좋을 것 같습니다 보시면 모두
서로 옆에 있기 때문입니다
항목이 서로 옆에 있는 경우 로우를 사용하고 항목이 하나 하나
가로로 있다면 로우를 사용하고
세로로 있다면 Column을 사용합니다
이 로우가
어떻게 행동할지 정의합니다
modifier(제어자)를 사용하여 약간의 padding(패딩)을 추가합니다
8 픽셀 밀도 정도를 넣겠습니다
그리고 전체 너비를 채우기 위해
fillMaxWidth를 넣고 border(경계선)를 추가합니다
이 경계선의 모양을 어떨까요?
border에는 BorderStroke과 모양이 필요합니다
여기 위에 마우스 커서를 올리면 너비, 브러시, 모양이 있고
경계선을 다양하게 설정할 수 있습니다
border를 입력하고 유형은 BorderStroke
입니다
이를 위해 BorderStroke를 입력하여 무엇이 나오는지 봅니다
이도 기본적으로 또 컴포저블입니다 보시다시피 composefoundation 하에 있습니다
BorderStorke은 기본적으로 선을 의미합니다
BorderStroke는 선이고
여기에 너비를 통과시킵니다
너비를 2 픽셀 밀도로 지정합니다
그리고 색상을 통과해야 합니다
모든 종류의 색상을 사용할 수 있습니다
이를 위해 color.black, white, blue 등 모두 가능합니다
또는 여러분이 원하는 다른 색상을 넣을 수 있습니다
그러나 이를 하려면 16진법 값을 넣어야 합니다
F018786 같은 것을 예로 넣을 수 있습니다
이 색상이 왼쪽에서 보이는 색상이이며 청록색입니다
여기 테두리에 보이는 색상입니다
이해하셨나요?
이 값을 조절하여 경계선을 수정할 수 있습니다
이것이 우리의 경계선입니다
또한 모양도 정의할 수 있습니다
따라서 경계선의 모양이 각졌거나 둥글게 되어 있도록 정할 수 있습니다
저는 둥글게 만들어 보겠습니다
이를 위해 RoundedCornerShape를 사용할 수 있습니다
이해하셨나요?
이 둥근 모서리를 위해 퍼센트를 입력하면 됩니다
다양한 옵션이 있습니다
크기와 픽셀 밀도, CornerSize 등
이 함수에 대한 다양한 override(오버라이딩) 옵션이 있습니다
저는 20%를 사용하겠습니다 여기 보이는 정도의 둥근 모서리가
나올 것입니다
좋습니다
지금은 아무런 내용이 없습니다
일단 아무 내용을 넣어 제대로 작동하는지 확인합니다
text는 item.name으로 하고
제어자로 약간의 패딩을 넣을 것입니다
modifier.padding을 입력하고 8 픽셀 밀도로 지정합니다
여기에서 8 픽셀 밀도를 자주 사용하는데
사용하는 아주 기본적인 숫자입니다
아이템 위치를 정할 때 보통 8 픽셀 밀도 정도로 지정합니다
옆에는 보통 8 또는 16 픽셀 밀도로 지정합니다
일단 ShoppingListItem을 어플리케이션 밖에서 잠시 사용해 보겠습니다
LazyColumn 안에서 사용하는 것입니다
이제 이 ShoppingListItem을 사용하고
그리고
이것을
쇼핑 항목을 통과 시킵니다
따라서 it 그리고 따옴표를 입력하고 빈 괄호를
입력합니다
즉, onEditClick과 onDeleteClick입니다
onEdit에는 아무것도 하지 않고 onDeleteClick에도 아무것도 하지 않는 것입니다
여기서는 ShoppingListItem을 it으로 표시합니다
여기서 it는 sItems에서 보이는
현재 항목
목록입니다
즉, 목록에 있는 항목 목록을 의미합니다
이제 이 코드를 실행하고 목록 하나를 빠르게 만들어 보겠습니다
나머지는 다음 영상에서 디자인할 것입니다
이번 영상에서는 설명할 것이 많았기 때문입니다
예를 들어 이 람다 관련 내용도 상당히 어려웠습니다
이제 항목을 만들어 보겠습니다
새로운 키보드가 필요하다고 하고 하나를 구매하려고 합니다
이제 Add를 클릭하면 키보드가 항목으로 추가된 것이 보입니다
아직 수량은 없습니다
아직 버튼이 없기 때문입니다
아직 버튼도 없습니다
일단은 이것이 사용자 인터페이스입니다
이제 다른 항목을 추가하기 위해 마우스라고 입력하고 Add를 클릭합니다
여기 마우스도 보입니다
이게 여기까지 완성됐습니다
이제 다음 영상으로 가서 각각의 항목을 추가하겠습니다
여러분이 혼자 시도해 보셔도 좋고 수량은 여러분 스스로 설정해도 좋습니다
스스로 해보시기를 권장합니다
따라서 이 로우에 다른 속성을 추가하는 연습 문제를 해보겠습니다