[kotlin] 안드로이드 DrawerLayout

Leechaeyeon·2023년 7월 3일

코틀린 안드로이드

목록 보기

8/21

DrawerLayout

좌측 상단의 네비게이션 버튼을 누르면 좌측에서 메뉴가 나타나는 UI

-> 기본으로 설정시 위과 같이 화면이 나온다.

-> 보면 3개의 fragment가 배치되어 있음

activity_main.xml

activity_main.xml은 include와 NavigationView로 구성되어 있다.
Include는 app_bar_main.xml 파일이 설정되어 있다.
NavigationView에는 좌측에서 메유가 나타날 수 있게 해주는 View이다.
NavigationView의 headerLayout은 nav_header_main.xml이 설정되어 있음
menu 에는 menu/activity_main_drawer.xml이 설정되어 있다.

app_bar_main.xml

여기서 중요한 부분은 Toolbar와 include 부분이다.
**
화면의 Toolbar에 관련된 설정을 하겠다면 이 부분에서 해주면 된다. **
- 실제 건들여서 사용할 부분
Include에는 layout/content_main.xml파일이 설정되어 있다.

content_main.xml

NavHostFragment가 배치되어 있다.
보여주고자 하는 Fragment들을 설정하는 부분으로 코드에서 설정하면 된다.
NavHostFragment의 navGraph 속성에 보여줄 Fragment들이 등록되어 있는 xml 파일을 설정한다.

nav_header_main.xml

좌측에서 나타나는 NavigationView의 상단 부분에 해당한다.
이 부분은 애플리케이션에 맞게 자유롭게 구성한다.

menu/activity_main_drawer.xml

좌측에서 나타나는 NavigationView의 하단 부분에 해당한다.
메뉴 파일을 이용해 사용자가 선택할 화면 목록을 보여준다.

Values/strings.xml

보여줄 프로그먼트의 이름을 설정한다.

custom drawerLayout

MainActivity.kt의 step1

1. nav_header_main.xml 작업

이 부분은 로그인한 사용자와 관련된 정보를 보여주는 부분
보통 로그인한 사용자에 따라 표시되는 데이터가 다르기 때문에 코드로 처리하는 것이 일반적이다.

val headerLayout = binding.navView.getHeaderView(0) as LinearLayout
        // 하위의 View들을 추출한다.
val navHeaderMainBinding = NavHeaderMainBinding.bind(headerLayout)
navHeaderMainBinding.imageViewHeader.setImageResource(R.drawable.imgflag8)
        // 이미지가 너무 크면 xml에서 고정하거나, 이미지 사이즈를 정해서 이미지 사이즈에 맞게 가져온다.
navHeaderMainBinding.textViewHeader1.text = "이 채연"
navHeaderMainBinding.textViewHeader2.text = "난... ㄱ ㅏ끔...  눈물을 흘린 ㄷ ㅏ .... "

xml에서 아이디를 정해서 지정하면됨

나중에 로그인한 회원의 정보를 DB에서 받아와서 하면 될 듯

2. 새로 등록할 Fragment 를 만든다.

총 2개를 만들었다.

layout/fragmentFirst,second를 만들어서 배치했다.

3. values/string.xml

각 프래그먼트의 이름으로 사용할 문자열을 등록해준다.

    <string name="first_name">First</string>
    <string name="second_name">Second</string>

4. navigation/mobile_navigation.xml 작업

사용할 프래그먼트들을 설정해 준다.

원래있던 걸 지우고 + 를 누른다.

여기서 등록할 것을 선택하고
화면에 우클릭을 눌러 AutoArrage를 한다 .

처음에 나올 것을 지정한다.

<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/mobile_navigation"
    app:startDestination="@id/firstFragment">

3번에서 작성한 string을 설정한다.

5. menu/activity_main_drawer.xml 작업

메뉴를 등록한다.
주의!!!!! 메뉴 항목의 id는 mobile_navigation.xml에 등록한 fragment들의 id와 일치해야함
사용자가 선택한 메뉴의 id와 동일한 id로 등록되어 있는 프래그먼트가 나타난다.

<group android:checkableBehavior="single">
        <item android:title="첫 번째 프래그먼트"
            android:id="@+id/firstFragment"/>
        <item android:title="두 번째 프래그먼트 "
            android:id="@+id/secondFragment"/>
</group>

ID 꼭 잘 지켜야 함

6. mainActivity.kt 작업

appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.firstFragment,R.id.secondFragment
            ), drawerLayout
        )