안드로이드 - ViewFlipper 사용하기

아이폰이나 안드로이드 어플들을 사용하다보면, 화면을 왼쪽 또는 오른쪽으로 드래그했을때,
화면이 휙휙 슬라이딩 되는 것처럼 전환되는 것들을 볼 수 있습니다.

ViewFlipper은 이러한 효과를 더 손쉽게 사용할 수 있도록 제공해줍니다.

ViewFlipperExample.zip

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"?>

<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"?>

<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"?>

<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"?>

<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

번호	제목	날짜	조회 수
77	WebView를 사용할때 HttpClient를 이용한 Session 유지	2018.12.27	4381
76	WebView 줌 컨트롤러 가리기	2014.08.28	6316
75	WebView 작업할때 Net::ERR_UNKNOWN_URL_SCHEME 에러 발생할때 (전화걸기,문자보내기 안된다)	2020.12.14	1069
74	Volley 이용시에 한글 깨질때 UTF-8로 변경	2020.12.14	343
73	Volley 로 웹요청하고 응답받기3 - Get방식 , json 읽기 (php,mysql)	2020.12.14	377
72	Volley 로 웹요청하고 응답받기2 - Post방식 , 로그인-회원가입 (php,mysql 연동)	2020.12.14	1431
71	Volley 로 웹요청하고 응답받기1 - Get방식	2020.12.14	348
70	Virtual Device , 디자인 화면	2021.03.31	260
»	ViewFlipper 사용하기	2015.07.16	9631
68	URL을 이용해서 이미지 다운로드 하기 (멀티 쓰레드 이용)	2015.07.16	8992
67	URL을 이용해서 이미지 다운로드 하기	2015.07.16	7407
66	This Handler class should be static or leaks might occur 시 해결법	2020.12.14	240
65	TextureView를 이용한 카메라 Preview 좌우 반전	2015.06.10	14223
64	setContentView()와 레이아웃 전개자(LayoutInflater)	2021.03.31	266
63	ScrollView의 활용	2015.07.16	6530
62	prepend(),append(),before(),after() 메서드	2014.10.20	7361
61	MediaPlayer 클래스 사용법	2018.10.02	1803
60	manifest 의 launchMode 속성	2015.08.11	7576
59	ListView 사용시 특정 뷰로 생성 ( 그림 + 텍스트 )	2015.07.16	7478
58	ListView 리스트뷰 연습3 - 커스텀 리스트뷰 (Custom ListView)	2020.12.14	906

프로그램언어

프로그램언어

ViewFlipper 사용하기

단축키

단축키

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

ViewFlipper 사용하기

단축키

단축키