[Android, Kotlin] Fragment

1. 기능 구현

• 화면 상단에 프레그먼트 1~3 을 불러오는 버튼을 만들어보자.
• 버튼 클릭 시, 해당 프레그먼트를 표시 하도록 해보자.

 
 

2. Android Studio에서 기본 프로젝트(with empty activity) 생성하자!

생성시 'Empty Activity'로 기본 생성

 
 

3. ViewBinding 사용을 위한 build.gradle 설정

  android {
          // 뷰 바인딩 옵션 활성화
          viewBinding {
              enabled = true
          }
      }

 
 

4. activity_main.xml (화면 구성)

• 최상단 LinearLayout 안에 1. LinearLayout을 만들어 Button 3개 배치 + 2. FragmentLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:orientation="horizontal">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn_fragment1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="프레그먼트1"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn_fragment2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="프레그먼트2"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn_fragment3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="프레그먼트3"/>

    </LinearLayout>

    <FrameLayout
        android:id="@+id/main_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp"/>

</LinearLayout>

 
 

5-1. Fragment 별 화면 구성 (frag1.xml, frag2.xml, frag3.xml)

res -> layout -> New -> Layout Resource File : frag1.xml, frag2.xml, frag3.xml 생성

ex) frag1: 배경 색(android:background="@color/purple_200")과 텍스트(android:text="프레그먼트 1")만 다르게 해보자.

<?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"
    android:background="@color/purple_200"
    >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="프레그먼트 1"
        android:textColor="#000000"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 
 

5-2. Fragment 별 화면 구성 (Fragment1.kt, Fragment2.kt, Fragment3.kt)

• 패키지명에서 우클릭 -> New -> Kotlin File/Class : Fragment1.kt, Fragment2.kt, Fragment3.kt 생성
• onCreateView() override

  • 앞서 만들어 놓았던 frag.xml과 연결(inflate)

ex) Fragment1.kt

class Fragment1:Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // frag1.xml과 연결 (main 에서의 setContentView 과 같은 역할)
        val view = inflater.inflate(R.layout.frag1, container, false)
        return view
    }
}

 
 

6. MainActivity.kt

• Button 별 setOnClickListener 설정
• setFrag() 메소드 구현 : 입력된 fragNum에 따라 when 구문을 통해 Fragment 교체 수행

  supportFragmentManager.beginTransaction()

  • FragmentTransaction 에 대한 인스턴스를 생성하여 Fragment에 대한 다향한 Transaction을 수행한다.
  • commit() : Transaction의 마지막에 항상 호출해야함.
    즉, commit은 FragmentManager 에게 모든 Transaction에 대한 연산이 끝났으니 그것을 수행하라는 말과 같다.

class MainActivity : AppCompatActivity() {

    private var mBinding :ActivityMainBinding? = null
    private val binding get() = mBinding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        setFrag(0)

        binding.btnFragment1.setOnClickListener {
            setFrag(0)
        }
        binding.btnFragment2.setOnClickListener {
            setFrag(1)
        }
        binding.btnFragment3.setOnClickListener {
            setFrag(2)
        }
    }

    // MainActivity 와 Fragment 간의 연결 설정
    private fun setFrag(fragNum:Int) {
        val ft = supportFragmentManager.beginTransaction()
        when(fragNum){
            0 -> {
                ft.replace(R.id.main_frame, Fragment1()).commit()
            }
            1 -> {
                ft.replace(R.id.main_frame, Fragment2()).commit()
            }
            2 -> {
                ft.replace(R.id.main_frame, Fragment3()).commit()
            }
        }
    }
}

 
 

7. 실행결과

상단의 버튼을 순서대로 클릭 시, 다음과 같다.

 
 

8. Reference

유튜버 홍드로이드님의 안드로이드 코틀린 앱 만들기 #11