구글에서 진행하는 ADL(Android developer lab)의 2011년도 행사에 다녀왔었습니다.

고맙게도 구글형들이 갤럭시탭 10.1인치를 하사하셔서,
허니콤 개발을 공부하게 되었습니다. 

간단하게 만들 수 있는 애플리케이션이 없나 고민하다가,
"에이, 내가 쓸거나 만들자."라면서 이미지뷰어를 만들기로 했습니다.

 이미지뷰어 - FreeView 개발

 1. 탭 10.1(Honeycomb)이니 왼쪽에 리스트를 보여주고, 오른쪽에 컨텐츠를 보여주는 방식을 취한다.
 2. 화면은 단순하게 구성한다.
 3. 기능은 필요한 것만 구현한다.
 4. 직관적이게 구현한다.
 5. 테스트용이니 간단하게 가자.
 6. 속도가 빨라야 한다.(가벼워야한다.) 



구현할 것들

1. 이미지가 포함된 폴더를 자동으로 탐색해서 화면 왼쪽에 리스트로 보여준다.
2. 폴더를 선택하면 화면 오른쪽에 폴더안의 이미지를 리스트 또는 아이콘으로 보여준다.
3. 이미지를 선택하면 풀스크린으로 볼 수 있다.
4. 이미지를 zoom-in/zoom-out 할 수 있다.
5. 이미지를 회전할 수 있다.



필요한 클래스

1. 메인 클래스 - Activity
: Fragment 2개를 가지고 있는 액티비티.
  첫번째 fragment는 왼쪽의 리스트에, 두번째 fragment는 오른쪽의 컨텐츠에 사용한다.

2. 폴더 리스트 클래스 - Fragment
: 메인 액티비티 왼쪽에 폴더 리스트를 보여줄 fragment

3. 컨텐츠 리스트 클래스 - Fragment
: 메인 액티비티 오른쪽에 컨텐츠(이미지) 리스트를 보여줄 fragment

4. 이미지 뷰어 클래스 - Activity
: 이미지를 풀스크린으로 볼 수 있도록 하는 액티비티
  줌인, 줌아웃, 로테이션이 가능해야 한다.

5. Adapter 클래스 2개
: 폴더리스트에 사용할 어댑터, 컨텐츠리스트에 사용할 어댑터

6. 기타 유틸리티 클래스 여러개



화면을 기획하며 끄적였던 연습장의 내용들입니다. 창피하지만 같이 올려봅니다.




액션바 구현

첫번째로 한 것은, 액션바의 확인입니다. 액션바가 어떤식으로 노출되고, 어떤식으로 동작하는지를 확인했습니다. 
기존의 액티비티가 가지고 있던 OptionMenu와 같은 방식으로 구현하기 때문에 어려움이 없었습니다.

그래도 구글링이 짱이니 검색을 해서 커니님의 블로그를 참고하였습니다.
액션바(Action bar) 따라잡기 - 액션바가 뭔가요?



폴더 리스트 프래그먼트 구현

두번째로 구현한 것은, 메인 액티비티 왼쪽에 노출 될 이미지를 가지고 있는 폴더의 리스트 어댑터였습니다.
File클래스를 사용해서, SD 카드를 탐색하고, 이미지가 있는 폴더를 ArrayList에 추가하는 방식으로 구현하였습니다.

지원되는 확장자는 jpg, gif, jpeg, png, bmp로 하였고, gif의 Animation같은건 절대로 지원하지 않습니다. ^^;;;;;;



폴더리스트와 이미지리스트 간의 데이터 교환은 interface를 사용하였습니다.

폴더리스트 fragment에 interface를 만들고, activity가 이를 구현(implement)하고,
클릭이 되었을 때, 폴더리스트에서 메인으로 데이터를 전달하고, 다시 메인에서 이미지리스트 fragment로 데이터를 전달하는 방식입니다. 



이미지 리스트 프래그먼트 구현

세번째로는 메인 액티비티의 왼쪽, 폴더 리스트에서 폴더를 선택했을 때, 폴더안의 이미지를 뿌려줄 프래그먼트 입니다.
왼쪽의 폴더리스트에서 전달받은 데이터(폴더 경로)를 통해, 폴더내의 이미지를 탐색해 화면에 뿌려줍니다.

각 이미지 항목에 대해 클릭이벤트 발생 시 이미지뷰어용 액티비티를 생성하여 이미지를 크게 볼 수 있도록 했습니다.



이미지뷰어 액티비티

이미지 리스트에서 전달받은 데이터(이미지 ArrayList, 선택된 position)를 통해 화면에 이미지를 뿌려줍니다.
현재의 position을 기반으로 이전/다음 이미지로 이동 할 수 있습니다.
또한 이미지 회전이 가능하도록 하였고, zoom-in/zoom-out을 가능하도록 하였습니다.

multi touch 가능한 ImageView는 구글링을 통해 stackover flow를 참고하였습니다.

추가적으로 portrait에서 landscape으로, 또는 landscape에서 portrait으로 디바이스 회전시, 현재의 position을 유지하기 위해 데이터를 저장해 두고 꺼내 쓰는 방식을 사용하였습니다.



스크린샷

구현된 애플리케이션에 대한 스크린샷입니다.


최초 화면.
자동으로 폴더를 탐색하고, 최초에는 최 상단의 폴더(여기서는 Camera)가 선택됩니다.




ScreenCapture 폴더를 선택했을때의 화면입니다.
thumbnail 이미지를 불러오는 것은 Asynctask를 통해서 구현하였습니다.
이미지 로딩이 완료되면, 프로그레스바가 없어집니다.




이미지를 선택해 보았습니다.




해당이미지를 풀 스크린으로 볼 수 있습니다.
왼쪽위의 버튼이 이미지 회전(오른쪽으로 90도), 오른쪽 위는 현재의 위치를 나타냅니다.(전체 16장중 4번째)
왼쪽 아래는 이전이미지로 가기, 오른쪽 아래는 다음 이미지로 가기 버튼입니다.




이미지를 확대할 수 있습니다.




screenOrientation을 landscape, portrait모두 지원합니다.



메인 액티비티에서 오른쪽 위에 액션아이템 중 help(?)를 눌렀을때의 화면입니다.



조금 더 손을 본 후, 마켓에 올려야겠군요.
기존의 애플리케이션이 하위호환성에 대해 많은 고려를 했다면, 이녀석은 전적으로 3.0이상에서만 사용할 수 있도록 만들었습니다. 공부용이니까요 =ㅁ=. 다음에 만들때는 호환라이브러리를 사용해서도 만들어봐야겠네요.





Posted by croute

댓글을 달아 주세요