[Android Studio] ViewFlipper

여러 개의 뷰들을 뷰 플리퍼에 포함시켜

뷰 플리퍼 내에 들어있는 여러가지 뷰 들중 하나의 뷰를 선택하여 보여줄 수 있게 한다.

<패턴 1>

ViewFlipper태그를 xml에 추가하고, 해당 태그 내부에 뷰 플리퍼에 속하게 할 뷰들을 추가한다.

그리고 나서 JAVA에서 findViewById로 flipper를 찾는다.

추가한 뷰는 첫번째 뷰부터 시작해서, 

showNext() //다음 뷰 보여주기

showPrevious() //이전 뷰 보여주기

setDisplayedChild(int whichChild) //원하는 인덱스의 뷰 보여주기

를 이용하여 보여줄 뷰를 전환할 수 있다.

예를 들어서

xml코드가 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.windows10.exflipper.MainActivity">

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#FF0000"></LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#FFFFFF">
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#777777"></LinearLayout>
    </ViewFlipper>

</LinearLayout>

이렇게 되어 있고

JAVA코드가 이렇게 되어 있다면

package com.example.windows10.exflipper;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

    private ViewFlipper flipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        flipper.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                flipper.showNext();
            }
        });
    }
}

뷰 플리퍼를 클릭할 때마다, 리니어 레이아웃 하나씩 보여주게 된다.

주의할 점은, xml에서 뷰 플리퍼의 Child로, ViewGroup(ex LinearLayout)이 아닌, View(ex TextView)를 넣게 되면

정상적으로 화면이 표시되지 않게 된다.

(ViewFlipper가 뷰그룹 단위로 화면을 전환하기 때문)

<패턴 2>

미리 xml에서 ViewFlipper의 원소를 추가하지 않고, 

필요한 요소를 JAVA코드에서 레이아웃 인플레이팅을 통하여 추가하는 방식이다.

이 방법은 xml에서 바로 추가하는 것보다 좀 더 유연할 수 있지만, 코드가 많이 길어진다는 단점이 있다.

예를 들어, xml이 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.windows10.exflipper.MainActivity">

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">
    </ViewFlipper>

</LinearLayout>

이고, JAVA가 

package com.example.windows10.exflipper;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

    private ViewFlipper flipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        LinearLayout linear[]=new LinearLayout[3];
        for(int i=0; i<3; i++){
            linear[i]=new LinearLayout(getApplicationContext());
        }

        linear[0].setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
        flipper.addView(linear[0]);
        linear[1].setBackgroundColor(getResources().getColor(R.color.colorPrimary));
        flipper.addView(linear[1]);
        linear[2].setBackgroundColor(getResources().getColor(R.color.colorAccent));
        flipper.addView(linear[2]);

        flipper.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                flipper.showNext();
            }
        });
    }
}

이라면, flipper에 addView메소드를 통하여 JAVA에서 만든 View를 추가할 수 있다.

뷰 플리퍼의 매끄러운 전환

일반적으로, 뷰 플리퍼는 위에서처럼 클릭하는 동작보다는 사용자가 옆으로 넘기는 동작을 통해 뷰를 전환하게 된다.

setOnTouchListener와 Animation을 동시에 사용하여 그것을 구현할 수 있다.

Animation은 http://blog.naver.com/rndrjs123/221038070076 을 참조하면 된다.

flipper.setOnTouchListener를 이용하여 터치리스너를 만든다.

onTouch메소드를 오버라이드하여 해당 기능을 구현한다.

클래스에 우선

float downX;
float upX;

처럼 float 타입 변수를 두개 만든다.

(반드시 메소드 바깥쪽에 만들어야 한다. 

내부 익명 클래스에 만들면 메소드가 종료됨과 동시에 값의 보존이 불가능하기 때문이다.)

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    //ACTION_DOWN is constant that means "A person's hand is put on touch panel".
    if(motionEvent.getAction()==MotionEvent.ACTION_DOWN){
        downX=motionEvent.getX();
    }
    //ACTION_UP is constant that means "A person's hand is put off on touch panel".
    else if(motionEvent.getAction()==MotionEvent.ACTION_UP){
        upX=motionEvent.getX();
        if (upX < downX){
            flipper.showNext();
        }else if(upX> downX){
            flipper.showPrevious();
    }
    return true;
}

이 메소드는 사용자가 터치패널을 눌렀을 때와 손을 떼었을 때의 X좌표값을 비교하여

오른쪽으로 넘겼는지, 왼쪽으로 넘겼는지를 판단하여 showNext(), showPrevious() 동작을 선택적으로 할 수 있게 하는 메소드이다.

이제 애니메이션을 다음 메소드를 이용하여 적용한다.

setInAnimation(Animation ani) //전환되는 뷰에서 표시될 뷰에 적용할 애니메이션

setOutAnimation(Animation ani) //전환되는 뷰에서 감춰질 뷰에 적용할 애니메이션

그러면 우리가 흔히 보던 ViewFlipper의 동작을 구현할 수 있게 된다.