[안드로이드 코틀린] 프로젝트 - 프래그먼트를 이용한 네비게이션바

2023.7.24~25

 

1. 준비

1) 메인 액티비티

- activity_main.xml / MainActivity.kt

2) 네비게이션바 메뉴 (res > 우클릭 new > Android Resource Derectory, menu 추가 / menu resource file로 생성)

- bottom_nav.xml

3) 프래그먼트(네비게이션바를 이용하여 화면 전환을 위해 필요한 만큼의 프래그먼트를 만들어주면 됨)

- fragment_asmr.xml / AsmrFragment.kt

- fragment_book_search.xml / BookSearchFragment.kt

- fragment_home.xml / HomeFragment.kt

- fragment_book_shelf.xml / BookShelfFragment.kt

- fragment_my_page.xml / MyPageFragment.kt

 

2. xml 작성

- bottom_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="ASMR"
        android:id="@+id/asmr"
        android:icon="@drawable/bottom_asmricon" />
    <item android:title="책 검색"
        android:id="@+id/search"
        android:icon="@drawable/bottom_searchicon" />
    <item android:title="캐릭터"
        android:id="@+id/home"
        android:icon="@drawable/bottom_homeicon" />
    <item android:title="책장"
        android:id="@+id/shelf"
        android:icon="@drawable/bottom_bookshelficon" />
    <item android:title="마이페이지"
        android:id="@+id/mypage"
        android:icon="@drawable/bottom_mypageicon" />
</menu>

 

- activity_main.xml

    - @color/bottomNavColor의 경우 #00000000로 투명한 색상이다.

    - 이 프로젝트에선 네비게이션바가 투명하여 뒤의 배경이미지가 보여야했다.
    - 바를 투명하게 하면 경계선이 보이는데 이것도 투명하게 바꿔주었다. (outlineSpotShadowColor, outlineAmbientShadowColor) 

<?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="@drawable/background"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/bottomNavColor"
        android:outlineSpotShadowColor="@color/bottomNavColor"
        android:outlineAmbientShadowColor="@color/bottomNavColor"
        app:itemRippleColor="@color/bottomNavColor"
        app:itemTextColor="#666493"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

- fragment의 xml은 생략

 

 

2. xml 작성

- 네비게이션바에 아이콘이 아닌 이미지를 넣으니, 이미지의 색상이 나오지 않는 문제가 발생했다.

bottomNav.setItemIconTintList(null)

이 코드를 작성해 주었다. (아래의 링크를 참고해 문제를 해결했다.)

-  https://stackoverflow.com/questions/57861254/how-to-change-a-specific-icon-image-from-bottom-navigation-view 

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

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

        // 바텀 네비게이션 이동 구현
        var bottomNav = findViewById<BottomNavigationView>(R.id.bottomNav)

        bottomNav.setItemIconTintList(null);    // 아이콘 이미지 색상 보여줌

        // 네비게이션바 버튼에 따른 프래그먼트 이동
        bottomNav.run {
            setOnItemSelectedListener { item ->
                when(item.itemId) {
                    R.id.asmr -> {      // asmr
                        changeFragment(AsmrFragment())
                    }
                    R.id.search -> {    // 책 검색
                        changeFragment(BookSearchFragment.newInstance(userEmail))
                    }
                    R.id.home -> {      // 캐릭터(홈)
                        changeFragment(HomeFragment.newInstance(userEmail))
                    }
                    R.id.shelf -> {     // 책장
                        changeFragment(BookShelfFragment.newInstance(userEmail))
                    }
                    R.id.mypage -> {    // 마이페이지
                        changeFragment(MyPageFragment.newInstance(userEmail))
                    }
                }
                true
            }
        }
    }
    
    // 프래그먼트 이동 함수
    private fun changeFragment(fragment: Fragment) {
        supportFragmentManager
            .beginTransaction()
            .replace(R.id.frameLayout, fragment)
            .commit()
    }
}

 

결과

(스플래시는 지난 글을 참고하자)