[Android] Fragment, Navigation

지금 까지 화면 전환은 Activity 전환을 사용했다.

 

Fragment를 사용하면 한 Activity에서 Fragment전환을 통해 화면만 샥 바꿀 수 있음.

 

 

1. navigtion.xml생성

---

app단위에서 ResourceFile을 추가하자.

type을 Navigation으로 지정

 

자동으로 dependency가 추가된다. 편 ㅡ 안

 

 

 

2.NavHostFragment

---

NavHostFragent란? Fragment가 들어갈 위치, navigation에 따라 navHost에  올라가는 fragment가 전환됨.

 

사용할 Activity에서 NavHostFragment 추가

그러면 사용할 navigation을 추가할 수 있음.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">


    <androidx.fragment.app.FragmentContainerView
        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/main_nav"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

3. Fragment 생성

---

 

처음 보면 다른 코드도 많지만 아래 코드만 남기고 나머지는 삭제

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup


class FirstFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
   
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_first, container, false)
    }
    
}

생성된 fragment_first를 확인해 보자.

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="FirstFragment" />

</FrameLayout>

FrameLayout??? : 딱 하나의 view만 표시.

다른걸로 변경해도됨. ㅋㅋㅋ --> LinearLayout으로 바꿈

 

<?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_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment"
    android:orientation="vertical">

    <!-- TODO: Update blank fragment layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80sp">

        <Button
            android:id="@+id/btn1"
            android:text="1"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

        <Button
            android:id="@+id/btn2"
            android:text="2"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

        <Button
            android:id="@+id/btn3"
            android:text="3"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

    </LinearLayout>
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="FirstFragment" 
        android:textSize="30sp"/>

</LinearLayout>

 

 

 

4. Navigation 설정

---

 

다음과 같이 드래그를 통해 fragment를 이동하는 action을 만들 수 있다. id는 자동 생성됨.

 

 

 

5. Fragmet에서 action설정

---

각 fragment에 해당하는 버튼을 눌렀을 때 화면이 전환되도록 하자.

각 버튼이 눌렸을 때 위에서 생성한 action이 실행되면 됨.

class FirstFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment

        val view = inflater.inflate(R.layout.fragment_first, container, false)

        view.findViewById<Button>(R.id.btn2).setOnClickListener {
            it.findNavController().navigate(R.id.action_firstFragment_to_secondFragment)
        }

        view.findViewById<Button>(R.id.btn3).setOnClickListener {
            it.findNavController().navigate(R.id.action_firstFragment_to_thirdFragment)
        }

        return view
    }

}

 

 

 

GitHub - bsh6463/Inflearn_nav_fragment