Android Studio Navigation Drawer 1-2

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

①Navigation Drawer

②Toolbar

③AppBar Layout, TabLayout

 

Android Studio Navigation Drawer 1-1 아래 사진까지 했었다.

<최종 실행 화면>

 (최종 코드는 아래에 기재했습니다.)

이전 코드에서 이제 header, menu를 추가해보자.

NavigationView에 header와 menu를 추가하면 된다. 그전에 header,menu 화면 구성(.xml)을 해주자.

layout추가 하여 header에 해당하는 drawer_header.xml을 만든다.

이렇게 하면 화면 side 화면의 위쪽에 header 화면이 보일 것이다.

NavigationView에 header 추가

header가 추가된 실행 화면

 

menu추가를 위해 res에 menu를 추가한다.

NavigationView에 menu를 추가

각 메뉴에 아이콘 추가 작업

메뉴 옆에 아이콘이 보이는 실행 화면

줄을 추가해보자.

이제 메뉴를 눌렀을 때 반응을 확인해보자.

그러나 메뉴가 안닫힌다. 닫히도록하고, 아이콘색이 회색인데 그것을 설정 안하면 무조건 회색이다.

여기까지가 Drawer 닫기

위 사진 한줄이면 아이콘 색을 원래 색으로 할 수 있다.

아이콘 색과, 누르면 닫히는 것을 볼 수 있다.

여기서 우리는 sideView가 있는 것을 알지만, 다른 사람은 모른다. 메뉴바를 만들어 보자.

 

목록 아이콘을 삼선으로 바꾸자.

그러나 목록을 눌러서 sideView가 나오면, 목록 아이콘이 뒤로가기로 바꿔야 된다..

<최종 실행 화면>

MainActivity.java 코드

package com.lcw.ex46navigationdrawer;
 
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;
 
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;
 
import com.google.android.material.navigation.NavigationView;
 
public class MainActivity extends AppCompatActivity {
    NavigationView navigationView;
    DrawerLayout drawerLayout;
 
    ActionBarDrawerToggle barDrawerToggle;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        navigationView=findViewById(R.id.nav);
        drawerLayout=findViewById(R.id.layout_drawer);
        //item icon색조를 적용하지 않도록.. 설정 안하면 회색 색조
        navigationView.setItemIconTintList(null);
 
 
        //네비게이션뷰의 아이템을 클릭했을때
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch(item.getItemId()){
                    case R.id.menu_gallery:
                        Toast.makeText(MainActivity.this, "Gallery", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_send:
                        Toast.makeText(MainActivity.this, "Send", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_aa:
                        Toast.makeText(MainActivity.this, "AA", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_bb:
                        Toast.makeText(MainActivity.this, "BB", Toast.LENGTH_SHORT).show();
                        break;
                }
 
                //Drawer를 닫기...
                drawerLayout.closeDrawer(navigationView);
 
                return false;
            }
        });
 
        //Drawer 조절용 토글 버튼 객체 생성
        barDrawerToggle= new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name,R.string.app_name);
        //ActionBar(제목줄)의 홈or업버튼의 위치에 토글아이콘이 보이게끔...
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 
        //삼선아이콘 모양으로 보이도록
        //토글버튼의 동기를 맞추기
        barDrawerToggle.syncState();
 
        //삼선 아이콘과 화살표아이콘이 자동으로 변환하도록
        drawerLayout.addDrawerListener(barDrawerToggle);
 
    }//onCreate method..
 
    //액션바의 메뉴를 클릭하는 이벤트를 듣는
    //메소드를 통해서 클릭 상황을 전달하도록..
    //토글 버튼이 클릭 상황을 인지하도록..
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        barDrawerToggle.onOptionsItemSelected(item);
        return super.onOptionsItemSelected(item);
    }
}
 

activity_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"
    android:id="@+id/layout_drawer"
    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:id="@+id/nav"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer_menu">
 
 
</com.google.android.material.navigation.NavigationView>
 
</androidx.drawerlayout.widget.DrawerLayout>
 

drawer_header.xml 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="#006666">
 
    <ImageView
        android:id="@+id/iv_header"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@mipmap/ic_launcher"
        android:layout_margin="8dp"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="#ffffff"
        android:layout_marginLeft="8dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android@gmail.com"
        android:textColor="#ffffff"
        android:layout_marginLeft="8dp"/>
 
</LinearLayout>

drawer_menu.xml 코드

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item
        android:id="@+id/menu_gallery"
        android:title="Gallery"
        android:icon="@android:drawable/ic_menu_gallery"/>
    <item
        android:id="@+id/menu_send"
        android:title="Send"
        android:icon="@android:drawable/ic_menu_send"/>
 
    <item android:title="Your Accout">
        <menu>
            <item android:id="@+id/menu_aa"
                android:title="aa"/>
            <item android:id="@+id/menu_bb"
                android:title="bb"/>
        </menu>
    </item>
 
</menu>