AdapterView, 너란 위젯..

왓챠(http://watcha.net) 웹사이트에서 영화 썸네일에 마우스 커서를 올리면, 

위와같이 추가정보를 보여주는 레이어가 보기좋게 덧씌워진다.

이것을 Android의 GridView로 구현했다.

따로 페이지 버튼을 두지 않고, 스크롤이 끝까지 가면 추가 데이터를 로드하는 LazyLoad 방식을 선택했다.

그리고 삽질은 시작됐다.

<1차 시기>

1. 먼저 각각의 item은 FrameLayout 안에 배치하여, 레이어가 쉽게 나타날 수 있도록 구성했다.

2. 1의 FrameLayout을 inflate 하는 CustomLayout 클래스를 만들었다. 자체적으로 onClickListener를 가지고 있다.

3. 2의 CustomLayout을 데이터 수만큼 생성하여 Collection에 넣었다.

4. BaseAdapater를 이용하여 GridView에 붙여줬다.

5. 일단 작동은 된다. 헌데, LazyLoad로 다음 DataSet이 로드되면 불특정한 item들의 onClickListener가 먹통이 된다. (추가정보 레이어가 안나타남)

6. LazyLoad(AsyncTask)가 실행되기 전에는 멀쩡하다. 실행 된 후에만 먹통이 된다.

7. Log를 찍어보니 기묘하다. 먹통인 아이템을 클릭 후 정상인 아이템을 클릭하면, 정상의 event -> 먹통의 event가 순서대로 호출된다. 멍미..

5의 문제를 해결하려고 별짓을 다해봤다. AsyncTask에서 각각의 item에 onClickLister를 설정해보기도 하고,

GridView에 OnItemClickListerner를 설정해 보기도 했지만 삽질 기록만 차곡차곡 쌓일 뿐이었다.

결국 미결과제로 남기고, CustomLayout을 Class로 쓰는건 포기하기로 했다.

<2차 시기>

1. item으로 쓰일 Class 자체를 완전히 갈아 엎을 것이기에, 일단 Subversion에서 Branch부터 생성하고, switch 했다.

2. 간단히 ArrayList를 쓰면 좋겠지만, 포함될 데이터가 int, boolean, String, Bitmap 등 다양해서 class를 생성했다.

3. 클래스는 private 변수들과 각각의, 혹은 여러개를 설정 또는 반환하는 getter와 setter만 생성 해 두었다.

(Android Studio의 Generate (alt+insert)를 사용하면 무척 간편하다.)

4. CustomAdapter의 getView() 에서 각각의 item에 들어갈 데이터와 onClickListener를 설정했다.

5. 추가정보 레이어에 AsyncTask로 동작할 toggle형 버튼을 3개정도 추가했다. 데이터에 따라 배경색이 흰색/다른색으로 표시된다.

6. 5의 toggle 버튼에 onClickListener를 넣어, 서버의 리턴값에 따라 배경색상을 바꾸도록 했다. 근데 여기서 문제가 나왔다.

7. 흰 버튼의 경우는 toggle이 잘 동작하는데, 색이 있는 버튼은 흰색으로 바뀌질 않았다.

8. 몇 삽 뜨고난 후 해당 View 객체에 setBackgroundColor 하는 대신, Adapter에 엮인 Collection의 요소를 수정했다. 

5에서 배경색을 구분하는 값을 true/false로 바뀌주도록 하고 CustomAdapter에 notifyDataSetChanged()를 했다.

그래도 불안해서 GridView에 invalidateViews()도 해줬다.

9. 잘 동작한다. 

2차시기를 마친 후 2차의 1에서 생성했던 Branch를 trunk에 merge했다.

그런데 또 문제가..

아이템을 클릭(터치)해서 레이어가 표시된 후, 스크롤을 휙휙 내려보면 클릭하지도 않은 아이템에 레이어가 막 표시되어있었다.

당황해서 다시 위로 올려보면, 원래 클릭한 아이템 대신 엉뚱한 아이템에 레이어가 떠 있었다. 미친..

<3차시기>

1. 레이어에 setVisibility 하던것을 다 빼버렸다.

2. getView에 Collection 원소에 레이어 표시 상태에 대한 getter와 setter를 추가했다.

3. setVisibility 대신 2의 setter에 표시 상태를 설정하게 하고, 2차시기의 8번과 같은 작업을 해 줬다.

4. 잘 동작한다.

그런데 이번엔 GridView의 첫번째 아이템만 애니메이션이 동작하질 않는다!! (히밤 진짜...)

<4차시기>

1. 클릭 한 아이템은 그 즉시 애니메이션을 실행한다.

2. 클릭 된 아이템을 제외하고는 3차시기의 3번과 같이 설정을 한다.

3. 기존에 레이어가 표시되었던 아이템을 getView에서 AnimationListener를 이용해 숨김 처리 한다.

4. 잘 동작한다.

이번 삽질은 AdapterView에 대한 이해가 부족한 무식함에서 기인한 것이므로 같은 실수를 반복하지 않기 위해 내용을 기록 해 둔다.

누구든 AdapterView를 무시하면