돌아오신 것을 환영합니다
이제 탐색하는 법을 배웠으니 레시피 애플리케이션으로 돌아가겠습니다
카테고리별 상세 화면을 만들 것인데
기억하시듯이 애플리케이션에 다른 카테고리들이 있었습니다
그 중 하나를 클릭하면 상세 화면으로 이동하게 할 것인데
상세 화면은 이런 식으로 만들 것입니다
위에 제목이 있고
카테고리의 이미지가 있으며
그 밑에는 텍스트가 있는데
이 텍스트는 스크롤 할 수 있게 하겠습니다
즉 이는 스크롤 할 수 있는 텍스트이고
이번 강의에서 모두 설정하겠습니다
레시피 애플리케이션으로 가서 새 Kotlin 클래스를 이 폴더에
만들겠습니다
클래스가 아니라
사실 파일인데 CategoryDetailScreen이라고 하겠습니다
좋습니다
컴포저블을 만드는데 CategoryDetailScreen이며
카테고리가 필요합니다
그렇지 않으면 동작하게 만들 수 없기 때문입니다
어떤 카테고리를 보여줄 지 알아야 합니다
이제 컬럼을 사용합니다
좋습니다
이 컬럼에 제어자가 필요한데
modifier = Modifier.fillMaxSize라고 하겠습니다
이 전에 봤던 것입니다
그리고 padding입니다
16dp의 padding이고 import하겠습니다
이제 내용이 무엇인가요
그 전에 이 컬럼의 내용을 정렬하겠습니다
다른 매개 변수를 추가하는데 콤마 기호를 이용해야 하고
horizontalAlignment는 Alignment.CenterHorizontally로 하는데
모두 가운데 정렬하는 것입니다
이제 이 안에 제목이 될 Text를 만드는데
text는 category.strCategory가 되며
카테고리 스트링입니다
텍스트를 가운데 정렬할 것이므로
textAlign인데
추천이 안됩니다 Text를 import하지 않으면 편집기가 도와주지
않습니다 이제 textAlign이
있습니다
이제 TextAlign.Center를 사용합니다
이렇게 텍스트를 정렬했습니다
이 속성이 담당합니다
그리고 이미지를 보여주겠습니다
기억 하시는 것처럼
Image부터 import
하는데
composable입니다
painter가 필요합니다
훌륭한 점은 이 것을 이용할 수 있는 것인데
AsyncImagePainter를 기억하십니까
ReceipeScreen에서
사용했습니다
수직의 CategoryItem이 있고
여기 있습니다
여기 Image가 있는데 그냥 복사하겠습니다
이 카테고리 스트링인 CategoryThumb가 이 변수 혹은 매개 변수인데 웹에서 가져옵니다
로딩해서 이미지를 보여줍니다
여기에 붙여 넣겠습니다
거의 동일하게 사용하는데
contentDescription에는
조금 더 추가할 수 있겠습니다
$category.strCategory라고 해서 글을 못 읽거나
시력에 문제가 있는 사람도 이 것이 무엇인지 알 수 있게 합니다
제어자는 이번에는 fillMaxSize를 사용하지 않겠습니다
wrapContentSize라고 하겠습니다
이렇게 하면 필요한 만큼의 공간만 차지할 것입니다
좋습니다
스스로를 감쌀 것입니다
그 아래로 스크롤 할 수 있는 텍스트가 있습니다
텍스트를 스크롤 할 수 있는 기능은 어떻게 만들 수 있을까요
우선 text속성을 할당하는데 category.strCategoryDescription입니다
상당히 길 것이므로
textAlign을 사용하겠습니다
이 번에는 TextAlign.Justify로 하겠습니다
TextAlign.Justify가 하는 일은
마우스를 올려보면 부드러운 줄 바꿈을 하는 텍스트의 선을 늘여서 컨테이너의
가로를 채우고
거친 줄 바꿈을 하는 선은 시작 가장자리를 향해 정렬합니다
기본적으로 텍스트가 적절히 퍼지고 적절히 정렬되게 하는 것입니다
TextAlign이 제공하는 값들을 가지고 놀며 텍스트가 보이는 방식이 어느 것이
가장
마음에 드는지 보시기 바랍니다
이는 우리가 변형할 속성 중 하나일 뿐입니다
하나가 더 있는데
textAlign이 있고
Text컴포저블의 내용인 텍스트 자체가 있는데
제어자를 사용합니다
Modifier.verticalScroll인데
상태를 넘겨 주어야 하는데
rememberScrollState를 넘기겠습니다
화면 안에 표시하기에는 텍스트가 너무 많으면 스크롤 할 수 있게
해줍니다
그러니까 이 이미지와 이 위의 텍스트는 항상 고정이어서
전체 페이지를 스크롤 하거나 스와이프하지 않고
이 텍스트 영역만 스크롤할 것입니다
아래의 이 텍스트 영역말입니다
그 안을 스크롤 할 수 있습니다
이 것을 이 코드를 통해 만들었는데 정확히는 이 verticalScroll입니다
그리고 상태인데 UI를 작업할 때 스크롤이 어떤 상태 인지를 알아야
올바르게 보여줄 수 있습니다
그 것을 이 rememberScrollState가 담당합니다
이제 시작입니다
이 강의는 카테고리 상세 화면을 만들었기 때문에 이 것으로 충분할 것 같습니다
이제 그 화면으로 이동할 방법이 필요하며
다음 강의에서 다뤄보겠습니다
다음 강의에서 뵙겠습니다