돌아오신 것을 환영합니다
전 영상에서 이 recipeScreen을 준비했습니다만 카테고리를 아직 표시하지 않았습니다
우리는 준비가 되지 않았었습니다
그렇기에 새로운 composable을 생성했습니다
따라서 하나의 composable은 표시할 카테고리가 필요한 categoryScreen을
관리하게 됩니다
그래서 이것은 카테고리 리스트가 될 것입니다
그래서 categories를 작성후 list에 category를 부등호 안에 작성합니다
그리서 우리의 카테고리 클래스는 앞서 생성한 데이터 클래스를 말입니다
그래서 이 categoryScreen은 무언가를 표시하기 위해 해당 항목이 있어야 하기 때문에 데이터를
어디서 가져오는 지는 상관하지 않습니다
이것은 바로 mainViewModel이 처리하는 내용입니다
이제 LazyVerticalGrid라고 불리는 것을 표시합니다
이는 여기에 보이는 동작을 제공합니다
이것은 리스트가 아닙니다
이것은 두 개의 항목이 나란히 있는 것이 아니라 listView 또는 LazyColumn도 아닙니다
예를 들면
이는 lazyGridView이거나 VerticalGrid입니다
같은 것들이긴 하지만 항목들을 격자무늬 형식으로 둘 수 있게 해줍니다
몇 개의 column으로 설정할 지 정할수 있고 스크롤이 가능해지기에
많은 항목들을 넣을 수 있습니다
따라서 LazyVerticalGrid를 정의하는 방법은 여러가지가 있습니다
제가 사용할 방식은
GridCells.fixed에다가
다른 여러 방식들이 있지만 (count:2)를
적어주고
가로 전체를 채울 것입니다
그러니 modifier - modifier.fillMaxSize를 입력합니다
maxsize로 전체 화면을 채울 것입니다
그러나 lazyVerticalGrid는 컨텐츠가 필요합니다
그러니 컨텐츠로 항목의 리스트가 될 것입니다
그 항목들은 viewState로부터 오며 여러 다른 카테고리를 포함합니다
이제 각 항목이 어떻게 생겼는지 작성해야 합니다
따라서 또 다른 composable을 만들어 보겠습니다.
따라서 이 composable은 각 항목의 디자인을 관리합니다
fun CategoryItem을 작성해줍니다
카테고리를 연결해줍니다
그리고 카테고리에는 해당 ID, 카테고리 이름, 이미지 및
설명에 대한 정보가 포함됩니다.
좋습니다
이제 각 항목에 전달되어 해당 항목을 표시할 카테고리 객체를
사용할 수 있습니다
column에 modifier가 있어야 함을 정의할 column 안에 표시하겠습니다
이는 modifier.padding(8.dp)에다가
.fillMaxSize로 작성해줍니다
그러면 요구되는 전체 크기로 형태를 취할 것입니다
그리고 또한 가로로 가운데 정렬을 하고 싶스빈다
그러니 여기 hrizontalAlignment에 = alignment.CenterHorizontally를 작성해 줍니다
다음 줄에 작성해 줍니다
이것이 제가 column으로 전달할 매개변수입니다
그러나 이제 이 column안에 무엇을 표시하면 좋겠습니까?
text를 표시 해야겠습니다
그래서 텍스트는 여러 매개변수를 가질 수 있는데,
하나는 category.strcategory에 다른 하나는 색입니다
색이 검정색으로 설정하겠습니다
color = color.Black을 작성해줍니다
그런 다음 텍스트에 특정 스타일을 부여하고 싶습니다 textStyle을 작성합니다
글꼴 두깨인 fontweight를 작성합니다 그리고 ID가 도움이 되기에 textstyle을 import합니다
저는 compose 버전을 사용하고자 합니다 그리고 fontweight를 bold로 설정합니다
fontweight = fontweight.bold입니다
이제 잠시 후 코드와 modify에 대해서 다룰 예정입니다
padding이 필요한 것 같습니다
modifier = modifier.pad를 검색해서 작성해 줍시다
padding은 윗 부분쪽에 조금 필요합니다
에러가 사라지도록 여기에 쉼표를 추가해 줍니다
기본적으로 지금까지 만든 것은 표시될 텍스트가 있다는 것입니다
그리고 이는 여기 사진의 텍스트가 되겟습니다
따라서 각 카테고리 항목에는 이미지가 있고 텍스트가 짜여져 있습니다
그래서 이를 가지고 텍스트를 표시하고 있습니다
윗 부분에 작은 빈 공간이 필요하다고 말하고 있고
특정 글꼴 두깨를 가져야 한다고 합니다
그러니 bold로 설정하고
그리고 텍스트의 색은 검정이어야 하며 텍스트 자체는
그래서 컨텐츠가 category.strCategory에 기반해야 한다고 말하는 것입니다
따라서 기본적으로 카테고리 클래스를 보면 strCategory 입니다
간단하게 말하면 이는 카테고리의 명칭입니다
지금까지 텍스트에 관한 이야기였습니다
이제 이미지로 넘어가 봅시다
column에서 이미지는 어떻게 보여야 하겠습니까?
즉, 항목들이 서로의 위에 배치된다는 말입니다
So here I'm just going to say let's use image.
여기에 image를 작성합니다
그리고
이미지에는 여러가지 선택지가 있습니다
저는 이번엔 composable function을 사용해 볼 것입니다
이제 이 이미지에는 painter가 필요하기에 이미지가 어떤 모습이어야 하는지 알아야 합니다
그래서 콘텐츠는 이미지를 paint해야하는데
어디서 가져오겠습니까?
우리는 그것을 Async Painter를 통해서 로드할 수 있습니다
그리고 어디서 그 데이터를 가져오냐하면
category.strCategoryThumb으로부터 가져옵니다
그래서 이는 기본적으로 이미지의 컨텐츠입니다 So this is basically the content of the image.
이는 이미지가 무엇을 표시해야 하는 가에 대한 것이고
그리고 이는 우리에게 해당 이미지를 비동기적으로 가져다 줄 것입니다
보시다시피
io.coil-kt: coil-compose를 사용하고 있습니다
잠시만 기다려주세요
창을 잘 보이게 옮기겠습니다
저희는 io.coil-kt: coil-compose2.4@aar(classesjar)을 사용하고 있습니다
따라서 여기 있는 이 function 또는 composable은 우리가 추가한 것입니다
This line here. 보이시는 이 줄을 통해서 말입니다
We said okay. 저희는 이 코드를 통해
모든 오버헤드, 인터넷에서 이미지를 로드할 때 발생하는 모든 복잡한 작업을 처리하도록 합니다
여기 이 implementation을 통해 간단한 한 줄로 쉽게 해결할 수 있습니다
따라서 인터넷에서 이미지 파일을 비동기적으로 로딩하고 imagePainter를 비동기적으로 반환합니다
그렇게 하면 Image composable의 painter 속성 안에 전
달할 수 있습니다
이제 이 이미지에는 몇 가지 추가 정보가 필요합니다만 여기를 보시면
이미지가 어디 있는지 알려주는 URL이 있고 이것이 모든 것을 처리해주기 때문에
비동기 함수를 설정할 필요가 없습니다
이미 다 알아서 끝나 있는 상태인 것입니다
놀랍지 않습니까?
말도 안 되는 것입니다
그런 다음 컨텐츠 설명이 필요합니다
저는 컨텐츠 설명이 없을 거라고
설정할 것이며 이미지가 어떤 모습일지 modify할 수 있습니다
그래서 modifier = modifier.fillMaxSize를 작성해줍니다
사용 가능한 전체 크기에 따라 형태를 취할 것입니다
그런 다음 저는 aspectRatio(1)을 사용할 것입니다
aspect ratio를 1로 사용한다는 것은 우리가 사용하는 이미지가 세로 길이 만큼 가로 길이도
1:1로 맞춘다는
의미입니다
이것이 바로 categoryItem이 어떤 모습일 지를 보여드린 것입니다
이제 제가 하고 싶은 것은 저에게 표시할 개별 항목을 주게 되는 lazyGridScope를
이 lazyVerticalGrid 안에서 얻는 것이며 그걸 위해서 items(categories)를 작성합니다
그래서 categories를 item으로서 전달하는 것이고 categories: list에 category를 부등호 안에 작성해 줍시다
이를 위해 extension function lazyGridScope items를 import하는 것입니다
이렇게 하면 우리가 categories를 가져올 수 있게 해줍니다
it: Category가 보입니다
이 lazyGridItemScope를 얻지만 it: category도 마찬가지 입니다
이제 category에 -〉를 입력하고 categoryItem(category = catergory)를
작성해줍니다
(추임새)
그래서 기본적으로 개별적인 항목이 어떤 모습이어야 하는지 준비했고
각 categoryItem은 category를 필요로 합니다 왜냐하면 어떤 데이터를 표시해야 하는지를 알아야 하기 때문입니다
그러면 Then.
이 list categories는 여러 개별적인 categoryItem을 포함합니다
여러분의 카테고리 리스트에 이용가능한 모든 categoryItem 새로운 categoryItem에
전달합니다
그러면 lazyVerticalGrid 안에, 두개의 column이 있고 그 안에 카테고리들을 넣어서
스크린에 표시합니다
So now where do we want to display category screen?
우리가 만들었던 else block 안에 넣습니다 Well, inside of our else block.
여기서 우리는 전달해야 합니다
무엇이겠습니까?
카테고리입니다
우리는 category의 리스트를 전달해야 합니다
그래서 어디에서 이 리스트를 가져와야 하겠습니까?
catgories 값을 설정해야하기 때문에
viewState로부터 가져오면 되는데 그 이유는 앞서 설정한 viewState가 categoriesState의
유형이기 때문입니다
그리고 이 categorieState는
우리가 인터넷으로 부터 로딩한 모든 카테고리의 항목을 포함합니다
그래서 http 응답에 대한 인터넷 응답인
요청 응답은 카테고리들을 포함합니다
이제 우리는 그 viewState.list를 사용합니다
보시면
이제
recipeState로부터 오는 category의 리스트인 이 viewState.list를 얻습니다
그러고 나서
그것을 표시할 수 있습니다
이제 모든 것들을 설정했으니, main activity로 가봅시다
여기 greeting Composables를 다 삭제 하겠습니다
대신에 우리의 recipeScreen을 표시해봅시다
그러면 이제 우리 프로그램이 꺼지고 멈추는 것을 확인할 수 있습니다
이는 인터넷에 액세스하려 했지만 실제로 액세스를 요청한 적이 없기
때문입니다
간단하게 말하면 우리의 AndroidManifest에서 인터넷을 쓰고 싶다고 전달해야 합니다
그리고 그것이 바로 다음 영상에서 우리가 하게 될 작업입니다
자 그래서 우리는 우리의 앱을 실행하고 우리가 오늘 노력한 결과물을 볼 수 있는
단계에 아주 아주 가깝습니다
오늘 하루는 길었습니다
많은 일들이 일어나고 있다는 걸 압니다
아주 많은 새로운 개념들을 배웠고 이 개념들은 꽤나 복잡합니다만 결승선에 너무나도 가깝습니다
다음 강의에서 뵙겠습니다