Notice
Recent Posts
Recent Comments
Link
COCO World
[안드로이드/Kotlin]프래그먼트 만들기 본문
프래그먼트 이전에 바텀네비게이션바를 만들고 싶으시다면?
2022.12.08 - [Android] - [안드로이드/Kotlin] BottomNavigation Bar(바텀네비게이션바) 만들기
1. Fragment ?
: 프래그먼트는 사용자에게 인터페이스의 일부를 나타내 주는 하나의 페이지의 개념으로 제공된다. 액티비티와는 또 다른 개념이지만, 액티비티의 모듈식 section으로 접근하면 될 것 같다. 자체적인 생명주기를 가지고 있지만, 액티비티 내에 호스팅 되어 사용되기 때문에 액티비티 생명주기에 영향을 받는데, 예를 들어, 액티비티가 일시정지하는 경우, 그 안의 모든 프래그먼트도 일시 정지된다.
위의 완성된 모습에서처럼 내비게이션 바와 함께 페이지 처리로 많이 사용된다.
2. Fragment를 사용하기 위한 과정
- Fragment 파일 생성
- navigation 폴더와 navigation.xml 파일 생성 및 코드 구현
- bottom navigation bar menu.xml 파일이 필요
- MainActivity 코드 구현
- MainActivity.xml 코드 구현
** 위의 완성된 장면에서처럼 Bottom Navigation Bar 아직 안 만드셨거나, 필요하시다면 아래 포스팅을 참고해주세요 : )
https://cocoworld.tistory.com/4
[1] Fragment 파일 생성
** package폴더 > New > Fragment > Fragment (Blank)로 Fragment 파일을 만들어주세요.
** 만들고 나면, Fragment의 레이아웃 파일도 자동으로 생성됩니다.
New > Kotlin Class/File에서도 Fragmen 파일을 만들어도 상관없지만 레이아웃 파일은 생성되지 않기 때문에
따로 만들어줘야 해요.
** 저는 패키지 파일 하에 Fragment File만 담아놓을 수 있는 폴더를 만들어 넣어줬어요. 가독성도 좋고, 분류하기에도 편합니다.
[2] navigation 폴더와 main_navigation.xml 파일 생성
: navigation 폴더를 만들어야 navigation.xml 도 만들 수 있습니다. navigation.xml은 프래그먼트 간의 이동을 설정해줄 수 있는
destination을 제공해주는 역할을 합니다.
** fragment의 id값에는 navigation_main_meni.xml 에 선언한 item id값을 넣어줘야 합니다.
[3] main_navigation.xml에서 destination 설정
: [3] 과정을 통해 만들 프래그먼트들을 가져옵니다.
그다음 프래그먼트들끼리 1 on 1으로 드래그하여 연결시켜주고 나서, Code로 들어가 보면 코드는 자동으로 생성되어 있어요.
** 예를 들어, 1번째 프래그먼트에서 2번째 프래그먼트를 연결해주고, 2번째 프래그먼트에서 1번째 프래그먼트도 연결해줘야 합니다.
주고받는 연결고리가 모두 이어져야 해요.
** 코드로 작성해도 되지만, 아래처럼 이미지끼리 연결해주는 게 더 간편한 것 같습니다. 이미지가 헷갈리시면 코드로 작성해주세요.
** 3개의 프래그먼트가 모두 연결이 되었다면, 아래와 같은 모습을 확인할 수 있습니다.
잘 연결되어있는지 헷갈리다면, Component Tree 참고하면 좀 더 편할 수 있어요
** 이렇게 프래그먼트들끼리 연결하고 나서, Code로 들어가 보면, 코드는 자동으로 작성되어 확인만 해주면 됩니다.
저희는 이렇게 자동으로 생성된 Framgnet Id값은 Rename으로 재설정해줘야 합니다.
[3] main_navigation.xml의 Fragment id값과 바텀 내비게이션 바 메뉴 아이템 id값를 일치시켜주기
** menu item id값은 이전 바텀 내비게이션 바를 만들 때, menu 카테고리를 생성할 때 각 항목마다 부여한 id값입니다.
해당 카테고리를 누를 때 호출할 프래그먼트에 동일한 id값을 부여한다고 생각하시면 될 것 같습니다.
** menu item에 있는 Id값을 가져와 Rename 해주려고 시도하면, 이미 선언되어있는 값이라는 문구가 나와요.
나오는 게 맞습니다. 저희는 이미 menu item id값에 선언한 이름을 가져와서 집어넣어 주는 거니까요! 알겠다고 해주고 넘어갑니다.
** 아래의 해당 item id값들을 매치되는 Fragment id값에 Rename에 사용됩니다.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/navigation_category"
android:icon="@drawable/selector_category_icon"
android:title="카테고리"/>
<item android:id="@+id/navigation_home"
android:icon="@drawable/selector_home_icon"
android:title="홈"/>
<item android:id="@+id/navigation_cart"
android:icon="@drawable/selector_cart_icon"
android:title="장바구니"/>
</menu>[ navigation_main_menu.xml ]
[4] 코드 작성
[main_navigation.xml]
<?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/main_navigation"
app:startDestination="@id/navigation_home">
<fragment
android:id="@+id/navigation_cart"
android:name="com.shoppi.android.fragment.CartFragment"
android:label="CartFragment" >
<action
android:id="@+id/action_cartFragment_to_cartegoryFragment"
app:destination="@id/navigation_category" />
<action
android:id="@+id/action_cartFragment_to_homeFragment"
app:destination="@id/navigation_home" />
</fragment>
<fragment
android:id="@+id/navigation_category"
android:name="com.shoppi.android.fragment.CartegoryFragment"
android:label="CartegoryFragment" >
<action
android:id="@+id/action_cartegoryFragment_to_homeFragment"
app:destination="@id/navigation_home" />
<action
android:id="@+id/action_cartegoryFragment_to_cartFragment"
app:destination="@id/navigation_cart" />
</fragment>
<fragment
android:id="@+id/navigation_home"
android:name="com.shoppi.android.fragment.HomeFragment"
android:label="HomeFragment" >
<action
android:id="@+id/action_homeFragment_to_cartegoryFragment"
app:destination="@id/navigation_category" />
<action
android:id="@+id/action_homeFragment_to_cartFragment2"
app:destination="@id/navigation_cart" />
</fragment>
</navigation>
[MainActivity.xml]
<?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/container_main"
android:layout_width="0dp"
android:layout_height="0dp"
android:name="androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@id/navigation_main"
app:navGraph="@navigation/main_navigation"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation_main"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:menu="@menu/navigation_main_menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>
[MainActivity]
package com.shoppi.android
import android.animation.ObjectAnimator
import android.animation.PropertyValuesHolder
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.View
import android.view.animation.AnticipateInterpolator
import androidx.core.animation.doOnEnd
import androidx.navigation.fragment.findNavController
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.bottomnavigation.BottomNavigationView
private const val TAG = "MainActivity"
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// 바텀아이콘 그라데이션 컬러 안먹어서 선언
val bottomNavigationView = findViewById<BottomNavigationView>(R.id.navigation_main)
bottomNavigationView.itemIconTintList = null
// navHost에서 destination을 관리하는 객체
val navController = supportFragmentManager.findFragmentById(R.id.container_main)?.findNavController()
navController?.let {
bottomNavigationView.setupWithNavController(it)
}
}
}[Fragment.xml 파일들]
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Category Fragment"
android:textSize="36sp"
android:gravity="center"
android:background="#B7D8EA"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Home Fragment"
android:textSize="36sp"
android:gravity="center"
android:background="#D0F4C3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Cart Fragment"
android:textSize="36sp"
android:gravity="center"
android:background="#EAB7B7"/>
</androidx.constraintlayout.widget.ConstraintLayout>[navigation_main_menu.xml]
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/navigation_category"
android:icon="@drawable/selector_category_icon"
android:title="@string/lable_category_icon"/>
<item android:id="@+id/navigation_home"
android:icon="@drawable/selector_home_icon"
android:title="@string/lable_home_icon"/>
<item android:id="@+id/navigation_cart"
android:icon="@drawable/selector_cart_icon"
android:title="@string/lable_cart_icon"/>
</menu>[Fragment 클래스 목록]
package com.shoppi.android.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.shoppi.android.R
class CartegoryFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// inflate을 통해 Fragment클래스와 보여줄 xml레이아웃을 연결해주기
return inflater.inflate(R.layout.fragment_cartegory, container, false )
}
}package com.shoppi.android.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.shoppi.android.R
class CartFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_cart, container, false)
}
}package com.shoppi.android.fragment
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import com.shoppi.android.ProductDetailFragment
import com.shoppi.android.R
class HomeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_home, container, false) // fragment
}
}