안드로이드 // 툴바 toolbar / 네비게이션뷰 navigationView

 

코드 확인

https://github.com/jaybon1/androidwork/tree/master/toolbarTest

jaybon1/androidwork

 

 

구조

Frag와 관련된 것은 신경쓰지 말고 나머지만 확인하자

 

코드 설명

 

build.gradle(Module: app)

머터리얼 라이브러리를 추가한다

 

 

 

styles.xml

기본 액션바를 없애고 툴바를 만들 것이기 때문에 
NoActionBar를 입력하자

 

 

 

toolbar.xml

툴바 역할을 할 페이지를 만든다

렐러티브 레이아웃을 사용하고 넓이는 매치 높이는 직접 조절하였음
텍스트뷰를 하나 만들어서 중앙에 배치하고
(종이 위에 작은 종이를 올리듯이) 이미지뷰를 텍스트뷰 아래에 작성하여 텍스트뷰 보다 위로 오도록 한 뒤
부모의 오른쪽에 붙도록 만들었음

 

 

 

nav_header.xml

툴바의 햄버거 버튼을 누르면 나오는 화면중 헤더를 만든다

레이아웃은 크게 상관 없을듯 하며
화면을 위아래로 채우기위해 height를 매치로 한듯 하다
텍스트 뷰를 이용하여 간단히 헤더를 만들어준다.

 

 

nav_menus.xml

메뉴를 누르면 나올 메뉴들을 작성한다

 

 

 

 

activity_main.xml

화면 위에 서랍처럼 메뉴가 밀려와야 되기 때문에
드로어레이아웃을 사용해준다

그리고 드로어레이아웃 하위에 네비게이션뷰를 만들어 주고
end|right를 이용하여 오른쪽에서 밀려나오도록 한다

또한 네비게이션 뷰 안에

        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menus"

위의 코드를 입력하여 헤더와 메뉴들이 나오도록한다

네비게이션뷰 하위에 툴바를 인클루드 시켜준다

 

 

MainActivity

햄버거버튼인 ImageView와
메인레이아웃인 DrawerLayout을 전역변수로설정하고
onCreate에서 xml id로 연결해준다

그리고 imageView에 클릭리스너를 달아줘서
누르면 옆에 있는 것들이 나오도록 한다.

 

 

 

결과