Navigation Drawer를 사용해보자

1. Navigation Drawer란 무엇인가

요즘 App에서 거의 필수로 쓰이는 기능으로, 안드로이드 기준 액션바 왼쪽에 위치하는 메뉴를 누르면

옆에서 메뉴창이 스르륵하고 나타나는데 그 기능을 Navigation Drawer라고 한다.

아래 영상을 참고하라

2. 구현

Navigation Drawer를 구현하기 위해서 몇단계를 거쳐야한다.

예전에는 Navigation Drawer가 위의 상태 바(status bar)를 가리곤 했는데 요새는 가리지 않도록 이쁘게 나왔다.

1) Design Support Library를 Gradle에 추가

Dependencies{ Compile 'com.android.support:design:23.1.1' }

그런데 여기서 중요한 점은 design 뒤에 붙는 저 숫자들이다.

저게 라이브러리의 버전인데 지금 현재 Android Studio에서 사용중인 appcompat-v7버전과 통일을 시켜줘야한다.

compile 'com.android.support:appcompat-v7:24.2.0' compile 'com.android.support:design:24.2.0'

요렇게 말이다아. 솔직히 꿀팁이여따...

2) Navigation Drawer 창에 들어갈 menu xml 정의(동영상에서 First Item, Second Item, Third Item 걔들...)

res/menu(resource directory)에다가 new menu resource file을 선택해서 메뉴를 아이템을 구현하자.

(menu_navigation_drawer.xml)

<?xml ve rsion="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <group android:checkableBehavior="single"> <item android:id="@+id/first_navigation_item" android:title="First Item"/> <item android:id="@+id/second_navigation_item" android:title="Second Item"/> <item android:id="@+id/third_navigation_item" android:title="Third Item"/> </group> </menu>

3) ActionBar 처럼 사용할 Toolbar 구현

res/layout에 Toolbar의 xml을 만든다.(toolbar.xml)

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:fitsSystemWindows="true" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:background="?attr/colorPrimaryDark"> </android.support.v7.widget.Toolbar>

여기서 중요한 점이 fitsSystemWindows를 true로 하는 이유는

status Bar와 Toolbar가 Navigation View에 가려지지 않기위해 충분한 공간을 획득하기 위함이다.

4) ActionBar 대신 Toolbar를 사용한다고 했으니 ActionBar를 Disable 한다.

res/values/styles.xml에서 현재 App테마를 NoActionBar로 해주는거지이 어렵지아나..

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>

이거 안해주면.... 

'java.lang.IllegalStateException This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.'

이런.. 에러를 보는...대참사가 일어날 수 있음요...

5) 이제 Activity에 담아보자

지금 우리가 만든 xml이 뭘까??

toobar.xml 그리고 Navigation View에 표현될 menu_navigation_drawer.xml을 만들었다.

요걸 아직 사용안했다는 걸 모두 알고있을게야.. 그리고 지금부터 사용할 예정이라는 것도 알겠지 똑똑해 다들..

여기서 또 정신을 차려야한다. 바로 사용하는것이 아니라 Navigation Drawer를 사용하기 위해

Navigation Drawer가 사용되는 Activty의 layout에 DrawerLayout을 최상위로 포함 시켜줘야한다.

그리고 layout에는 숨어 있다가 눌렀을때 나타나는 Navigation View를 포함하고, Action Bar처럼 사용할

Toolbar도 포함해줘야하고, 동영상에서 '여기에 평소 텍스트, 버튼 등을 넣는 곳 입니다.'라고 구현되어있는

평소에 Relativelayout, Linearlayout 등을 사용해 화면을 꾸미던 layout 도 들어가야한다.

주석을 열씨미 읽으며 코드를 한번 보면 이해가 될것이다.

<!-- 기본적으로 전체 레이아웃을 DrawerLayout으로 설정--> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 요 RelativeLayout이 실제로 우리가 TextView, Button 등 다양한 컴포넌트 및 레이아웃을 넣는 곳이다.--> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- include 요녀석이 가장 첫번째로 들어가야 한다!!! 꼭 명심해라아!!!--> <include layout="@layout/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbarInclude" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbarInclude"> <TextView android:id="@+id/txtComment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="여기에 평소 텍스트, 버튼 등을 넣는 곳 입니다." android:textColor="#000000" android:textSize="15sp"/> </RelativeLayout> </RelativeLayout> <!--Navigation View에 대한 설정이 들어간다 그리고 android:layout_gravity="start"로 설정이 되어있어야 왼쪽에서 휙 하고 나온다잉!!!--> <android.support.design.widget.NavigationView android:id="@+id/navigationView" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="#ffffff" app:menu="@menu/menu_navigation_drawer" app:itemBackground="@drawable/navigation_drawer_item_click_color"/> </android.support.v4.widget.DrawerLayout>

