728x90
프래그먼트 (Fragment)
- 액티비티 위에서 동작하는 모듈화 된 사용자 인터페이스
- 액티비티와 분리되어 독립적으로 동작할 수 없다
- 여러 개의 프래그먼트를 하나의 액티비티에 조합하여 창이 여러 개인 UI를 구축할 수 있다
- 하나의 프래그먼트를 여러 액티비티에서 재사용할 수 있다
1. 액티비티와 프래그먼트 비교
- 액티비티
- 시스템의 액티비티 매니저에서 인텐트를 해석해 액티비티 간의 데이터를 전달 - 프래그먼트
- 액티비티의 프래그먼트 매니저에서 메서드로 프래그먼트 간의 데이터를 전달
2. 프래그먼트를 사용하는 이유?
Activity로 화면을 넘기는 것보다 Fragment로 일부만 바꾸는 것이 자원 이용량이 적어 속도가 빠르기 때문
3. 프래그먼트를 정의하기
3-1. 안드로이드스튜디오에서 File → New → Fragment → Fragment(Blank)를 이용하여 생성
3-2. ConfigureComponent 대화창에서 아래와 같이 설정 후, Finish
- FragmentName = FirstFrgment
- FragmentLayoutName = fragment_first
- SourceLanguage = Kotlin
3-3. fragment_first.xml
더보기
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#F19B9B"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="프래그먼트1"
android:textAllCaps="false"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
3-4. fragment_second.xml
더보기
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#C785D3"
tools:context=".SecondFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="프래그먼트2"
android:textAllCaps="false"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
3-5. activitiy_main.xml에 fragment를 표시할 FrameLayout과 버튼 2개 추가
더보기
<?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">
<FrameLayout
android:id="@+id/framLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintBottom_toTopOf="@+id/btn_fragment1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn_fragment1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Frag1"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/btn_fragment2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/framLayout" />
<Button
android:id="@+id/btn_fragment2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Frag2"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/btn_fragment1"
app:layout_constraintTop_toBottomOf="@id/framLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
3-6. MainActivity.kt에 Fragment 추가
하기 전에 뷰 바인딩 추가 + Gradle에 라이브러리 추가해 주기
더보기
package com.android.ex_view2
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.TextUtils.replace
import androidx.fragment.app.Fragment
import androidx.fragment.app.commit
import com.android.ex_view2.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(binding.root)
binding.apply {
btnFragment1.setOnClickListener {
setFragment(FirstFragment())
}
btnFragment2.setOnClickListener {
setFragment(SecondFragment())
}
}
setFragment(FirstFragment())
}
private fun setFragment(frag: Fragment) {
supportFragmentManager.commit {
replace(R.id.framLayout, frag)
setReorderingAllowed(true)
addToBackStack("")
}
}
}
결과
728x90
'코틀린(Kotlin) > TIL' 카테고리의 다른 글
[코틀린(Kotlin)] 다이얼로그 (0) | 2024.01.07 |
---|---|
[코틀린(Kotlin)] 프래그먼트 데이터 전달 (0) | 2024.01.07 |
[코틀린(Kotlin)] 리사이클러 뷰 (RecyclerView) (1) | 2024.01.05 |
[코틀린(Kotlin)] 어댑터 뷰(AdapterView), 리스트 뷰(ListView), 그리드 뷰(GridView) (1) | 2024.01.05 |
[코틀린(Kotlin)] 뷰바인딩(ViewBinding) (1) | 2024.01.05 |