[안드로이드]ViewFlipper 화면전환 쉽게 만드는법

2020/12/19 - [안드로이드] - [안드로이드]라이브러리 찾아 등록하는 방법

이번 시간에는 화면전환을 쉽게 할 수 있는 ViewFlipper을 사용하는 방법을 알아보겠습니다.

버튼, 이미지뷰, 텍스트뷰를 순서대로 쉽게 전환시키는 간단한 예제를 만들겠습니다.

1. 화면구현(activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@android:anim/slide_in_left"
        >

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="버튼" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/ic_launcher_round" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView1"
                android:textSize="20sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView2"
                android:textSize="20sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView3"
                android:textSize="20sp" />
        </LinearLayout>
    </ViewFlipper>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="16dp"
        android:onClick="previousView"
        android:text="이전" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="16dp"
        android:onClick="nextView"
        android:text="다음" />

</RelativeLayout>

2.애니메이션 폴더생성(res -> new -> Android Resource Directory -> anim)

3.애니메이션 화면생성(anim -> Animation Resource File)

3-1 slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="50%p"
        android:toXDelta="0"
        />
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        />
</set>

3.2 slide_out_left_xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="0"
        android:toXDelta="-50%p"
        />
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        />
</set>

4.기능구현(MainActivity.java)

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;

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

        viewFlipper = findViewById(R.id.view_flipper);

        //텍스트뷰 추가
        TextView textView = new TextView(this);
        textView.setText("동적추가");
        textView.setGravity(Gravity.CENTER);
        viewFlipper.addView(textView);

    }

    //이전
    public void previousView(View v){

    viewFlipper.setInAnimation(this, R.anim.slide_in_right); //생길때 오른 -> 왼쪽
        viewFlipper.setOutAnimation(this, R.anim.slide_out_left);//사라질때 왼쪽으로
        viewFlipper.showPrevious();
    }

    //다음
    public void nextView(View v){

    viewFlipper.setInAnimation(this, android.R.anim.slide_in_left); //생길때 왼쪽 -> 오른쪽
        viewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);//사라질때 오른쪽
        viewFlipper.showNext();
    }
}

5.실행화면