안드로이드 ViewFlipper(터치로 화면넘기기) 예제 따라하기

- 터치로 넘기는 엑션을 취하면 이미지를 넘기는 간단한 예제이다.(자동넘기기도 가능하다)
- 이를 활용해서 내 App에 적목시켜보자.

-Java 소스 

// View.OnTouchListener 인터페이스와

// CompoundButton.OnCheckedChangeListener 인터페이스 구현 함

public class MyViewFlipper extends Activity implements View.OnTouchListener,

CompoundButton.OnCheckedChangeListener {

CheckBox checkBox;

ViewFlipper flipper;

// 터치 이벤트 발생 지점의 x좌표 저장

float xAtDown;

float xAtUp;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

checkBox = (CheckBox) findViewById(R.id.chkAuto);

checkBox.setOnCheckedChangeListener(this);

flipper = (ViewFlipper) findViewById(R.id.viewFlipper);

flipper.setOnTouchListener(this);

// ViewFlipper에 동적으로 child view 추가

TextView tv = new TextView(this);

tv.setText("View 4\nDynamically added");

tv.setTextColor(Color.CYAN);

flipper.addView(tv);

}

// View.OnTouchListener의 abstract method

// flipper 터지 이벤트 리스너

@Override

public boolean onTouch(View v, MotionEvent event) {

// 터치 이벤트가 일어난 뷰가 ViewFlipper가 아니면 return

if (v != flipper)

return false;

if (event.getAction() == MotionEvent.ACTION_DOWN) {

xAtDown = event.getX(); // 터치 시작지점 x좌표 저장

} else if (event.getAction() == MotionEvent.ACTION_UP) {

xAtUp = event.getX(); // 터치 끝난지점 x좌표 저장

if (xAtUp < xAtDown) {

// 왼쪽 방향 에니메이션 지정

flipper.setInAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_left_in));

flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_left_out));

// 다음 view 보여줌

flipper.showNext();

} else if (xAtUp > xAtDown) {

// 오른쪽 방향 에니메이션 지정

flipper.setInAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_right_in));

flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_right_out));

// 전 view 보여줌

flipper.showPrevious();

}

}

return true;

}

// CompoundButton.OnCheckedChangeListener의 abstract method

// 책크박스 책크 이벤트 리스너

@Override

public void onCheckedChanged(CompoundButton view, boolean isChecked) {

Log.w("checked", Boolean.toString(isChecked));

if (isChecked == true) {

// 왼쪽 에니메이션 설정

flipper.setInAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_left_in));

flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_left_out));

// 자동 Flipping 시작 (간격 3초)

flipper.setFlipInterval(3000);

flipper.startFlipping();

} else {

// 자동 Flipping 해지

flipper.stopFlipping();

}

}

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

    <CheckBox

        android:id="@+id/chkAuto"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Check for Auto Flip" />

    <ViewFlipper

        android:id="@+id/viewFlipper"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" >

        <TextView

            android:id="@+id/view1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="View 1"

            android:textColor="#FF0000"

            android:textSize="30px" />

        <TextView

            android:id="@+id/view2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="View 2"

            android:textColor="#00FF00"

            android:textSize="30px" />

        <TextView

            android:id="@+id/view3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="View 3"

            android:textColor="#0000FF"

            android:textSize="30px" />

    </ViewFlipper>

</LinearLayout>
-------------------------------------------------------------------------------------------------------
 

에니메이션을 위한 xml 추가.
-------------------------------------------------------------------------------------------------------
- push_left_in.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="300"/>

<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />

</set>
-------------------------------------------------------------------------------------------------------- - push_left_out.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="300"/>

<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />

</set>

 -------------------------------------------------------------------------------------------------------- push_right_in.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="300"/>

<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />

</set>
--------------------------------------------------------------------------------------------------------
- push_right_out.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="300"/>

<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />

</set> 
-------------------------------------------------------------------------------------------------------- - 실행화면