ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [안드로이드/코틀린] BottomNavigationView 하단 탭바 만들기
    창업실무/개발 2020. 4. 17. 21:09

    앱 하단에 탭 메뉴를 구성하고 각 메뉴를 누를 때마다 화면이 바뀌는 기능을 구현하고자 한다.

     

     

     

    1. 메인 액티비티에 프레임 레이아웃과 바텀네비게이션뷰 추가하기

     

    activity_main.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">
    
        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/navigation"
            app:layout_constraintTop_toTopOf="parent" >
        </FrameLayout>
    
    
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:itemIconTint="@drawable/item_color"
            app:itemTextColor="@drawable/item_color"
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/navigation_items"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

    여기서 app:itemIconTint와 app:itemTextColor는 하단 탭바에서 아이콘과 타이틀의 색상을 지정하는 속성값인데 아이콘을 클릭했을 때의 색상을 바꾸고 싶다면 drawable 폴더에 우클릭을 하여 드로어블 리소스 파일을 생성해주면 된다.

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:color="#000000"/>
        <item android:color="#aaaaaa"/>
    </selector>

    나는 클릭했을 때 검은색(#000000), 평상 시에 회색(#aaaaaa)을 지정했다.

    색상을 지정했으면 아까 언급했던 app:itemIconTint와 app:itemTextColor 속성에 @drawable/item_color를 넣어준다.

     

     

     

    2. 하단 탭을 구성할 메뉴 xml 파일 만들기

     

    이제 res폴더에 우클릭을 해서 New > 안드로이드 리소스파일을 만든다. 이 때 리소스 타입은 메뉴로 한다.

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@+id/action_main"
            android:enabled="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/title_main" />
    	
    	...
        
        <item
            android:id="@+id/action_account"
            android:enabled="true"
            android:icon="@drawable/ic_account_circle_black_24dp"
            android:title="@string/title_account" />
    
    </menu>

    바텀네비게이션뷰는 3개 ~ 5개의 아이템을 추가해야 한다고 가이드라인에 나와있다.

     

     

     

    3. 화면을 구성할 프래그먼트 만들기

     

    java 폴더 아래 패키지명 폴더에 우클릭하여 프래그먼트만 모아놓을 패키지를 하나 만들고 다시 그 패키지를 우클릭하여 New > Fragment > Fragment(Blank) 를 만든다. 변경할 화면 갯수만큼 만들고 include fragment factory methods?에 체크 해제한다. 화면이 전환되는 것을 확인하기 위해 프래그먼트마다 배경색 속성을 추가해도 좋다.

     

     

     

    4. 메인액티비티에 네비게이션 아이템 셀렉티드 리스너를 추가한다.

     

    class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {
        
        override fun onNavigationItemSelected(p0: MenuItem): Boolean {
            when(p0.itemId){
                R.id.action_main ->{
                    val transaction = supportFragmentManager.beginTransaction()
                    transaction.replace(R.id.frame,MainFragment())
                    transaction.commit()
                    return true
                }
                
                ...
                
                R.id.action_account ->{
                val transaction = supportFragmentManager.beginTransaction()
                transaction.replace(R.id.frame, AccountFragment())
                transaction.commit()
                return true
            	}
            }
            return false
        }
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    
            navigation.setOnNavigationItemSelectedListener(this)
        }
    }

     

    댓글 1

ⓒ 2019. 도니박의창업활동로그. All rights reserved.