[안드로이드 코틀린] Navigation component part6 - 애니메이션 화면 변경하는 방법

안녕하세요.

이번 시간에는 Navigation Component를 이용해서 화면 이동시에 애니메이션 적용하는 방법에 

대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다.

2022.12.19 - [안드로이드] - [안드로이드 코틀린] Navigation component part5 - 프래그먼트 간에객체 쉽게 보내는 방법

[안드로이드 코틀린] Navigation component part5 - 프래그먼트 간에객체 쉽게 보내는 방법

---

목차

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기
4. 프래그먼트 생성
5. 내비게이션 파일에 프래그먼트 연결
6. 프래그먼트 설정
7. 애니메이션 파일 만들기
8. 메인 화면 구성 activity_main.xml

---

1. 실행 화면

 

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'

3. 내비게이션 파일 만들기

res 선택 ->  마우스 오른쪽 클릭 -> new -> Android Resource File

파일 이름: my_nav

Resource type: Navigation

내비게이션 폴더 생성과 파일이 만들어집니다.

4. 프래그먼트 생성

- 설명

 1. 3개의 프래그먼트를 생성합니다.

 2. 파일명은 FirstFragment, HomeFragment, SecondFragment

 3. app 선택 -> New -> Fragment -> Fragment (Blank)

 

반응형

 

5. 내비게이션 파일에 프래그먼트 연결

- 설명 - 

 1. home_to_first

   home에서 first 화면으로 이동하는 액션ID

 2. home_to_second

   home에서 second 화면으로 이동하는 액션ID

 3. first_to_home

   first에서 home 화면으로 이동하는 액션ID

 4. second_to_home

   second에서 home 화면으로 이동하는 액션ID

 5. enterAnim

   이동할 화면에 적용되는 애니메이션

 6. exitAnim

   현재 화면에 적용되는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/my_nav"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.navigationanimation.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" >
        <action
            android:id="@+id/home_to_first"
            app:destination="@id/firstFragment"
            app:enterAnim="@anim/from_left"
            app:exitAnim="@anim/to_right" />
        <action
            android:id="@+id/home_to_second"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/from_right"
            app:exitAnim="@anim/to_left" />
    </fragment>

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.navigationanimation.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first" >
        <action
            android:id="@+id/first_to_home"
            app:destination="@id/homeFragment"
            app:enterAnim="@anim/from_right"
            app:exitAnim="@anim/to_left" />
    </fragment>

    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.navigationanimation.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >
        <action
            android:id="@+id/second_to_home"
            app:destination="@id/homeFragment"
            app:enterAnim="@anim/from_left"
            app:exitAnim="@anim/to_right" />
    </fragment>
</navigation>

 

6. 프래그먼트 설정

 

fragment_first.xml

- 설명 -

 1. 현재 화면 알려주는 TextView

 2. Home 화면으로 이동하는 Button

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".FirstFragment">

    <TextView
        android:id="@+id/first_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="First Fragment"
        android:textSize="40sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/first_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/first_text"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="HOME"
        android:textSize="20sp" />
</RelativeLayout>

 

fragment_home.xml

- 설명 -

 1. 현재 화면 알려주는 TextView

 2. First 화면으로 이동하는 Button

 3. Second 화면으로 이동하는 Button

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".HomeFragment">

    <TextView
        android:id="@+id/home_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="Home Fragment"
        android:textSize="30sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/home_first_btn"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/home_text"
        android:layout_alignStart="@id/home_text"
        android:layout_marginStart="30dp"
        android:layout_marginTop="30dp"
        android:text="first"
        android:textSize="20sp" />

    <Button
        android:id="@+id/home_second_btn"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/home_text"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="30dp"
        android:text="second"
        android:textSize="20sp" />
</RelativeLayout>

 

fragment_second.xml

- 설명 -

 1. 현재 화면 알려주는 TextView

 2. Home 화면으로 이동하는 Button

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".SecondFragment">

    <TextView
        android:id="@+id/second_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="Second Fragment"
        android:textSize="40sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/second_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/second_text"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="HOME"
        android:textSize="20sp" />
</RelativeLayout>

 

FirstFragment.kt

- 설명 -

1. findNavController().navigate(R.id.first_to_home)

   FIrst에서 Home으로 이동

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_first, container, false)

        val firstBtn = view.findViewById<Button>(R.id.first_btn)

        //버튼 이벤트(홈으로 이동)
        firstBtn.setOnClickListener {
            findNavController().navigate(R.id.action_firstFragment_to_homeFragment)
        }

        return view
    }

}

 

HomeFragment.kt

- 설명 -

1. findNavController().navigate(R.id.second_to_home)

   Home에서 First로 이동

 2. findNavController().navigate(R.id.home_to_second)

  Home에서 Second 로 이동

class HomeFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_home, container, false)

        val homeFirstBtn = view.findViewById<Button>(R.id.home_first_btn)
        val homeSecondBtn = view.findViewById<Button>(R.id.home_second_btn)

        //firstFragment로 이동
        homeFirstBtn.setOnClickListener {
            findNavController().navigate(R.id.action_homeFragment_to_firstFragment)
        }

        //secondFragment로 이동
        homeSecondBtn.setOnClickListener {
            findNavController().navigate(R.id.action_homeFragment_to_secondFragment)
        }

        return view
    }

}

 

SecondFragment.kt

- 설명 -

 1.  findNavController().navigate(R.id.second_to_home)

   Second에서 Home으로 이동

class SecondFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_second, container, false)

        val secondBtn = view.findViewById<Button>(R.id.second_btn)

        secondBtn.setOnClickListener {
            findNavController().navigate(R.id.action_secondFragment_to_homeFragment)
        }

        return view
    }

}

7. 애니메이션 파일 만들기

- 폴더 생성 -

res 선택 ->  마우스 오른쪽 클릭 -> new -> Android Resource Directory

Directory name: anim

Resource type: anim

- 파일 만들기 -

anim 선택 ->  마우스 오른쪽 클릭 -> new -> Animation Resource File

from_left.xml 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="-100%"
        android:toXDelta="0%"
        android:duration="1000"/>
</set>

 

to_right.xml 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:duration="800"/>
</set>

 

 

from_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration="2000"/>
</set>

 

to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="-100%"
        android:duration="1000"/>
</set>

8. 메인 화면 구성 

activity_main.xml

- 설명 -

 1. 프래그먼트 보여주는 FragmentContainerView

<?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">


    <fragment
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_nav" />
</RelativeLayout>

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성