ArrayList, ArrayAdapter와 ListView - 2. ListView와 Adapter의 동작 살펴보기

이전 포스팅에서 언급했던 화면 크기 제약으로 일정 개수만 리스트뷰에 보여주게 되는 원리를 설명하려면   getView 메소드가 포함된 Custom Adapter를 구현해야 합니다.

이번 포스팅에선 동작을 설명하고 자세한 구현방법은 다음 포스팅에서 설명하도록 하겠습니다.

최종 업데이트 - 2018. 6. 30

ArrayList,  ArrayAdapter와 ListView - 1. 기본적인 사용 방법 http://webnautes.tistory.com/1190 ArrayList,  ArrayAdapter와 ListView - 2. ListView와 Adapter의 동작 살펴보기 ArrayList,  ArrayAdapter와 ListView - 3. Custom Adapter를 구현하는 방법(ViewHolder, getView ) http://webnautes.tistory.com/1201

LIstView는 수직으로 스크롤하며 데이터를 보여주는 UI(사용자 인터페이스) 위젯입니다.

줄(row) 단위로 데이터를 보여줍니다.

ListVIew에 보여지는 줄의 갯수는 안드로이드 폰의 화면 크기에 따라 다를 수 있습니다.

GenyMotion에서 화면 크기 1440x2880인 Google Pixel 2 XL를 생성하여 테스트를 진행했습니다.

관련 포스팅 Genymotion 설치 및 Android Studio와 연동하여 사용하는 방법 http://webnautes.tistory.com/1145

2-1. 처음 실행하면 Voca[0] ~ Voca[11] 까지 12개의 데이터가 ListView에 12개의 줄로 보여집니다.

정확하게 ListView의 크기에 맞추어 모든 줄의 내용을 보여주는 경우보다는 마지막 줄의 일부만 보여질 때가 많습니다.

ListView의 초기화면을 보여주기 위해 12개의 View가 새로 생성(created)되었습니다.

하나의 View에 하나의 ArrayList Voca의 데이터 값을 출력되며 ListView의 한 줄(row)로 화면에 보여지게 됩니다.

Voca[11]의 경우 일부만 보였지만 해당 줄을 보여주기 위한 View를 생성해줍니다.

tag 값은 뷰마다 부여되는 고유값으로 해당 뷰가 재사용되었을 경우 이전에 어떤 값을 출력하기 위해 사용되었던 뷰인지 확인해보기 위해 출력합니다.

06-30 13:03:53.875 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[0] row view is created, tag = 2b67694 06-30 13:03:53.931 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[1] row view is created, tag = a49c53d 06-30 13:03:53.948 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[2] row view is created, tag = 5afc132 06-30 13:03:53.957 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[3] row view is created, tag = 75eae83 06-30 13:03:53.986 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[4] row view is created, tag = 8ce6800 06-30 13:03:54.001 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[5] row view is created, tag = 3927839 06-30 13:03:54.015 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[6] row view is created, tag = b14be7e 06-30 13:03:54.079 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[7] row view is created, tag = d53afdf 06-30 13:03:54.095 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[8] row view is created, tag = 1b2042c 06-30 13:03:54.122 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[9] row view is created, tag = c195ef5 06-30 13:03:54.146 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[10] row view is created, tag = 83a448a 06-30 13:03:54.190 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[11] row view is created, tag = e6d6afb

2-2. 아래로 살짝 스크롤하여 Voca[0]이 ListView에서 안보이게 되기 전에 새로운 데이터인 Voca[12]가 보이도록 합니다.

ListVIew를 보면 줄(row)을 구분하기 위한 가로 줄이 보입니다. 이 줄을 살짝 넘어가게 아래로 스크롤하면 됩니다.

현재 Voca[0]이 완전히 화면에서 사라지기 직전이라서 재사용할 수 있는 View가 현재는 없습니다.

그래서 Voca[12]를 보여주기 위해 새로운 View가 생성됩니다.

