[Slide]슬라이드 뷰 플리퍼(ViewFlipper)

이번에는 뷰 플리퍼(ViewFlipper)에 대해서 살펴 보겠습니다.

안드로이드에 뷰 플리퍼는 여러개의 뷰를 한 화면씩 보여주는 것입니다.

탭과 비슷하지만 탭버튼 등 이 없는 것이지요.

안드로이드 OS 의 타겟이 대부분 모바일용 기기라고 봤을 때,

뷰 플리퍼는 탭보다 오히려 유용할때가 많습니다.

탭은 특정한 탭버튼을 사용하여 다른 탭으로 전환 가능하지만,

뷰 플리퍼는 시간에 따라 화면이 바뀌게 하거나 모션 센서 등을 이용하는 등

모바일 기기 특성을 이용할 때 유용합니다. 사실 탭위젯으로도 똑같은 작업을 할 수 있겠지만, 훨씬 번거롭겠죠.

즉 탭위젯으로 특정 뷰를 분리할 필요가 없는 경우는 뷰 플리퍼를 자주 사용한다고 생각됩니다.

먼저 특정 버튼을 눌렀을때 화면이 바뀌는 뷰 플리퍼 예제를 구현해 보겠습니다.

레이아웃 xml 소스를 다음과 같이 편집합니다.

layout/main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     > <Button   android:id="@+id/button_next"     android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:text="next view"     /> <ViewFlipper android:id="@+id/viewFlipper_details" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="first page"> </TextView> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="second page"> </TextView> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="third page"> </TextView> </ViewFlipper> </LinearLayout>

LinearLayout  에 버튼 하나와 뷰 플리퍼를 넣은 모습입니다.

뷰 플리퍼는 세개의 ChildView 를 지니고, 각 ChildView는 간단한 텍스트 뷰 입니다.

뷰 플리퍼 역시 프레임 레이아웃 클래스를 상속받기 때문에,

내부에 또 다른 뷰를 지닐수 있고, addView() 메소드를 이용하여 새로운 뷰를 추가할 수 도 있습니다.

보다 자세한건 레퍼런스를 참조하도록 하겠습니다.

 

바로 위의 부모 클래스인 ViewAnimator 클래스는 보다 

일반적인 뷰의 전환을 보여주는 클래스라고 생각할 수 있습니다.

뷰 플리퍼는 뷰 애니메이터를 상속받아 보다 사용하기 편하도록 설계되어진 클래스입니다.

어쨌든 이제 소스상에서 뷰 플리퍼를 동작시켜 보겠습니다.

액티비티 자바 소스를 다음과 같이 편집합니다.

package akj.FlipperEx; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ViewFlipper; public class FlipperEx extends Activity implements OnClickListener { ViewFlipper flipper; Button buttonNext; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); flipper = (ViewFlipper) findViewById(R.id.viewFlipper_details); buttonNext = (Button) findViewById(R.id.button_next); buttonNext.setOnClickListener(this); } @Override public void onClick(View v) { flipper.showNext(); } }

소스는 매우 간단합니다.

플리퍼를 findViewById() 메소드를 이용하여 리소스에서 찾아 등록하고

버튼의 리스너에서 단순히 showNext() 를 하면 끝입니다.

결과 화면입니다.

 

 

버튼을 누를때마다 다음 뷰가 나오게 되죠.

이제 조금 더 응용해보겠습니다.

방금 화면에서 시간 간격에 따라 자동으로 화면이 바뀌게 하는 것입니다.

슬라이드 쇼 처럼 말이죠.

이것 역시 매우 간단합니다.

소스를 다음과 같이 수정합니다.

package akj.FlipperEx; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ViewFlipper; public class FlipperEx extends Activity implements OnClickListener { ViewFlipper flipper; Button buttonNext; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); flipper = (ViewFlipper) findViewById(R.id.viewFlipper_details); final int slideTime = 3000; flipper.setFlipInterval(slideTime); flipper.startFlipping(); buttonNext = (Button) findViewById(R.id.button_next); buttonNext.setOnClickListener(this); } @Override public void onClick(View v) { flipper.showNext(); } }

굵은 글씨가 소스에서 바뀐 부분입니다.

