화면이 휙휙 슬라이딩 되는 것처럼 전환되는 것들을 볼 수 있습니다.
ViewFlipper은 이러한 효과를 더 손쉽게 사용할 수 있도록 제공해줍니다.
ViewFlipper은 FrameLayout을 상속받습니다.
FrameLayout은 AbsoluteLayout과 비슷하게 Layout안의 각각의 View 들이 서로 좌표를 겹쳐서 가집니다.
(나중에 그려진 View가 먼저 그려진 View를 덮어 버립니다.) 이 점을 주의해야 합니다.
View를 좌우로 밀었을 때의 애니메이션 효과를 미리 만들어줍니다.
이전에 다루었던 애니메이션 부분들과 어느 정도 이어집니다.
[안드로이드] Layout을 통해 Tween Animation 구현하기 (투명도 조절) - http://snowbora.com/390
[안드로이드] Layout을 통해 Tween Animation 구현하기 (개체 움직임) - http://snowbora.com/391
[안드로이드] Layout을 통해 Tween Animation 구현하기 (Set 태그) - http://snowbora.com/392
appear_from_left.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="500"/>
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="500" />
</set>
appear_from_right.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="500"/>
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="500" />
</set>
disappear_to_left.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="500"/>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="500" />
</set>
disappear_to_right.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="500"/>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="500" />
</set>
그리고 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"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"/>
<ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/view1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:text="View 1"
android:textSize="30px"/>
<Button
android:id="@+id/view2"
android:src="@drawable/icon"
android:text="View 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/view3"
android:src="@drawable/icon"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"/>
</ViewFlipper>
</LinearLayout>
마지막으로 actViewFlipper.java 파일에 다음과 같은 코드를 입력합니다.
package View.Flipper;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;
public class actViewFlipper extends Activity {
private ViewFlipper m_viewFlipper;
private int m_nPreTouchPosX = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
m_viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
m_viewFlipper.setOnTouchListener(MyTouchListener);
}
private void MoveNextView()
{
m_viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.appear_from_right));
m_viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.disappear_to_left));
m_viewFlipper.showNext();
}
private void MovewPreviousView()
{
m_viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.appear_from_left));
m_viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.disappear_to_right));
m_viewFlipper.showPrevious();
}
View.OnTouchListener MyTouchListener = new View.OnTouchListener()
{
public boolean onTouch(View v, MotionEvent event)
{
if (event.getAction() == MotionEvent.ACTION_DOWN)
{
m_nPreTouchPosX = (int)event.getX();
}
if (event.getAction() == MotionEvent.ACTION_UP)
{
int nTouchPosX = (int)event.getX();
if (nTouchPosX < m_nPreTouchPosX)
{
MoveNextView();
}
else if (nTouchPosX > m_nPreTouchPosX)
{
MovewPreviousView();
}
m_nPreTouchPosX = nTouchPosX;
}
return true;
}
};
}
전체 프로젝트 파일을 첨부합니다.
ViewFlipperExample.zip
'개발자 이야기 > 안드로이드' 카테고리의 다른 글
| [안드로이드] 이미지 로딩할 때 메모리 초과할 경우(bitmap size exceeds VM budget) (4) | 2011/06/27 |
|---|---|
| [안드로이드] ScrollView의 활용 (3) | 2011/06/06 |
| [안드로이드] ViewFlipper 사용하기 (15) | 2011/06/05 |
| [안드로이드] URL을 이용해서 이미지 다운로드 하기 (멀티 쓰레드 이용) (5) | 2011/06/05 |
| [안드로이드] URL을 이용해서 이미지 다운로드 하기 (4) | 2011/06/05 |
| [안드로이드] 인텐트를 이용한 Activity간 데이터 전달 (사용자 정의 클래스) (1) | 2011/06/04 |
댓글을 달아 주세요
K 2011/06/05 23:09 댓글주소 수정/삭제 댓글쓰기
Viewfliper를 쓰면 좌우로 플릭킹이 가능한것을 보여주셨는데요 그럼 그 안에 있는 textview를 상하로 플릭킹할 수 있도록 구현하는 것도 가능한가요??
상하로 플리핑하는 건 어떤걸 말씀하시는 건가요?
글자수 많아서 위/아래 스크롤해야 할 때 스크롤 말씀하시는 건가요?
ViewFlipper로 상/하 플리핑 구현하는 것도 어렵지 않고, 그냥 ScrollView를 이용해서 위/아래 스크롤하는 것도 어렵지는 않습니다.
다만 일반적인 경우는 ScrollView를 이용하는 것이 더 편리할 거에요. 간단한 예제하나 만들어서 블로그에 올려보도록 하겠습니다.
http://snowbora.com/405 에 ScrollView에 대한 내용을 블로깅했습니다. 감사합니다.
K 2011/06/07 07:33 댓글주소 수정/삭제 댓글쓰기
상하/좌우 다 스크롤할수 있는 방법을 알고싶어서 물어본거에요 viewfliper를 좌우스크롤하는데 쓰고 scrollview로 상하이렇게 같이써서 구현이 가능한지 알고싶습니다
그렇게 사용 가능합니다.
ViewFlipper에서 사용하는 후보 View 중 하나로 ScrollView를 사용하면 되죠. 그 안에서 TextView를 자식View로 구현하면 됩니다.
K 2011/06/07 22:45 댓글주소 수정/삭제 댓글쓰기
계속 질문 드리게되네요~ 얼마전에 dynamic viewflipper란 걸 듣게되었는데요 이게 혹시 viewfliper를 사용하면서 웹에서 데이터를 갖고와서 dynamic하게 view를 생성하고 append하는 걸 말하는 것인가요? 근데 만약에 웹데이터가 정말많은 경우라면 view를 append하는데 한계가 있을거 같은데 제가 이해하는게 맞는건인지 좀 헷갈리네요 쩝...
K 2011/06/08 13:31 댓글주소 수정/삭제 댓글쓰기
계속 질문 드리게되네요~ 얼마전에 dynamic viewflipper란 걸 듣게되었는데요 이게 혹시 viewfliper를 사용하면서 웹에서 데이터를 갖고와서 dynamic하게 view를 생성하고 append하는 걸 말하는 것인가요? 근데 만약에 웹데이터가 정말많은 경우라면 view를 append하는데 한계가 있을거 같은데 제가 이해하는게 맞는건인지 좀 헷갈리네요 쩝...
저도 Dynamic View Flipper이 무엇인지 몰라서 찾아봤는데,
http://www.slideshare.net/dcgraham7/dynamic-view-flipper-2036378
상으로 볼 때는 View Flipper 안에 들어가는 자식 뷰를 동적으로 생성하고 동적으로 해제하는 것을 말하는 것 같네요.
그냥 View Flipper는 갖고 있는 뷰 안에서 계속 순환하면서 바꿔가는 건데, Dynamic View Flipper는 새로운 뷰를 계속 추가하거나 빼면서 바꿔갈 수 있는 것 같습니다. ^^;
ssamture 2011/06/09 16:59 댓글주소 수정/삭제 댓글쓰기
좋은 글 잘 봤습니다. 제가 찾던 내용이네요ㅠㅠ
그런데 올려주신 예제는 슬라이드 터치를 하고 손을 떼면 화면이 좌우로 스크롤 되는데요.
손을 따라서 스크롤(갤럭시 메인화면 또는 안드로이드 기본 어플 중 "뉴스 및 날씨" 등) 하는건 어떻게 구현을 해야 할까요??
슬라이드 터치를 하고 나면 화면이 좌우로 스크롤 되는 건 View Flipper과는 조금 성격이 다른 것 같습니다. 그냥 기본적인 FrameLayout 등을 만들고 그 안에서 ImageView의 좌표를 바꿔가면서 움직이게 해야 될 것 같네요. ^^;;
reneponette 2011/09/24 15:01 댓글주소 수정/삭제 댓글쓰기
그냥 지나가가 들르게되어 댓글답니다. 좌우 flicking의 경우 현재는 ViewPager 라는 대안이 있습니다. 사실 대안이라기보다 이제부턴 권고하고 있는 방법입니다. 호환라이브러리 v4에 들어가 있구영... Fragment 라는 지금은 생소한 개념을 사용하긴 합니다만.... 허니콤부턴 이 개념이 대세기 때문에 지금부터라도 익숙해지는게 장땡이져.. 참고하세영~ ^^
좋은 정보 감사합니다. ^^;
ViewPager 라는 건 처음 듣는데, 허니콤부터 추가된건가 보군요.
진저브레드에서 좌우 스크롤되는 갤러리 만드는라 고생 좀 했는데.. 좋은게 추가되나 보네요. ^^;;
(사실 진저브레드에서도 Gallery 사용하면 좀 수월하게 할 수도 있긴 합니다. ㅋ)
괴무리 2011/12/06 19:46 댓글주소 수정/삭제 댓글쓰기
안녕하세요... 지나다가 좋은 정보 보고 갑니다. ^^
하나 질문할게 있어요 (__)
저는 뷰플리퍼에 커스텀 뷰를 여러개 두고 플리킹을 하려고합니다.
커스텀뷰를 올려서 플리킹이 되는거 까진 확인했는데
원하는 영역에서 ontouch영역이 적용이 되지 않더라고요. ㅠ
예를 들자면 전체화면에 ontouch영역을 나름 걸었는데.. 커스텀뷰안의 특정 뷰영역에서만 ontouch 이벤트가 걸리더라고요.
relative로도 해보고 linear로도 해봤는데..잘 안되네요 ㅎ;
혹시 해결 방법아시면 힌트 좀 부탁합니다. (__)
홍의찬 2012/03/15 09:22 댓글주소 수정/삭제 댓글쓰기
좀 때가 지나긴 했지만,.. 질문하나 드립니다.
위젯으로 구현된 FrameLayout 안에 LinearLayout에 여러개의 TextView들이 있습니다..
그런 LinearLayout이 7개의 그룹이 존재한다고 했을때 각각의 LinearLayout을 ViewFliper 안에 두고 상하로 플릭킹 할 수 있을까요?
혹시 아직 보고 계시다면 답변좀 부탁드립니다...
후덜덜 2012/04/06 11:08 댓글주소 수정/삭제 댓글쓰기
감사합니다 퍼갈께용