리스트를 보여주는 방법은 두가지가 있다.
1. 일반 텍스트만 리스트로 보여주는 '리스트뷰' 콤포넌트를 이용
2. 작은 이미지와 함께, 타이틀과 내용을 구분할 수 있는 '리스트뷰 이미지 앤드 텍스트'를 이용
이번 시간에는 두번째 방법인 리스트뷰 이미지 앤드 텍스트를 사용하는 방법을 소개해보려고한다. 이름이 길어 복잡해보이지만, 말 그대로 '리스트로 보여주는 이미지와 글자' 라는 뜻이다. 이 블록을 사용하면 아래와 같은 리스트를 만들어낼 수 있다.
이제부터 기본적인 부분에 집중해서 찬찬히 살펴보자.
왼쪽에 작은 이미지들은 image라는 항목으로 설정된 부분이고
날짜부분은 title로 잡히는 부분이며
일기내용은 subtitle로 설정된 부분이다.
1 단 계 - 리 스 트 3 개 준 비
이 콤포넌트를 사용하려면 일단 3개의 리스트가 필요하다.
1.이미지리스트 2.타이틀리스트 3.서브타이틀리스트
일단 간단하게 컴마로 구분되는 리스트로 3개를 만들었다. 각각 10개의 항목이 들어가있다. 이미지는 아래의 png 이미지들을 1 2 3 4로 이름지어 assets에 넣었다.
이미지 리스트
1.png,2.png,3.png,4.png,1.png,2.png,3.png,4.png,1.png,2.png
타이틀 리스트
타이틀1,타이틀2,타이틀3,타이틀4,타이틀5,타이틀6,타이틀7,타이틀8,타이틀9,타이틀10
서브타이틀 리스트
섭타이틀내용1,섭타이틀내용2,섭타이틀내용3,섭타이틀내용4,섭타이틀내용5,섭타이틀내용6,섭타이틀내용7,섭타이틀내용8,섭타이틀내용9,섭타이틀내용10
2 단 계 - 버 튼 1 블 록
버튼1을 눌렀을 때 이 리스트를 띄우기 위해 버튼1을 눌렀을 때 블록을 가져다 놓는다. (버튼2도 좋고, 이미지를 눌렀을 때, 스크린1이 띄워질 때 등등 어떤 것도 좋다. 설명을 위해 가장 기본적인 블록을 사용한 것이다.)
3 단 계 - 리 스 트 클 리 어 블 록
리스트를 지워주는 블록을 넣어준다. 리스트를 보여줘야하는 데 왜 지우는 블록을 먼저 넣냐는 의문이 들었다면 칭찬의 박수를 드립니다. 이 블록을 끼워두지 않으면 앞으로 버튼1을 누를 때마다 똑같은 리스트가 누적되어 보여진다. 이를 방지하기 위함이다.
4 단 계 - for each 블 록
그 다음으로는 for each 블록을 넣는다. 처음에 준비한 3개의 리스트들을 하나하나씩 리스트틀에 넣는 과정이다.
5 단 계 - 조 합 하 면 완 성 !
완성된 블록은 다음과 같다.
이제 리스트 보이기라는 버튼1을 누르면 아래와 같은 리스트가 나온다.
리스트의 내용을 다양화하고, 이미지, 폰트들을 원하는 대로 바꾸면 훨씬 멋진 디자인의 리스트를 만들 수 있을 것이다.
댓글