[안드로이드 Android] ViewFlipper

여러장의 이미지나 텍스트등을

한장씩 넘겨가면서 보고싶을 때

유용한 ViewFilpper 예제입니다.

View Animator의 일종으로서

FrameLayout을 상속받아 만들어졌습니다.

컴퓨터에서

여러장의 이미지를 하나씩 볼때 사용하는

뷰어를 만든다고 보시면 됩니다.

다음 장으로 넘어가는 'Next' 버튼,

이전 장으로 넘어가는 'Previous' 버튼,

자동으로 일정 간격으로 View가 변경되는 'Auto' 버튼이 있습니다.

'슬라이드 보기' 같은 기능이죠.

참고로 이 'Auto'버튼은 on, off가 되도록 ToggleButton을

사용했습니다.

우선 결과 화면입니다.

먼저 버튼을 눌러서 이미지를 변경하는 모습입니다. 

자동으로 이미지가 변경되는 모습입니다.

동작에 대한 이해는 어렵지 않겠죠.

이제 만들어 보겠습니다.

사용된 이미지는 첨부파일을 다운받으시거나

다른 이미지를 사용하셔도 좋습니다.

게임타이틀 이미지.zip

총 10장의 이미지인데

xml 레이아웃파일에 10개의 ImageView를 만들자니

너무 길어서..

우선 3개반 xml에 만들고

나머지 7개는 Java에서 반복문을 이용해서

ViewFlipper에 추가(addView) 했습니다.

레이아웃 파일입니다.

 

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:padding="5dp">          <LinearLayout          android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"         android:weightSum="3">                  <Button android:id="@+id/btn_previous"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:text="PREVIOUS"             android:textSize="14sp"             android:onClick="mOnClick"/>                  <ToggleButton android:id="@+id/toggle_auto"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:textOff="AUTO"             android:textOn="STOP"              android:textSize="14sp"/>                  <Button android:id="@+id/btn_next"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:text="NEXT"              android:textSize="14sp"             android:onClick="mOnClick"/>              </LinearLayout>          <ViewFlipper          android:id="@+id/flipper"         android:layout_width="match_parent"         android:layout_height="match_parent">                  <ImageView              android:id="@+id/img01"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:src="@drawable/gametitle_01"/>                  <ImageView              android:id="@+id/img02"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:src="@drawable/gametitle_02"/>                  <ImageView              android:id="@+id/img03"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:src="@drawable/gametitle_03"/>               </ViewFlipper> </LinearLayout>

ViewFipper 안에 3개의 ImageView가 보이시죠?

이제 ViewFlipper를 제어하는 자바 소스파일입니다.

설명은 주석을 참고하세요.

 

MainActivity.java

public class MainActivity extends Activity { ViewFlipper flipper; //자동 Flipping 선택 ToggleButton 참조변수 ToggleButton toggle_Flipping; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //ViewFlipper 객체 참조 flipper= (ViewFlipper)findViewById(R.id.flipper); //총 10개의 이미지 중 3개만 XML에서 ImageView로 만들었었음. //소스코드에서 ViewFipper에게 나머지 7개의 이미지를 추가하기위해 //ImageView 7개를 만들어서 ViewFlipper에게 추가함 //layout_width와 layout_height에 대한 특별한 지정이 없다면 //기본적으로 'match_parent'로 설정됨.  for(int i=0;i<7;i++){ ImageView img= new ImageView(this); img.setImageResource(R.drawable.gametitle_04+i); flipper.addView(img); } //ViewFlipper가 View를 교체할 때 애니메이션이 적용되도록 설정 //애니메이션은 안드로이드 시스템이 보유하고 있는  animation 리소스 파일 사용. //ViewFlipper의 View가 교체될 때 새로 보여지는 View의 등장 애니메이션 //AnimationUtils 클래스 : 트윈(Tween) Animation 리소스 파일을 Animation 객체로 만들어 주는 클래스 //AnimationUtils.loadAnimaion() - 트윈(Tween) Animation 리소스 파일을 Animation 객체로 만들어 주는 메소드 //첫번째 파라미터 : Context //두번재 파라미터 : 트윈(Tween) Animation 리소스 파일(여기서는 안드로이드 시스템의 리소스 파일을 사용              //                    (왼쪽에서 슬라이딩되며 등장) Animation showIn= AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left); //ViewFlipper에게 등장 애니메이션 적용 flipper.setInAnimation(showIn); //ViewFlipper의 View가 교체될 때 퇴장하는 View의 애니메이션 //오른쪽으로 슬라이딩 되면 퇴장하는 애니메이션 리소스 파일 적용. //위와 다른 방법으로 애니메이션을 적용해봅니다. //첫번째 파라미터 : Context //두번재 파라미터 : 트윈(Tween) Animation 리소스 파일(오른쪽으로 슬라이딩되며 퇴장) flipper.setOutAnimation(this, android.R.anim.slide_out_right); //자동 Flipping 선택 ToggleButton에 따른 작업 toggle_Flipping= (ToggleButton)findViewById(R.id.toggle_auto); //ToggleButton에 Toggle상태 변경 리스너 세팅(OnCheckedChangedListener) toggle_Flipping.setOnCheckedChangeListener(new OnCheckedChangeListener() { //ToggleButton의 선택 상태가 변경되면 자동으로 호출되는 메소드 //첫번재 파라미터 : 선택의 변화가 생긴 CompoundButton(여기서는 toggle_Flipping) //두번째 파라미터 : Compoundbutton(toggle_Flipping)의 ON(true),OFF(false) 상태 @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { // TODO Auto-generated method stub if(isChecked){//On 으로 바뀌었으므로 ..자동 Flipping 시작.. //1초의 간격으로 ViewFlipper의 View 자동 교체 flipper.setFlipInterval(1000);//플리핑 간격(1000ms) flipper.startFlipping();//자동 Flipping 시작 }else{//OFF로 변경되었으므로  Flipping 정지 flipper.stopFlipping();;//Flipping 정지 } } }); } //onClick속성이 지정된 View가 클릭되었을 때 자동으로 호출되는 메소드. public void mOnClick(View v){ switch( v.getId() ){ case R.id.btn_previous: flipper.showPrevious();//이전 View로 교체 break; case R.id.btn_next: flipper.showNext();//다음 View로 교체 break; } } }

여기까지 ViewFiipper 입니다.

여러 이미지의 교체를 매우 손쉽게 합니다.

그런데. 잠시

이렇게 여러 이미지를 교체하는 앱 중에서

만화 보기 처럼 손으로 드래그 해서

이미지를 좌우로 바꾸는 어플들을 보셨을 겁니다.

이런 경우는 ViewFipper 보다

만화책의 Page를 넘기는 듯한 모습이 되는

ViewPager 라는 것이 있습니다.

사용성이 좋은 View 중에 하나죠.

다음 포스트에서 ViewPager를 만들어보겠습니다.