본문 바로가기

아옳옳의 코딩공부/아옳옳의 안드로이드스튜디오

2021-04-27안드로이드 스튜디오(머터리얼 디자인 NavigationDrawer , NavigationView)

반응형

오늘은 내비게이션 드로워 내비게이션 뷰를 공부해보도록 하겠다~ 

 

사진이 작아서 잘 안보이지만 위 그림처럼 된 화면을 본적이 있을것이다 . 그것을 표현하는게 네비게이션 드로워 라고 생각하면 되겠다 ~  토글에 보면 ( 처음엔 액티비티 , 레이아웃 , 그리고 나머지 두개는 열렸거나 닫혔을때 문자열이라고 생각하면 된다 . 아무거나 문자열 적으면 된다 . ) 

 

현재 왜 그런지는 모르겠는데 두가지 함수가 호출이 안된다.. (참고)  

함수 호출됨 ... 어제 코드 하나 빼먹어서 그런거임.. ㅋ

 

지금 함수가 안되느 함수 뺴고 toggle = new ActionBarDrawerToggle(this,drawer,스트링,스트링) {} 이렇게 끝내줘도 작동작한다 . 

 

일단 교제에 나온항목은 이렇게 있지만 이거보다 직접 코드를 보는게 더 이해가 잘될 것이다. 

 

일단 네비게이션뷰에 보여줄 메뉴도 필요하고 네비게이션뷰 해더도 따로 만들어주었다 . 

메인코드

public class MainActivity extends AppCompatActivity {

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        drawerLayout = findViewById(R.id.main_drawer);
        //액션바 토글을 만들어 준다
        toggle = new ActionBarDrawerToggle(this,drawerLayout,R.string.drawer_open,R.string.drawer_close){
           // 이건 오버라이드 메소드 이벤트 처리 할수 있다. (현재 안된다 )
//            @Override //오픈되었을때
//            public void onDrawerOpened(View drawerView) {
//                super.onDrawerOpened(drawerView);
//                Toast.makeText(getApplicationContext(),"열림",Toast.LENGTH_SHORT).show();
//            }
//
//            @Override //닫혔을때
//            public void onDrawerClosed(View drawerView) {
//                super.onDrawerClosed(drawerView);
//                Toast.makeText(getApplicationContext(),"닫힘",Toast.LENGTH_SHORT).show();
//            }
        };
        // 햄버거 버튼 만들어줌
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //현재 상태 동기화
        toggle.syncState();

        //네비게이션뷰 숨어 있다가 나오는형태 이다 .
        NavigationView navigationView = findViewById(R.id.main_drawer_view);
        //네비게이션에0번째 해더 가지고옴
        View header_View = navigationView.getHeaderView(0);
        ImageView imageView = header_View.findViewById(R.id.imageView);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"이미지 클릭",Toast.LENGTH_SHORT).show();
                drawerLayout.closeDrawer(GravityCompat.START);
            }
        });
        //네비게이션뷰에 아이템 눌럿을때 동작 부분
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();
                if(id == R.id.nav_camera){
                    Toast.makeText(getApplicationContext(),"카메라",Toast.LENGTH_SHORT).show();
                }else if(id == R.id.nav_gallery){
                    Toast.makeText(getApplicationContext(),"갤러리",Toast.LENGTH_SHORT).show();
                }else if(id == R.id.nav_slideshow){
                    Toast.makeText(getApplicationContext(),"슬라이드쇼",Toast.LENGTH_SHORT).show();
                }else if(id == R.id.nav_manage){
                    Toast.makeText(getApplicationContext(),"툴",Toast.LENGTH_SHORT).show();
                }else if(id == R.id.nav_share){
                    Toast.makeText(getApplicationContext(),"쉐어",Toast.LENGTH_SHORT).show();
                }else if(id == R.id.nav_send){
                    Toast.makeText(getApplicationContext(),"샌드",Toast.LENGTH_SHORT).show();
                }

                drawerLayout.closeDrawer(GravityCompat.START);
                return false;
            }
        });
    }
    // 툴바와 메뉴가 연동이 된다.
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        if (toggle.onOptionsItemSelected(item)){
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override   //뒤로 가기 버튼 눌럿을때
    //레이아웃의 상태가 열려 있다면 이미 눌럿다는것으로 닫아주고 그게 아니라면 안열려 있는것이다.
    //그래서 원래 백프레스 키 동작
    public void onBackPressed() {
        if(drawerLayout.isDrawerOpen(GravityCompat.START)){
            drawerLayout.closeDrawer(GravityCompat.START);
        }else {
            super.onBackPressed();
        }

    }
}
<!--드로워 레이아웃 -->
<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/main_drawer"
    tools:context=".MainActivity">

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

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/main_drawer_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/menu_drawer"/>

여기서 순서를 꼭 지켜야 한다 
1. DrawerLayout 
2.include (메인으로 보여줄 화면
3.NavigationView  (열렸을때 나오는 네비게이션뷰 ) 

</androidx.drawerlayout.widget.DrawerLayout>







//////////드로워 메인 
<?xml version="1.0" encoding="UTF-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent">

 <!--앱바 -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
<!--툴바 -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"></androidx.appcompat.widget.Toolbar>

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="NavigationDrawer 테스트"
        android:textSize="30dp" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>


//////////해더 

<?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"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical"
    android:background="@drawable/appbar_image">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="72dp"
        android:layout_height="72dp"
        app:srcCompat="@drawable/ic_default_user"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dp"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Android Studio"
        android:textColor="#ffffff"
        android:gravity="center"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_marginTop="10dp"
        />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="cyberkyj@naver.com"
        android:textColor="#ffffff"
        android:gravity="center"
        android:textStyle="bold"
        android:textSize="15dp"
        android:layout_marginTop="10dp" />
</LinearLayout>

 

 

 

 

반응형