Android Kotlin Bottom Navigation - 하단 네비게이션
Notepad96
·2022. 1. 12. 09:06
1. 결 과
# 이 글은 Bottom Navigation View를 정의하고 활용할 수 있는 기본적인 내용을 기술한다.
# Bottom Navigation의 있는 각 Item을 선택/미선택 시 스타일(색, 글자 크기) 변경 방법
# Fragment로 구성함으로써 각 탭 클릭 시 화면을 전환함
2. activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<LinearLayout
android:id="@+id/layout_nav_bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_above="@id/nav_main_bottom"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_main_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/black"
app:menu="@menu/nav_bottom"
app:labelVisibilityMode="labeled"
app:itemRippleColor="@color/black"
app:itemTextColor="@color/nav_bottom_color"
app:itemIconTint="@color/nav_bottom_color"
app:itemTextAppearanceActive="@style/TextAppearance.AppCompat.Menu"
app:itemTextAppearanceInactive="@style/MyTextSize"
/>
</RelativeLayout>
# LinearLayout(id: layout_nav_bottom) 프래그먼트의 화면을 보여줄 Layout
# BottomNavigationView 속성
- android:layout_alignParentBottom : parent layout인 RelativeLayout의 속성으로 레이아웃을 아래의 배치한다.
- app:menu : menu 파일과 연결하여 navigation 항목을 구성한다.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_main_bottom_home"
android:icon="@drawable/home"
android:title="Home" />
<item
android:id="@+id/nav_main_bottom_list"
android:icon="@drawable/list"
android:title="List" />
<item
android:id="@+id/nav_main_bottom_profile"
android:icon="@drawable/profile"
android:title="Profile" />
<item
android:id="@+id/nav_main_bottom_setting"
android:icon="@drawable/setting"
android:title="Setting" />
</menu>
(res/menu 디렉터리 생성 후 파일 생성)
- app:labelVisibilityMode
-> labeled/unlabeld : 클릭여부와 관계없이 Item의 텍스트를 보여줌/보여주지 않음
-> selected: 클릭 된 항목만 텍스트를 표시
- app:itemTextColor : Item의 텍스트 color 변경, color 파일을 생성하여 체크 여부의 따른 스타일 변경
- app:itemIconTint : Item의 아이콘 color 변경, color 파일을 생성하여 체크 여부의 따른 스타일 변경
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/white" />
<item android:color="@color/grey" />
</selector>
(res/color 디렉터리 생성 후 파일 생성)
- app:itemTextAppearanceActive : 현재 선택 중인 항목의 텍스트 크기 지정,
- app:itemTextAppearanceInActive : 현재 미선택 중인 항목들의 텍스트 크기 지정, style 선언 후 적용
3. MainActivity.kt
package com.example.navbottombar
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.navbottombar.NavBottom.NavBottomHome
import com.example.navbottombar.NavBottom.NavBottomList
import com.example.navbottombar.NavBottom.NavBottomProfile
import com.example.navbottombar.NavBottom.NavBottomSetting
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomHome()).commit()
nav_main_bottom.setOnItemSelectedListener {
when(it.itemId) {
R.id.nav_main_bottom_home -> {
supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomHome()).commit()
}
R.id.nav_main_bottom_list -> {
supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomList()).commit()
}
R.id.nav_main_bottom_profile -> {
supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomProfile()).commit()
}
R.id.nav_main_bottom_setting -> {
supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomSetting()).commit()
}
}
true
}
}
}
# Fragment인 NavBottomHome, NavBottomList, NavBottomProfile, NavBottomSetting을 생성하여 각각 레이아웃을 구성한다.
# activity_main.xml서 fragment를 표시할 Layout으로 LinearLayout(id=layout_nav_bottom)을 만들어 놨으며 각 항목 클릭 시 화면이 전환되도록 구성한다.
4. 전체 코드
'Android' 카테고리의 다른 글
Android Kotlin SnapHelper - 항목 단위로 스크롤 (0) | 2022.01.16 |
---|---|
Android Kotlin Recyclerview - 리스트 항목 클릭 시 스타일 변경 (0) | 2022.01.13 |
Android Kotlin Pop Menu - 메뉴 생성 (0) | 2021.12.26 |
Android Kotlin Context Menu - 컨텍스트 메뉴 (0) | 2021.12.22 |
Android Kotlin Option Menu - 옵션 메뉴 (0) | 2021.12.21 |