[안드로이드] 머터리얼 네비게이션 드로어

[안드로이드] 머터리얼 네비게이션 드로어

현재 구글 플레이 스토어에서 사용되는 네비게이션 드로어가 

롤리팝과 머티리얼 디자인이 나오면서 적용이 되었습니다.

처음에 저도 보고 이거 진짜 잘만들었다. 섬세하다 라고 말했던 기억이나네요 .

쓰기도 편하게 정말 잘 되어있어 이렇게 포스트를 쓰고 있습니다.

 

1. 준비

머티리얼 네비게이션 드로어를 사용하기 위해서는 머티리얼 셋팅이 되어 있어야 합니다. 

셋팅에 관해서는 기존 포스트 및 android studio 기본 셋팅이여서 생략하겠습니다.

위 링크를 참조하시면 되겠습니다.

2. 작성 방법

xml 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     tools:context=".MainActivity">       <android.support.v7.widget.Toolbar         android:id="@+id/toolbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:minHeight="60dp"         >       </android.support.v7.widget.Toolbar>       <android.support.v4.widget.DrawerLayout         android:id="@+id/drawer_layout"         android:layout_width="match_parent"         android:layout_height="match_parent"         >           <FrameLayout             android:id="@+id/container"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:background="#303F9F"/>                   <View             android:id="@+id/drawer"             android:layout_width="240dp"             android:layout_height="match_parent"             android:layout_gravity="start"             android:background="#ffffff" />         </android.support.v4.widget.DrawerLayout>     </LinearLayout>   Colored by Color Scripter

cs

 

xml 을 보시면 ToolBar 라는 처음보는 위젯이 있습니다.

ToolBar는 액션바 5.0 버전에서 대체할수 있도록 구성이 되었습니다.

액션바는 커스텀하기 불편한부분을 ToolBar 를 이용하여 레이아웃을 구성하고

액션바화 시킬수 있습니다.

하단은 기존의 네비게이션 드로어 사용 하는 방법과 동일 합니다. 

액션바 대신 툴바를 이용했기때문에 스타일에서 액션바를 제거해 주셔야 합니다.

 

1 2 3 4 5 6 7 8 9 10

<resources>       <!-- Base application theme. -->     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">         <!-- Customize your theme here. -->     </style>   </resources>   Colored by Color Scripter

cs

java 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

package com.example.woong.navigationdrawer;   import android.content.res.Configuration; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem;     public class MainActivity extends ActionBarActivity {       Toolbar toolbar;     DrawerLayout dlDrawer;     ActionBarDrawerToggle dtToggle;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           toolbar = (Toolbar) findViewById(R.id.toolbar);         dlDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);         setSupportActionBar(toolbar);         dtToggle = new ActionBarDrawerToggle(this, dlDrawer, R.string.app_name, R.string.app_name);         dlDrawer.setDrawerListener(dtToggle);     }       public boolean onCreateOptionsMenu(Menu menu) {         getMenuInflater().inflate(R.menu.menu_main, menu);         return true;     }       @Override     protected void onPostCreate(Bundle savedInstanceState) {         super.onPostCreate(savedInstanceState);         dtToggle.syncState();     }       @Override     public void onConfigurationChanged(Configuration newConfig) {         super.onConfigurationChanged(newConfig);         dtToggle.onConfigurationChanged(newConfig);     }       @Override     public boolean onOptionsItemSelected(MenuItem item) {         if (dtToggle.onOptionsItemSelected(item)) {             return true;             }         return super.onOptionsItemSelected(item);     } }   Colored by Color Scripter

cs

기존의 네비게이션 드로어에서 바뀐 점은 ActionBarDrawerToggle 입니다. 

3.샘플

[출처: http://iw90.tistory.com/213]