[Android Studio/Kotlin] fragment 사용법 1 (fragment 교체)

프래그먼트를 활용하여 navigation bar를 만들어보려고 한다.

 

하단의 navigation bar의 메뉴를 선택하면 해당 메뉴로 fragment를 교체하는 방식이다.

 

먼저 레이아웃의 경우 위에는 프래그먼트가 들어가야하고 아래에는 navigation bar가 들어가도록 짜야한다.

 

메인 액티비티에서 linear layout (vertical)을 만들고 NavHostFragment를 검색하여 추가한다.

NavHostFragment를 추가하면 다음과 같은 화면이 뜬다.

+를 눌러서 원하는 이름을 입력하고 resource file을 추가해준다.

추가된 resource file을 선택하면 자동으로 필요한 라이브러리들을 추가해준다.

 

 

이제 navigation 디렉토리 안에 만든 xml 파일이 존재하는 모습을 확인할 수 있다.

 

그 파일안에 왼쪽 상단에 + 버튼을 눌러서 fragment들을 생성해줘야 한다.

create new destination으로 blank fragment들을 생성해준다.

위에 집 모양이 있는 fragment가 메인 fragment이고 우리가 처음 보게 될 화면이다.

 

만약에 이 홈을 바꾸고 싶다면 아래와 같이 바꿀 fragment를 누르고 왼쪽 상단의 집 모양 버튼을 누르면 된다.

 

blankFragmet에서 firstFragment와 secondFragment로 갈 수 있도록 만들 예정이다.

 

fragment를 클릭하면 오른쪽에 점이 나오는데 이 점을 끌어서 fragment에 연결해서 갈 수 있는 곳을 표현이 가능하다.

blankFragment에는 버튼 두 개를 넣어주었고  first와 second는 적절히 꾸며준다.

 

나는 그냥 텍스트로 서로 다른 프래그먼트라는 것을 보여줬다.

 

이제 버튼에 액션을 추가하여 눌렀을 때 프래그먼트를 교체해야 한다.

 

viewBinding을 사용할 것이기 때문에 app 수준의 build.gradle의 android 안에 다음 코드를 추가하고 sync now 버튼을 누른다.

 

viewBinding의 자세한 사용법 https://growth-coder.tistory.com/30

viewBinding{
	enabled = true
}

아래는 추가한 모습

android {
    namespace 'com.example.fragpractice'
    compileSdk 32

    defaultConfig {
        applicationId "com.example.fragpractice"
        minSdk 24
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    viewBinding{
        enabled=true
    }
}

fragment에서 onCreateView함수 에서는 binding을 설정해주었고 onViewCreated 함수를 오버라이딩하여 버튼 이벤트를 설정해주었다.

 

id가 btnFirst인 버튼을 클릭하면 fragment를 교체하는 코드는 아래와 같다.

binding?.btnFirst?.setOnClickListener { 
    findNavController().navigate(R.id.action_blankFragment_to_firstFragment2)
}

navigation 디렉토리안의 xml 파일에 갈 수 있는 곳을 설정해두었다면 action_(홈 프래그먼트)_to_(교체할 프래그먼트)

이렇게 아이디가 자동으로 생성되므로 이를 이용하면 된다.

 

메인 프래그먼트(blankFragment) 전체 코드

class BlankFragment : Fragment() {

    var binding:FragmentBlankBinding?=null
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentBlankBinding.inflate(inflater)
        return binding?.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        binding?.btnFirst?.setOnClickListener {
            findNavController().navigate(R.id.action_blankFragment_to_firstFragment2)
        }
        binding?.btnSecond?.setOnClickListener {
            findNavController().navigate(R.id.action_blankFragment_to_secondFragment2)
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        binding=null
    }
}

 

다시 메인 액티비티에서 NavHostFragment를 추가하고 위에서 만들어 놓은 xml 파일을 선택한다.

이제 first 버튼을 누르면 firstFragment로 교체되고 뒤로가기를 누르면 홈 화면이 나온다.

 

다음 포스팅은 액션 바를 띄우고 뒤로가기 버튼을 만들어보려 한다.