단지 setFlipInterval() 메소드로 슬라이드할 시간을 설정하고,

startFlipping() 메소드를 호출하면 끝납니다.

이것을 실행하면 화면이 3초마다 자동으로 바뀌게 됩니다.

물론 버튼을 클릭하면 바로 화면이 바뀌게 되죠.

하지만 화면이 그냥 바뀌기 때문에 아무런 감흥도 없습니다.

화면이 바뀔때 애니메이션을 넣는다면 조금 더 그럴싸해 보일것 같습니다.

이번에는 화면이 바뀔때에 애니메이션을 지정해 보겠습니다.

먼저 애니메이션으로 사용할 xml 을 만들어보겠습니다.

res 폴더에 직접 anim 폴더를 생성해서 만들어도 되지만,

eclipse 에서 안드로이드 애니메이션 xml 형식 파일을 지원하므로, 그것을 사용하겠습니다.

 

패키지 익스플로러 창에서 res -> new -> other 를 클릭합니다.

 

Android XML File 을 더블 클릭합니다.

 

타입과 파일 이름을 지정하고 완료합니다.

 

이제 패키지 익스플로러를 가보면 anim 폴더와 xml 파일이 자동으로 생성된 것을 볼 수 있습니다.

in_anim 은 페이지가 새로 들어올때의 애니메이션을 설정하겠습니다.

xml 을 다음과 같이 수정합니다.

in_anim.xml

?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate  android:fromXDelta="-100%p" android:toXDelta="0%p" android:duration="1000"> </translate> </set>

translate 속성은 뷰를 상하 좌우로 이동 시킬수 있는 애니메이션입니다.

fromXDelta 가 시작점의 X 좌표 이고, toXDelta 목적지의 X 좌표입니다.

-100% 에서 0% 로 온다는 것은 왼쪽끝에서 원래 뷰의 위치로 애니메이션 되는 것을 의미합니다.

duration 속성은 애니메이션이 진행되는 시간을 의미합니다.

또 슬라이드 쇼처럼 보이기 위해서는 현재 뷰가 밖으로 빠져나가는 애니메이션이 있어야 하므로

아웃 애니메이션도 만들겠습니다.

out_anim.xml 파일을 생성하고 다음과 같이 편집합니다.

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate  android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="1000"> </translate> </set>

in 애니메이션과 다른 부분은 시작위치의 X 좌표와 목적 위치의 Y 좌표 뿐입니다.

0% 인 지금 위치에서 오른쪽 끝인 100% 까지 애니메이션 되는 것이지요.

이제 소스에서 뷰 플리퍼와 애니메이션을 연결하겠습니다.

액티비티 소스를 다음과 같이 수정합니다.

package akj.FlipperEx; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.ViewFlipper; public class FlipperEx extends Activity implements OnClickListener { ViewFlipper flipper; Button buttonNext; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); flipper = (ViewFlipper) findViewById(R.id.viewFlipper_details); final int slideTime = 5000; flipper.setFlipInterval(slideTime); flipper.startFlipping(); flipper.setInAnimation(AnimationUtils.loadAnimation( getApplicationContext(), R.anim.in_anim)); flipper.setOutAnimation(AnimationUtils.loadAnimation( getApplicationContext(), R.anim.out_anim)); buttonNext = (Button) findViewById(R.id.button_next); buttonNext.setOnClickListener(this); } @Override public void onClick(View v) { flipper.showNext(); } }

역시 굵은 글씨가 바뀐 부분입니다.

단순히 setInAnimation() 메소드와 setOutAnimation() 메소드를 이용하여 애니메이션을 등록하면 됩니다.

AnimationUtils.loadAnimation() 메소드로 리소스의 애니메이션을 가져와서 말이죠.

실행하면 3초마다 애니메이션과 함께 슬라이드 쇼처럼 뷰가 바뀌는 것을 확인 가능합니다.

조금 더 내용을 추가해보겠습니다. 

뷰 플리퍼는 자식 뷰로 레이아웃을 가지는것도 가능합니다.

원래 뷰 플리퍼 자체가 레이아웃을 상속받으므로 당연한 이야기 입니다.

