Android Studio Navigation Drawer 1-1

앱 개발을 하면 각자 취향에 맞게 너무 다르다.

그래서 https://developer.android.com 사이트에 문서 항목에  디자인 가이드 라인이 있다.

여기서 앱을 어떻게 디자인 해야 사람들이 많이 앱에 머무르는지 나와있다.

 

◎Material Design : Gogle 디자인 가이드 라인

①Navigation Drawer

②Toolbar

③AppBar Layout, TabLayout

 

어떻게 구현할 건지 간략 설명

Drawerlayout은 딱 두개의 View만 넣을 수 있다.(  Contents , side Menu)

그래서 화면에 꽉차는 Navigation Drawer를 하나 만들고,

그 안에 view 두 개를 구성(Reletive, TextView <- 나중에 NavigationView로 바꿀거임)

 

activity_main.xml 코드를 먼저 작성해보자.

Drawer에 두개의 View만 있을 수 있다. (옆으로 넘길 view를 꼭 두번째로 기재해야함. 순서!!)

<실행 화면>

맨 오른쪽 화면을 보면, side로 간 View들은 화면을 다 채우지 않는다. 사이즈가 match_parent라도

java코드를 안써도 이렇게 sideView가 있는 것을 확인 할 수 있다.

 

 

이제 TextView를 NavigationView로 바꾸자. (TextView는 화면이 제대로 나오는지만 보려고..)

NavigationView를 쓰려면 Library를 추가해줘야한다.

 

(예전에는 design을 추가했지만, 계속적으로 바뀌고 있어서  https://developer.android.com 확인하고 그때마다 변경 사항이 있는지 알아야한다. 이게 개발자의 숙명....)

 

아래 사진처러 저 곳에 추가를 해야하지만 편리하게 추가하는 방법이 있다.

library를 dependencies에 추가해야한다.

1 Libraty는 인터넷에서 가져올 것이고(위 예제는 1로), 만약에 .jar파일이 자신의 컴퓨터에 있다면 2Jar로 추가하자.

material 검색해서 최신 버전 추가

위 사진과 같이 추가된 모습을 확인할 수 있다.

TextView -> NvigationView 하고 다시 실행해보면 된다.

activit_main.xml 코드

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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">
 
<!--    1. Content 영역-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp">
    </RelativeLayout>
 
<!--    2. 왼쪽에 숨어 있는 Drawer 메뉴 영역-->
<com.google.android.material.navigation.NavigationView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start">
 
</com.google.android.material.navigation.NavigationView>
 
 
</androidx.drawerlayout.widget.DrawerLayout>

<실행 화면>