Material Design Navigation Drawer
Material Design 에 대한 자료는 https://github.com/material-components/material-components-android 를 참조하면 도움된다.
안드로이드 네비게이션은 왼쪽에 슬라이드 형식으로 메뉴가 나왔다 들어갔다 하는 패널을 말한다.
앱 build.gradle 추가 사항
implementation 'com.google.android.material:material:1.1.0'
먼저 Material Design 사이트에서 제공하는 예제 파일을 열어봤더니 아래와 같은 예제가 나온다.
자식 View는 반드시 2개만 가진다는 점을 기억하자.
순서는 content 자식 View가 먼저 나오고 drawer View는 나중에 나온다.
그러면 drawer View가 나중에 나오기만 하면 되는 것인가? 아니다.
<?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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. Note that
this child does not specify android:layout_gravity attribute. -->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the starting side, which is
left for left-to-right locales. The navigation view extends
the full height of the container. A
solid background is used for contrast with the content view.
android:fitsSystemWindows="true" tells the system to have
DrawerLayout span the full height of the screen, including the
system status bar on Lollipop+ versions of the plaform. -->
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#333"
android:fitsSystemWindows="true"
app:menu="@menu/navigation_view_content"
app:itemIconTint="@color/emerald_translucent"
app:itemTextColor="@color/emerald_text"
app:itemBackground="@color/sand_default"
app:itemTextAppearance="@style/TextMediumStyle" />
</androidx.drawerlayout.widget.DrawerLayout>
|
위와 같이 하거나 또는
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!-- 1. 콘텐츠 영역-->
<include
layout="@layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- 2. 왼쪽 사이드 메뉴-->
<include layout="@layout/nav_header_main" />
</androidx.drawerlayout.widget.DrawerLayout>
|
아래 nav_header_main.xml 파일을 보면 com.google.android.material.navigation.NavigationView 대신에 LinearLayout 으로 되어 있다. 꼭 com.google.android.material.navigation.NavigationView 를 사용하지 않아도 된다는 의미다.
android:layout_gravity="start" 를 추가해서 왼쪽 슬라이드 메뉴로 사용하겠다는 것만 포함되어 있다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/navi_view"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorWhite"
android:orientation="vertical"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ededed"
android:orientation="vertical"
android:padding="10dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img_info" />
<ImageView
android:id="@+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:onClick="NaviItemSelected"
android:src="@drawable/ic_close" />
</FrameLayout>
</LinearLayout>
</LinearLayout> |
이제 자바 소스를 구현하는 걸 살펴보자.
public class MainActivity extends AppCompatActivity {
Context context;
DrawerLayout drawer_layout;
ActionBarDrawerToggle toggle;
//NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context = MainActivity.this;
drawer_layout = findViewById(R.id.drawer_layout);
toggle = new ActionBarDrawerToggle(
this, drawer_layout, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer_layout.addDrawerListener(toggle);
toggle.syncState();
// com.google.android.material.navigation.NavigationView 를 구현했을 때 처리 (구현 안해도 됨)
//navigationView = findViewById(R.id.nav_view);
//navigationView.setItemIconTintList(null);
//navigationView.setNavigationItemSelectedListener(this);
// content_main.xml 에서 지정한 버튼을 클릭하면 drawer 가 오픈되도록 함.
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
drawer_layout.openDrawer(GravityCompat.START);
}
});
}
// drawer 오픈된 상태에서 실행할 때 동작 이벤트 처리
public void NaviItemSelected(View view) {
switch (view.getId()) {
case R.id.btn_close:
drawer_layout.closeDrawer(Gravity.LEFT, true);
break;
case R.id.btn_logout:
backPressHandler.appShutdown();
break;
}
}
}
|
구현을 위한 핵심사항만 살펴본 것이므로 실제 구현 예제는 다른 블로그를 찾아보면 도움될 것이다.
예전 예제들은 android.support.v4.widget.DrawerLayout 로 되어 있는데 androidx.drawerlayout.widget.DrawerLayout 로 변경되었다는 것만 알자.
참고하면 좋은 자료
https://coding-factory.tistory.com/207 네비게이션 Drawer 사용법
https://medium.com/quick-code/android-navigation-drawer-e80f7fc2594f