확인해보기 위해 레이아웃 xml 파일을 다음과 같이 수정해보겠습니다.

main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     > <Button   android:id="@+id/button_next"     android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:text="next view"     /> <ViewFlipper android:id="@+id/viewFlipper_details" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <AnalogClock android:layout_width="wrap_content" android:layout_height="wrap_content"> </AnalogClock> <DigitalClock android:layout_width="wrap_content" android:layout_height="wrap_content"> </DigitalClock> </LinearLayout> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="first page"> </TextView> </ViewFlipper> </LinearLayout>

굵은 글씨가 바뀐 부분입니다. 

뷰 플리퍼에 텍스트 뷰 세 개 대신에 리니어 레이아웃 하나와 텍스트 뷰 하나를 넣었습니다.

소스 수정은 전혀 하지 않아도 됩니다.

실행하면 다음과 같이 됩니다.

 

 

왼쪽 화면에서 오른쪽 화면으로 애니메이션과 함께 5초마다 바뀌게 됩니다.

조금 더 나가서 플리퍼에 등록할 뷰의 개수를 미리 알 수 없을때는 어떻게 해야 할까요.

즉 동적으로 뷰를 플리퍼에 추가하는 것을 해보겠습니다.

최대한 간단하게 하기 위해, 상단에 버튼대신 텍스트뷰와 에디트 텍스트를 넣고,

버튼을 누르는 경우 에디트 텍스트의 문자열을 읽어와 새로운 텍스트 뷰를 만들어

뷰 플리퍼에 등록해 보겠습니다.

레이아웃 xml 파일을 다음과 같이 수정합니다.

main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     >     <LinearLayout      android:layout_width="fill_parent"      android:layout_height="wrap_content" android:orientation="horizontal">      <Button   android:id="@+id/button_next"     android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="Add View"     />     <EditText      android:id="@+id/editText"      android:layout_width="fill_parent"      android:layout_height="wrap_content">     </EditText>     </LinearLayout> <ViewFlipper android:id="@+id/viewFlipper_details" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <AnalogClock android:layout_width="wrap_content" android:layout_height="wrap_content"> </AnalogClock> <DigitalClock android:layout_width="wrap_content" android:layout_height="wrap_content"> </DigitalClock> </LinearLayout> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="first page"> </TextView> </ViewFlipper> </LinearLayout>

역시 굵은 글씨가 바뀐 부분입니다.

버튼 대신에 리니어 레이아웃을 넣고 버튼과 에디트텍스트 위젯을 가로로 배치했습니다.

이제 버튼에 리스너에서 에디트 텍스트의 내용을 읽어 새로운 뷰를 플리퍼에 등록해보겠습니다.

소스를 다음과 같이 수정합니다.

package akj.FlipperEx; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.ViewFlipper; public class FlipperEx extends Activity implements OnClickListener { ViewFlipper flipper; Button buttonNext; EditText editText; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); flipper = (ViewFlipper) findViewById(R.id.viewFlipper_details); final int slideTime = 5000; flipper.setFlipInterval(slideTime); flipper.startFlipping(); flipper.setInAnimation(AnimationUtils.loadAnimation( getApplicationContext(), R.anim.in_anim)); flipper.setOutAnimation(AnimationUtils.loadAnimation( getApplicationContext(), R.anim.out_anim)); buttonNext = (Button) findViewById(R.id.button_next); buttonNext.setOnClickListener(this); editText = (EditText) findViewById(R.id.editText); } @Override public void onClick(View v) { String text = editText.getText().toString(); if (text.length() == 0) { return; } TextView tv = new TextView(getApplicationContext()); tv.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); tv.setText(text); flipper.addView(tv); } }

역시 굵은 글씨가 바뀐 부분입니다.

실행하면 처음에는 두개의 뷰가 애니메이션 되지만

에디트텍스트에 내용을 입력하고 addView 버튼을 누르면 

해당 텍스트를 지닌 텍스트뷰가 추가되어 애니메이션 되는것을 확인할 수 있습니다.

 

비슷한 방법으로 갤러리에서 이미지를 동적으로 불러와 슬라이드 하는등

여러가지 응용이 가능합니다.