[안드로이드 어플 개발] Transitions사용하기 ImageSwitcher

 

▣ 안드로이드 어플 개발 Transition [ImageSwitcher]

 

■ 안드로이드의 [Transitions]의 객체들은 "Switch"나 "Flip"과 같이 여러개의 객체들이 교체되는 애니메이션 같은 효과를 제공하는데요. 예를 들어 핸드폰의 갤러리에서 사진을 넘길때 현재의 사진에서 다음 사진으로 넘어갈때 겹쳐지는듯한 효과를 보이면서 넘어가는 것인데요. 

예제를 만들어보면서 어떻게 효과가 나타나는지 살펴보도록 하겠습니다. 

 

 

 

■ 이번에 만들어볼 예제는 아래쪽에 갤러리(Gallery)객체를 배치하고 갤러리를 가로방향으로 스크롤 하면 가운데에 위치한 아이템이 위쪽에 배치한 "ImageSwitcher"에 애니메이션으로 교체가 되는 효과가 나타나게 됩니다.

 

■ 이 예제는 갤러리(Gallery)를 공부할때 만들어봤던 프로젝트에서 위쪽에 선택된 아이템이 출력되는 부분을 ImageView 대신 " ImageSwitcher"를 배치한 것입니다.

 

 

■ 이번 프로젝트에서 사용할 이미지를 준비해서 파일 이름을 t1~t4로 저장을 하고 drawable 폴더에 넣습니다. 나중에 갤러리에 출력될 이미지들을 파일이름으로 찾아올거라서 연속된 문자열로 저장을 한것입니다.  activity_main.xml 파일에 IImageSwitcher와 Gallery 객체를 배치하고, gallery_item.xml파일을 만들고, 갤러리 객체에 출력할 아이템 레이아웃을 작성합니다.

 

■ 파일을 하나씩 살펴보겠습니다. 먼저 activity_main.xml팔일 입니다.

ImageSwitcher의 크기는 임의대로 설정한 것입니다. 이미지의 사이즈대로 출력을 할려면 wrap_content로 설정을 하면 됩니다.

 

■ 갤러리에 출력할 레이아웃을 정의한 gallery_item.xml 파일입니다.    

갤러리에 출력할 아이템의 높이와 폭을 설정하고, 배경을 반투명 회색으로 설정을 하고 있습니다.

 

 

■ 이제 MainActivity.java 파일을 작성하도록 하겠습니다.

ImageSwitcher는 ViewFactory 클래스를 이용해서 교체할 이미지 객체를 생성하기 때문에 Implement로 ViewFactory를 선언하고 있으며,  갤러리에 출력할 이미지를 저장히기 위해서 리스트로 객체를 선언하고 이름을 galleryIda로 정의하고, main.xml에서 배치한 ImageSwitcher를 찾아서 객체에 담고 있습니다.

 

⑴  위쪽에서 drawable 폴더에 넣어놨던 t1~t4 까지 네장의 이미지를 for문을 이용해서 위에서 선언했던 리스트객체에 담고, 갤러리 객체를 찾아서 갤러리 어댑터를 설정하고 있습니다.

 

⑵ 갤러리에서 선택된 아이템에 대한 이벤트 리스너 입니다. 아이템이 선택되었을때 Gallery에서 선택된 아이템을 ImageSwitcher의 이미지 리소스로 설정하고 있습니다.

 

⑶  ImageSwitcher의 객체를 찾아와서 Factory클래스를 설정하고, 이미지에 대한 애미메이션을 안드로이드에서 기본으로 제공하는 Slide_in_left애니메이션과 Slid_in_right 애니메이션으로 설정하고 있습니다. 마지막으로 이 액티비티가 실행이 되서 처음 나타나게 될 이미지를 갤러리의 첫번째 이미지로 설정을 하고 있습니다.

 

 

■ 다음은 ViewFactory의 makeView() 메서드를 작성합니다. 이 메서드는 이미지 교체 애니메이션을 할 때 사용하는 메서드입니다.

이미지뷰 객체를 하나 생성해서 배경색은 검정으로 설정하고, 그 안에 출력할 이미지를 FIT_CTENTER로 하고, 이미지뷰의 크기를 부모 객체인 ImageSwitcher의 크기와 똑같이 하고 있습니다.

 

■ 다음은 갤러리 객체에 대한 어댑터를 정의합니다.

이 어탭터 클래스에 대한 설명이 궁금하시면 Gallery 프로젝트 예제를  살펴보시기 바랍니다.

 

▣ 갤러리 프로젝트 예제 ☜

 

■ 이 프로젝트를 실행을 해보면 다음과 같이 갤러리를 가로로 스크롤 하면 중앙에 위치한 이미지가 위쪽의 ImageSwitcher에 교체가 되면서 나타나게 되는데 이미지가 바뀔때 서로 겹쳐지는 애니메이션 효과를 볼 수 있습니다.

 

 

■ ImageSwitcher는 이미지가 교체되는 애니메이션을 지원하는데요. 그 단계는 다음과 같습니다. 먼저 이미지가 나타날때와 사라질때에 대한 애니메이션을 정의하고, ViewFactory클래스를 정의해서 이 클래스의 makeView()메서드로 변경 애니메이션에서 사용할 이미지뷰 객체를 생성하고, 이미지 소스를 변경할 때마다 교체 애니메이션이 실행되게 됩니다.