안녕하세요 돼지왕왕돼지입니다.
오늘은 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 로 남겨주세요~
댓글