뷰 플리퍼 사용 예

[황정식]

: 안드로이드에서는 이미지 슬라이드와 같은 뷰를 쉽게 구현할 수 있도록 뷰플리퍼나 뷰페이저를 제공한다.

아래는 뷰플리퍼의 구현 예제인데, 구현 시나리오는 다음과 같다.

1. 뷰플리퍼 기본 레이아웃 정의

2. 뷰플리퍼에서 사용되는 애니메이션 정의

3. 뷰플리퍼 세부 기능을 구현하기 위해서 상속받은 리니어 레이아웃을 자바 소스에서 구현

4. 메인 액티비티에 구현된 뷰플리퍼를 포함.

==== activity_main.xml ====

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <!-- 구현된 뷰플리퍼를 메인 레이아웃에 포함시킨다. -->

    <com.example.sampleviewflipper.ScreenViewFlipper

        android:id="@+id/screen"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_margin="10dp" />

</RelativeLayout>

==== screenview.xml ====

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    >

    <!-- 

    active_main.xml 레이아웃에 포함되는 뷰로써, 뷰플리퍼의 뷰를 표시하는 버튼 아이콘과

    뷰플리퍼로 구성된다.

    뷰 플리퍼의 세부 기능은 이 레이아웃을 상속받는 자바 소스에서 구현된다.

     -->

    <LinearLayout 

    android:id="@+id/buttonLayout"  

   android:orientation="horizontal"

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:layout_gravity="center_horizontal"

   >

    </LinearLayout>

<ViewFlipper

android:id="@+id/flipper"  

   android:layout_width="match_parent" 

   android:layout_height="match_parent"

   >    

</ViewFlipper>

</LinearLayout>

==== ScreenViewFlipper.java ====

package com.example.sampleviewflipper;

import android.content.Context;

import android.graphics.Color;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.ViewFlipper;

/**

 * LinearLayout을 상속받아서 screenview.xml에 정의된 레이아웃을 inflater한다.

 * 결과적으로 이 클래스에서 정의된 LinearLayout이 메인 액티비티에 포함된다. 

 * @author hjs6877

 *

 */

public class ScreenViewFlipper extends LinearLayout implements OnTouchListener{

public static int countIndexes = 3;

LinearLayout buttonLayout;

ImageView[] indexButtons;

ImageView[] imgViewArr;

ViewFlipper flipper;

float downX;

float upX;

int currentIndex = 0;

public ScreenViewFlipper(Context context, AttributeSet attrs)

{

super(context, attrs);

init(context);

}

/**

* 터치 이벤트 발생시 호출 됨.

*/

@Override

public boolean onTouch(View v, MotionEvent event) {

if(v != flipper)

{

return false;

}

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

{

downX = event.getX();

}

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

{

upX = event.getX();

/**

* 뷰에서 터치 UP 했을때, 즉, 손가락을 떼었을떼의 위치 값이 뷰에서 터치 DOWN했을때 즉,

* 손가락으로 스크린을 눌렀을때의 위치값보다 작다면, 이말은 좌측으로 swipe 한다는 의미이다.

*/

if(upX < downX)

{

/**

* 애니메이션 적용.

*/

flipper.setInAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.wallpaper_open_enter));

flipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.wallpaper_open_exit));

/**

* 다음 슬라이드가 존재할 경우 다음 슬라이드를 보여준다.

*/

if(currentIndex < (countIndexes - 1))

{

flipper.showNext();

currentIndex++;

updateIndexes();

}

}

else if(upX > downX)

{

flipper.setInAnimation(AnimationUtils.loadAnimation(getContext(),

        R.anim.push_right_in));

       flipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(),

        R.anim.push_right_out));

       /**

        * 이전 플리퍼뷰가 존재할 경우, 이전 플리퍼뷰를 보여준다.

        */

       if (currentIndex > 0) {

        flipper.showPrevious();

        // update index buttons

        currentIndex--;

        updateIndexes();

       }

}

}

return true;

}

public void init(Context context)

{

setBackgroundColor(0xffbfbfbf);

/**

* screenview 레이아웃을 inflation한다.

*/

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

inflater.inflate(R.layout.screenview, this, true);

buttonLayout = (LinearLayout)findViewById(R.id.buttonLayout);

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

/**

* 플리퍼뷰에 터치 이벤트 리스너 등록.

*/

flipper.setOnTouchListener(this);

/**

* 레이아웃 속성 값 설정.

* xml에서 설정할 것을 자바 소스에서 프로그램으로 설정.

*/

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

params.leftMargin = 50;

indexButtons = new ImageView[countIndexes];

imgViewArr = new ImageView[countIndexes];

/**

* 현재의 플리퍼 뷰를 보여주기위한 상단의 버튼 아이콘 설정. 현재 보여지는 뷰의 버튼 아이콘은 녹색.

*/

for(int i=0; i < countIndexes; i++)

{

indexButtons[i] = new ImageView(context);

if(i == currentIndex)

{

indexButtons[i].setImageResource(R.drawable.green);

}

else

{

indexButtons[i].setImageResource(R.drawable.white);

}

indexButtons[i].setPadding(10, 10, 10, 10);

buttonLayout.addView(indexButtons[i], params);

ImageView imgView = new ImageView(context);

imgViewArr[i] = imgView;

if(i == 0)

{

imgViewArr[i].setImageResource(R.drawable.car1);

}

else if(i == 1)

{

imgViewArr[i].setImageResource(R.drawable.car2);

}

else

{

imgViewArr[i].setImageResource(R.drawable.car3);

}

flipper.addView(imgViewArr[i]);

}

}

private void updateIndexes()

{

for(int i = 0; i < countIndexes; i++)

{

if(i == currentIndex)

{

indexButtons[i].setImageResource(R.drawable.green);

}

else

{

indexButtons[i].setImageResource(R.drawable.white);

}

}

}

}

애니메이션 설정 xml은 생략.