[안드로이드] 이미지 슬라이딩, Flip 효과

안녕하세요 푸민입니다.

Flip 기능은 뷰페이저처럼 미끄러지듯이 슬라이딩하여 다음것을 보여주는 기능입니다! View 를 이용하여 Flip 기능을 한번 구현해볼까요?

 코드 

public class ImageFlipView extends View {

…

}

 설명 

View 를 상속 받은 클래스를 만들어 줍니다.

이미지를 설정할 메소드를 만들어줍니다.

 코드 

private Bitmap bitmap = null;

public void setBitmap(Bitmap bitmap) {

this.bitmap = Bitmap.createScaledBitmap(bitmap, width, height, true);

invalidate();

}

 설명 

Bitmap 이미지를 설정할수 있는 setBitmap() 를 생성합니다. 이미지를 설정한 뒤에는 그릴수 있도록 invalidate() 를 불러줍니다.

이미지를 화면에 그려줍니다.

 코드 

protected void onDraw(Canvas canvas) {

if (height == 0) {

height = getHeight();

width = getWidth();

}

if (bitmap != null) {

canvas.drawBitmap(bitmap, 0, y, paint);

}

super.onDraw(canvas);

}

 설명 

onDraw() 메소드를 오버라이딩하여 설정해줍니다. width, height 는 설정해주시는게 좋아요~ Canvas 객체의 drawBitmap() 메소드 중에서 x, y 값을 이용하여 시작점을 설정해주는 메소드로 그려줍니다. 그리고 저는 아래, 위로 슬라이딩하려고 하기때문에 y 값을 변수로 넣어줬는데요. 가로로 하려면 x값을 주셔도되고 응용은 자유입니다.

실제 Flip 기능을 구현해볼까요?

 코드 

public void flipAni() {

va = ValueAnimator.ofInt(0, -1 * height);

va.setDuration(DELAY);

va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

public void onAnimationUpdate(ValueAnimator animation) {

Integer value = (Integer) animation.getAnimatedValue();

y = value.intValue();

if (y == -1 * height) {

// 작업

va1 = ValueAnimator.ofInt(height,0); 

va1.setDuration(DELAY);

va1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

Integer value = (Integer) animation.getAnimatedValue();

y = value.intValue();

}

});

va1.start();

}

}

});

va.start();

}

 설명 

조금 복잡한데요. 먼저 ValueAnimator 를 두개 사용하여 구현했습니다. 한개만 사용해도 되고 설계를 어떻게 하냐에 따라서 더 쉽게도 할수 있어요! 일단 이해하기 쉽게 2가지로 나눠서 했습니다.

먼저 첫번째 ValueAnimator 인 va를 볼까요? va 를 처음 생성할때 값을 보시면 0 -> -1 * height 로 설정해주었습니다. 왜 이렇게 하였냐면 기본 위치인 0에서 height 만큼 y값이 - 됩니다. 그 말인즉 y값이 점점 줄어든다는 것이죠. 그래서 그걸 이미지로 그려주면 이미지가 점점 올라가는 애니메이션이 구현됩니다.

위의 이미지와 같이 됩니다.

그리고 y 의 값이 -1 * height 가 되었을때, 즉 이미지가 상단까지 다 올라갔을때, 두번째 애니메이션이 동작합니다. 그리고 동작하기전에 // 작업 이라고 쓰인곳에 이미지를 교체하거나 작업을 해주시면 슬라이딩되면서 이미지가 바뀌는 모양이 됩니다!

그리고 두번째 ValueAnimator 인 va1 의 경우에는 height 에서 0까지 즉 height 크기 만큼 아래에서 0의 위치까지 올라오도록 애니메이션이 되는것 처럼 보입니다.

이렇게 이미지 슬라이딩 기능을 구현하면 되겠습니다~