[안드로이드] NavigationDrawer _ 탐색 창 만들기 / <include> _ xml 파일을 요소로 넣기

탐색 창

: 사용자가 앱의 다양한 섹션으로 이동할 수 있는 슬라이드 인 메뉴입니다.

  사용자는 측면에서 스와이프하거나 메뉴 아이콘을 탭하여 활성화할 수 있습니다.

---

[include]

: xml파일에 들어갈 요소가 많아 복잡할 때, 각 xml파일을 따로 만들어서 include 할 수 있게 해줌

 

ex)

메인 화면을 app_bar_main.xml 에 구현한 후,

<include
	layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

을 activity_main.xml에 추가하면, 해당 xml파일이  include됨

 

---

[탐색창 만들기]

*직접 만들어보기 전에
   navigation Drawer Views Activity(프로젝트 처음 만들 때) 선택하여 기본 코드를 분석해보기!

1. activity_main.xml 구성

   1) 최상위 layout은 DrawerLayout으로 설정

   2) 앱바가 있는 기본 창을 app_bar_main.xml 만들어 include 하기

   3) NavigationView 요소 넣기 *보통 app:headerLayout은 프로필/app:menu는 아래 메뉴

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

<!--    기본 화면 layout인 app_bar_main-->
    <include
        android:id="@+id/app_bar_main"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

<!--    메뉴 탭 -->
    <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:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"/>


</androidx.drawerlayout.widget.DrawerLayout>

---

2. app_bar_main.xml 구성

   1) 상단 ToolBar (선택)

   2) 아래 메인 화면 

   3) FloatingActionButton (선택)

<androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.appbar.AppBarLayout>

        <androidx.appcompat.widget.Toolbar/>

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

---

3. content_main.xml 구성 (화면 부분)

   1) 최상위 태그 FrameLayout으로

        : 여러가지 프래그먼트를 넣기 위해서

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

</FrameLayout>

---

4. activity_main.xml의 <NavigationView>에 들어갈 headerLayout, menu구성

   1) res->layout에 nav_header_main.xml 만들기 (보통 프로필)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="176dp"
    android:background="#FF009688"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="15dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="what is contentDescription"
            android:paddingTop="8dp"
            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="8dp"
            android:text="아이디"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이메일 주소" />
</LinearLayout>

 

   2) res->menu에 activity_main_drawer.xml 만들기

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_menu_camera"
            android:title="Home"/>
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_camera"
            android:title="Home"/>
    </group>

</menu>

---

4. MainActivity.java 구성

   1) View Binding 하기 https://developer.android.com/topic/libraries/view-binding?hl=ko#usage

     *findViewById()보다 간편,깔끔함

     1-1) build.gradle(Module:app)에 아래 코드 추가 

android{
	...
    buildFeatures{
    	viewBinding = true;
    }
}

   1-2) binding.inflate하기

//main_activity.xml을 바인딩하면 ActivityMainBinding클래스가 자동 생성됨
private ActivityMainBinding binding;

binding = ActivityMainBinding.inflate(getLayoutInflater());
//getRoot()는 해당 바인딩의 최상이 레이아웃
setContentView(binding.getRoot());

 

   2) ToolBar 구성

setSupportActionBar(binding.appBarMain.toolbar);

 

   3) 

 

... fragment, ActionBar,  navigation 공부 후 이어서 작성 예정