지금까지 소위 View만 짠것이고 이제 실제로 버튼을 누르고 화면에 뜨도록 하기위해서 Java 코드상에서

이벤트 핸들링을 해줘야한다.

6) Navigation View를 꺼낼 Button 추가

toolbar.xml 이 ActionBar의 역할을 한다고했다. 그러면 ActionBar에 Custom View를 넣어서 입맛대로

ActionBar에 버튼을 추가하고 꾸미던 것 처럼 toolbar도 가능하겠지?

동영상에서 Show버튼과 Title이라는 TextView를 넣어서 Toolbar를 커스텀했는데 그 코드는 아래와 같다.

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:fitsSystemWindows="true" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:background="?attr/colorPrimaryDark"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btnShowNavigationDrawer" android:layout_width="50dp" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:text="Show"/> <TextView android:id="@+id/txtToolbarTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:text="Title"/> </RelativeLayout> </android.support.v7.widget.Toolbar>

Toobar 태그 속에 Layout을 생성해서 원하는 Component를 넣고 꾸미면 끝이다.

7) Java 코드 상에서 DrawerLayout, Toolbar, Navigation View를 초기화하고 핸들링을 해준다.

public class MainActivity extends AppCompatActivity { private DrawerLayout drawerLayout; private Toolbar toolbar; private NavigationView navigationView; private Button btnShowNavigationDrawer; //ActionBarDrawerToggle 요녀석 android.support.v7꺼 써야한다. //android.support.v4는 이제 사용 안하니까... deprecated대써... private ActionBarDrawerToggle actionBarDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Style에서 NoActionBar로 ActionBar를 Disable 시켰으니 //우리가 ActionBar처럼 사용 할 toolbar를 ActionBar처럼 //사용하기위해 setSupportActionBar에 설정해준다. //주의 할 점은 xml에 <include>의 id를 가져와서 설정하는것에 유의 toolbar = (Toolbar) findViewById(R.id.toolbarInclude); setSupportActionBar(toolbar); //여기서 setContentView로 설정되어있는건 activity_main이므로 //toolbar에 구현해둔 컴포넌트를 findViewById로 가져오기위해 //toolbar.findViewById로 찾아준다 btnShowNavigationDrawer = (Button) toolbar.findViewById(R.id.btnShowNavigationDrawer); btnShowNavigationDrawer.setOnClickListener(onClickListener); drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout); actionBarDrawerToggle = setUpActionBarToggle(); drawerLayout.addDrawerListener(actionBarDrawerToggle); navigationView = (NavigationView) findViewById(R.id.navigationView); setUpDrawerContent(navigationView); } @Override public void onPostCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) { super.onPostCreate(savedInstanceState, persistentState); actionBarDrawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); actionBarDrawerToggle.onConfigurationChanged(newConfig); } View.OnClickListener onClickListener = new View.OnClickListener() { @Override public void onClick(View v) { switch (v.getId()){ case R.id.btnShowNavigationDrawer: drawerLayout.openDrawer(GravityCompat.START); break; } } }; private void setUpDrawerContent(NavigationView navigationView){ navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()){ case R.id.first_navigation_item: Toast.makeText(MainActivity.this,"첫번째 Navigation Item 입니다", Toast.LENGTH_SHORT).show(); break; case R.id.second_navigation_item: Toast.makeText(MainActivity.this,"두번째 Navigation Item 입니다", Toast.LENGTH_SHORT).show(); break; case R.id.third_navigation_item: Toast.makeText(MainActivity.this,"세번째 Navigation Item 입니다", Toast.LENGTH_SHORT).show(); break; } return false; } }); } private ActionBarDrawerToggle setUpActionBarToggle(){ return new ActionBarDrawerToggle(this, drawerLayout,toolbar,R.string.navigation_drawer_open, R.string.navigation_drawer_close); } }

* Toggle은 무시해주세용 아직은 사용할 필요가 없어요

요거 그대로 따라하면 처음에 있는 동영상 처럼 작동이 되는 Navigation Drawer를 만들 수 있습니다.

클릭했을때 색상바뀌는거는 res/drawable에 Drawable resource file 만들어서 Selector로 색상을 임의로 줘서 했습니다.