[안드로이드] 이미지 슬라이드 AdapterViewFlipper

 

  안드로이드 이미지 슬라이드 AdapterViewFlipper

 

■ AdapterViewFlipper는 'API Level 11'부터 지원하는 기능 중 하나입니다.  'API Level 1'부터 지원하던 ViewFlipper에 어댑터 기능을 추가한 객체라고 생각하면 되는데요. 스스로 이미지가 교체되는 슬라이딩 기능입니다. 이번 예제 프로젝트에서는 일정한 시간을 정해놓으면 스스로 다음 사진으로 넘어가면서 보여지게 되고, 버튼 이벤트를 설정을 해서 슬라이딩을 실행을 하다가 "자동 슬라이딩 스톱"을 누르면 슬라이딩이 멈추고 "다음", "이전" 버튼을 클릭하면 앞, 뒤로 넘겨가면서 볼 수 있습니다. 


"자동 슬라이딩 시작"버튼을 누르면 다시 자동 슬라이딩이 시작됩니다.  

 

 

 

 

■ 상속 구조를 보면 AdapterView에 Animator의 기능중에 Flippper 기능을 추가한 것입니다.

 

 

■ 예제 프로젝트를 만들어가면서 이해해 보도록 하겠습니다.

 이미지 네장을 준비해서 파일 이름을 "t1~t4"로 저장하고, drawable폴더에 넣었습니다.  이 파일은 액티비티 파일에서 문자열 "t?"로 이미지를 찾아서 출력하도록 하기 위해서 연속으로 나열되게 이름을 저장하였습니다.

 

 

■ activity_main.xml 파일에서  세개의 버튼과 AdapterViewFlipper를 배치합니다.

전체를 세로방향의 LinearLayout으로 묶고 가로 LinearLayout을 배치해서 그안에 토글버튼을 포함해서 세개의 버튼을 가로로 배치하고 있으며, 아래쪽에 AdapterViewFlipper를 배치하고 있습니다.

[flipInterval]을 "2000"으로 설정하여 2초 간격으로 넘어가도록 하고 있습니다.  

 

 

 

■ 다음은AdapterViewFlipper에 추가할 어댑터 아이템 레이아웃으로 사용하기 위한 item.xml 파일을 Layout폴더에 만들고 다음과 같이 작성을 합니다.

ImageView를 만들고, 첫번째 이미지를 출력하도록 설정하고 있습니다.

 

 

 

■ 이제 액티비피 파일을 작성하도록 하겠습니다.

1. 출력할 사진 데이터를 List형으로 선언하고, AdapterViewFlipper와 ToggleButton의 객체를 선언하고 있습니다.

 

2.  drawable 폴더에 준비한 for문을 이용해서 이미지를 "t"문자열로 찾아 오도록 하고 있습니다. 

 

3. activit_main.xml에서 배치했던 AdapterViewFlipper을 찾아와서 어댑터를 설정하고 있습니다. 이 어댑터 클래스는 아래쪽에서 작성하도록 합니다.

 

 

 

배치해둔 '다음', '이전' 버튼을 찾아서 클릭이벤트를 설정해주고, 토글버튼을 찾아서 클릭할때 이 버튼이 활성화 되면 자동슬라이딩을 시작하고, 비활성화되면 중지하도록 설정하고 있습니다. 

 

 

■ 다음으로 onResume()메서드를 작성합니다. 이메서드는 액티비티가 처음 시작하거나 다시 시작할때 실행되는 메서드입니다.

처음 시작하거나 다시 시작할때 자동 슬라이딩을 시작할것인지를 정의하게 되는데요. 이 메서드는 단말기가 가로, 세로방향으로 전환할때 토글버튼과 자동슬라이딩을 동기화 시켜주는 역할을 하게 됩니다. 이 메서드가 없으면 가로나 세로방향으로 방향 전환이 일어나면 토글버튼이 활성화 되어있지 않아도 자동 슬라이딩이 실행 되버리게 됩니다. setAutoStart() 메서드는 사용하지 않고, "슬라이딩 시작" 버튼으로 스타트를 할것이므로 주석처리 하고 있습니다.

 

 

■ 다음은 어댑터 클래스 입니다.

어댑터 클래스는 앞쪽에서도 많이 작성을 해봤기 때문에 따로 설명은 하지 않고 넘어가도록 하겠습니다. 혹시 이해가 안되시거나 궁금하시면 Gallery 예제 프로젝트를 잠깐 살펴 보시기 바라겠습니다.

 Gallery 예제 프로젝트

 

 

■ 이제 프로젝트를 실행해 보도록 하겠습니다.

 

 

■ 실행을 해서 "자동 슬라이딩 시작" 토글버튼을 클릭하면 2초 간격으로 슬라이딩이 되고, 스톱을 누르면 멈추게 됩니다. 그리고 "다음", "이전" 버튼을 클릭하면 다음 , 이전 사진을 볼 수 있으며, 슬라이딩이 되고 있는 상태에서도 이 버튼을 누르면 다음, 이전 이벤트가 실행이 됩니다.

저작자 표시 비영리 변경 금지
신고
Leave a comment
Your name *
Your PassWord *
Comment *
COMMENT