[Android] ViewFlipper

ViewFlipper
두개 이상의 view에서 양쪽으로 넘길 수 있는 화면을 제공

 

ViewFlipper에는 화면 자동넘김과 탭으로 넘김이 있는데 탭하여 넘김을 구현

 

activity_main.xml

LinearLayout 내부에 양 옆으로 이동할 수 있는 버튼 previous와 next를 생성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <!-- LinearLayout 중첩 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
        <Button
            android:id="@+id/prev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:text="previoue" />
        <Button
            android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:text="next" />
    </LinearLayout>
    
    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vf">
        <!-- 1화면 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/sydney" />
        </LinearLayout>
        <!-- 2화면 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/bankok" />
        </LinearLayout>
        <!-- 3화면 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/newyork" />
        </LinearLayout>

    </ViewFlipper>
</LinearLayout>

3개의 View로 구성되기 때문에 ViewFlipper 내부에 LinearLayout을 각각 한개씩 생성하고 내부에는 ImageView를 넣어줌

 

MainActivity.java

ViewFlipper 와 두개의 Button을 연결

public class MainActivity extends AppCompatActivity {

    Button prev, next;
    ViewFlipper vf;

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

        prev = (Button)findViewById(R.id.prev);
        next = (Button)findViewById(R.id.next);
        vf = (ViewFlipper)findViewById(R.id.vf);

        // 이전 View로 이동하는 버튼
        prev.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                vf.showPrevious();
            }
        });
        
        // 다음 View로 이동하는 버튼
        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                vf.showNext();
            }
        });
    }
}

각 버튼의 onClick 이벤트에 있는 showPrevious()와 showNext() 메서드는 ViewFlipper내부의 3개의 View를 연속적으로 구성해 화면에 출력함