본문 바로가기
프로그래밍 놀이터/안드로이드, Java

[Android/안드로이드] ViewFlipper sample code.

by 돼지왕 왕돼지 2012. 3. 26.
반응형



안녕하세요 돼지왕왕돼지입니다.

오늘은 ViewFlipper Sample code 를 통해 사용법을 간단히 알아볼까 합니다.


<main.xml>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

<ViewFlipper

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/viewflipper"

>

   <LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

       <Button

           android:id="@+id/btn1"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="Next"

           />

   </LinearLayout>

   <LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

       <Button

           android:id="@+id/btn2"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="Prev"

           />

   </LinearLayout>

</ViewFlipper>

</LinearLayout>

 
- VIewFlipper 는 ViewGroup  을 상속한 녀석으로 다른 View나 ViewGroup을 그 안에 담을 수 있습니다.
 현재 예제의 Layout  의 경우는 ViewFlipper 안에 Button 1개를 각각 가진 LinearLayout 2개를 붙였습니다.



<Java Code - ViewFlipperTestActivity.java >

   private static final float DRAG_THRESHOLD = 10.f;

   private ViewFlipper mViewFlipper;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        

        findViewById(R.id.btn1).setOnClickListener( mClickListener );

        findViewById(R.id.btn2).setOnClickListener( mClickListener );

        mViewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);

    }

    

    private final OnClickListener mClickListener = new OnClickListener() {

public void onClick(View v) {

switch( v.getId() ){

case R.id.btn1:

goToNextPage();

break;

case R.id.btn2:

goToPrevPage();

break;

}

}

};

private Animation inFromRightAnimation() {

Animation inFromRight = new TranslateAnimation(

Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,

Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f

);

inFromRight.setDuration(400);

return inFromRight;

}

private Animation outToLeftAnimation() {

Animation outtoLeft = new TranslateAnimation(

Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  -1.0f,

Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f

);

outtoLeft.setDuration(400);

return outtoLeft;

}    

private Animation inFromLeftAnimation() {

Animation inFromLeft = new TranslateAnimation(

Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,

Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f

);

inFromLeft.setDuration(400);

return inFromLeft;

}

public static Animation outToRightAnimation() {

Animation outtoRight = new TranslateAnimation(

Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  +1.0f,

Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f

);

outtoRight.setDuration(400);

return outtoRight;

}


private float mOldTouchX;

@Override

public boolean onTouchEvent(MotionEvent touchevent) {

switch (touchevent.getAction()){

case MotionEvent.ACTION_DOWN:

mOldTouchX = touchevent.getX();

break;

case MotionEvent.ACTION_UP:

float currentX = touchevent.getX();

if ( !isDragging( mOldTouchX, currentX ) ) return false;

if ( mOldTouchX < currentX )

goToPrevPage();

else if ( mOldTouchX > currentX )

goToNextPage();

break;

}

return false;

}

private void goToNextPage(){

mViewFlipper.setInAnimation(inFromRightAnimation());

mViewFlipper.setOutAnimation(outToLeftAnimation());

mViewFlipper.showPrevious();

}

private void goToPrevPage(){

mViewFlipper.setInAnimation( inFromLeftAnimation() );

mViewFlipper.setOutAnimation( outToRightAnimation() );

mViewFlipper.showNext();

}

private boolean isDragging( float oldX, float currentX ){

return Math.abs( oldX - currentX ) > DRAG_THRESHOLD;

}

 
- 사용상의 핵심은 Animation setting 과 showNext() or showPrev() 호출입니다.
  VIewFlipper 는 child 를 붙인 순서대로 view를 page 단위로 배치하는데요,
  showNext() 를 부르면 다음 화면으로, showPrev() 를 부르면 이전 페이지로 이동합니다.
  이 때 아무 animation 을 주지 않으면 visibility 의 On/Off 의 효과만 나오니,
  In & out animation 설정을 주어야 
우리가 원하는 sliding 기능을 얻을 수 있겠습니다. 

- onTouchEvent 부분을 구현해 주어, 손가락으로도 flip 효과를 낼 수 있고, 버튼으로도 flip 효과를 낼 수 있습니다.

 - 문의사항은 Comment 로 남겨주세요~


도움이 되셨다면 손가락 꾸욱~



 
반응형

댓글