현재 Voca[0]부터 Voca[12]까지 보여지고 있음을 ListView의 getFirstVisiblePosition() 메소드와 getLastVisiblePosition() 메소드로 확인할 수 있습니다.

06-30 13:05:00.750 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[12] row view is created, tag = f24e1a9 06-30 13:05:02.160 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@Changed: mListView.getFirstVisiblePosition()=0    mListView.getLastVisiblePosition()=12

2-3. Voca[0]과 Voca[1] 사이의 가로선이 안보일 정도로 아래로 스크롤 해줍니다.

현재 화면에 보이는 View는 Voca[1] ~ Voca[12]를 보여주기 위한 View임을 Logcat에서 확인할 수 있습니다.

Voca[0]을 보여주기 위해 사용되었던 View가 화면에서 완전히 안보이게 되었기 때문에 새로운 Voca 데이터를 보여줄 때 재사용될 거라는 것을 예상할 수 있습니다.

06-30 13:06:23.633 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@Changed: mListView.getFirstVisiblePosition()=1    mListView.getLastVisiblePosition()=12

2-4. Voca[13]이 살짝 보일 정도로 아래로 스크롤합니다. Voca[12] 아래쪽에 경계선이 살짝 보일 정도로 스크롤하면 됩니다.

Voca[13]은 view를 재사용(reused)하고 있음을 logcat에서 확인할 수 있습니다.

앞에서 출력되었던 로그와 비교해보면 현재 화면에 보이지 않는 Voca[0]을 화면에 보여주기 위해 사용되었던 view와 tag값이 일치하기 때문에 해당 view를 재사용했음을 알 수 있습니다.

현재 Voca[1] ~ Voca[13]이 ListView에 보이고 있음을 Logcat에서도 확인할 수 있습니다.

06-30 13:07:53.144 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[13] row view is reused, tag = 2b67694 06-30 13:07:54.277 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@Changed: mListView.getFirstVisiblePosition()=1    mListView.getLastVisiblePosition()=13

06-30 13:03:53.875 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[0] row view is created, tag = 2b67694

2-5. 이번엔 스크롤을 위로해서 Voca[0]이 살짝 보이도록 합니다.  그러면 아래쪽에 Voca[12]도 화면에 보이는 상태가 됩니다.

Voca[0]이 다시 화면에 보여지면서 View를 재사용했습니다.

화면에 보이는 뷰는 Voca[0] ~ Voca[12]를 위한 View이기 때문에 현재 보이지 않게된 Voca[13]을 보여주던 View를 재사용했을 거라고 짐작할 수 있습니다.

06-30 13:16:17.659 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[0] row view is reused, tag = 2b67694 06-30 13:16:19.597 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@Changed: mListView.getFirstVisiblePosition()=0    mListView.getLastVisiblePosition()=12

Voca[13]을 보여주기 위해 사용되었던 View의 tag값을 이전 로그에서 찾아보면 tag값이 일치함을 확인할 수 있습니다.

06-30 13:07:53.144 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[13] row view is reused, tag = 2b67694

첨에 Voca[0]이 사용했던 뷰의 tag값과도 일치합니다

06-30 13:03:53.875 2660-2660/com.tistory.webnautes.usearrayadapterwithlistview D/@@@: Voca[0] row view is created, tag = 2b67694

2-6. 지금까지의 결과를 통해  바로 전에 보이지 않게된 View를 재사용 후보로 두었다가 새로운 데이터를 보여줄 필요가 있을때 해당 View를 재사용한다는 것을 할 수 있습니다.

하지만 앱 사용자가 포스팅에서 한 테스트 처럼 천천히 스크롤할리는 없습니다.

빠르게 스크롤하며 로그를 확인해보면 포스팅에서 한것처럼 분석하기가 쉽지는 않습니다.

하지만 기본 원리는 포스팅에서 테스트하며 분석한 것을 기반으로 하고 있을거라고 생각합니다.