[Android] 안드로이드 Fragment에서 Fragment 이동 및 애니메이션 효과

오늘도 여전히 개발하고 있는 모바일 앱을 계속 개발하던 중에 문제가 발생했다.

바로 Fragment에서 Fragment로 이동해야 하는 문제이다.

현재 개발중인 모바일앱은 여러 Fragment를 사용중인데 MainActivity에 툴바만 있고 그 위에 MainFragment로 감싼 형태이다.

보통이면 MainFragment에서 버튼을 누르면 다른 Activity로 넘어가게 만들면 편한데 내가 개발중인 모바일 앱은 사이드 메뉴를 오픈 UI를 사용해서 사이드메뉴에서 버튼을 눌렀을 때 Fragment로 이동되는 방식이기에 Activity로 전환되도록 손보기엔 역부족이었다.

그래서 Fragment에서 Fragment로 이동하는 방법은 없을까? 라고 생각하였다.

다행이도 물론 있었다. 지금부터 보도록 하겠다.

Fragment에서 Fragment 전환

---

먼저 MainActivity로 들어가준다.

MainActivity.java

public void replaceFragment(Fragment fragment) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.content_frame, fragment).commit();
    }

그리고 replaceFragment라는 함수를 만들어주고 위와 같은 코드를 작성해준다.

저기서 R.id.content_frame 부분은 activity_main.xml에 레이아웃 id를 적어주면 된다.

replaceFragment 함수를 작성했으면 어플이 실행됐을 때 MainActivity 위에 바로 감싸주는 Fragment로 가준다.

MainFragment.java

protected int res;

public static MainFragment newInstance(int resId) {
      MainFragment mainFragment = new MainFragment();
      Bundle bundle = new Bundle();
      bundle.putInt(Integer.class.getName(), resId);
      contentFragment.setArguments(bundle);
      return mainFragment;
}

@Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       res = getArguments().getInt(Integer.class.getName());
   }


public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);

        img_drink = rootView.findViewById(R.id.img_drink);
        img_drink.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ((MainActivity)getActivity()).replace(CoffeeFragment.newInstance(res));
            }
        });

먼저 res를 설정해주고 Oncreate 함수안에 res를 정의해준다.

그리고 newInstance를 정의해준뒤 MainFragment의 onCreateView 부분에 화면전환때 쓰일 이미지나 버튼을 설정해주고 setOnclickListener를 활성화해준다.

그리고 onClick함수 안에 ((MainActivity)getActivity()).replace(CoffeeFragment.newInstance(res))를 입력해준다.

이러면 끝이다.

버튼을 누르면 정상적으로 Fragment 간 이동이 되는 것을 볼 수 있다.

하지만 화면전환 시에 모션이 너무 딱딱한 감이 들었다.

그래서 화면전환 애니메이션을 추가해보기로 하였다.

화면전환 애니메이션 추가하기

---

먼저 화면전환에 쓰일 xml 코드를 입력해줄 것이다.

fadein.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromAlpha="0.0"
    android:toAlpha="1.0" />

fadeout.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />

fadein과 fadeout을 먼저 입력해준다.

그리고 아까 입력하였던 MainActivity에 replaceFragment 함수로 가준다.

public void replace(Fragment fragment) {
        ~
        fragmentTransaction.setCustomAnimations(R.anim.fadein, R.anim.fadeout, R.anim.fadein, R.anim.fadeout);
        fragmentTransaction.replace(R.id.content_frame, fragment).commit();
    }

fragmentTransaction.setCustomAnimations(R.anim.fadein, R.anim.fadeout, R.anim.fadein, R.anim.fadeout); 코드만 commit 전에 입력해주면 끝이다.

실행결과

---

정상적으로 Fragment간 전환이 되고 애니메이션까지 잘 적용된 것을 볼 수 있다.