Kotlin 앱만들기 study #4 - Navigation View

Avocado·2020년 10월 23일
0

네비게이션 메뉴

햄버거 모양의 세줄 버튼 클릭했을때 열리는 메뉴!

Gradle Scripts

build.gradle > dependencies {} 의존성

라이브러리를 추가할 수 있다

implementation 'com.google.android.material:material:1.0.0'

오른쪽 상단 Sync Now 누르기

네비게이션 전용 리소스 만들기

res 폴더 -> new Android resource folder
Resource Type -> menu(default: value)
menu 폴더 -> new Resource file -> name : navi_menu
우측 상단 스플릿 탭으로 변경 (코드 / 스플릿 / 디자인)

이미지 추가

drawble 폴더 우클릭 -> vector asset

xml 코딩

navi_menu.xml

<group android:checkaleBehavior="single">
	<item android:id="@id/access"
    	android:icon="@drawable/ic_accessibility_black_24dp"
        android:title="접근성"/>
        
        <item android:id="@id/email"
    	android:icon="@drawable/ic_email_black_24dp"
        android:title="이메일"/>
        
        <item android:id="@id/message"
    	android:icon="@drawable/ic_send_black_24dp"
        android:title="메시지"/>
</group>

activity_main.xml

//constraintlayout 삭제
<androidx.drawerlayout.widget.DrawerLayout ...>
</androidx.drawerlayout.widget.DrawerLayout>

디자인 탭에서 constraintLayout 을 DrawerLayout밑에 넣어줌
component Tree에서 DrawerLayout 이름을 layout_drawer로 변경
constraintLayout 밑에 디자인 요소 넣어주기 (TextView, Button...)
이미지 뷰 넣었을때 나타는 srcCompat 오류는 src로 변경해 해결

activity_main.xml

//between constraintlayout and drawerlayout
<com.google.android.material.navigation.NavigationView 
	android:id="@id/naviView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/navi_menu"/>

코틀린 파일 작성

MainActivity.kt

//AppCompatActivity() 뒤쪽에 추가
//, NavigationView.OnNavigationItemSelectedListener 

//onCreate 내부에 작성
//햄버거 버튼 컨트롤
btn_navi.setOnClickListener {
	//START : left, END : right를 의미한다
	layout_drawer.openDrawer(GravityCompat.START) 
}
//네비게이션 메뉴 아이템에 클릭 속성 부여
naviView.setNavigationItemSelectedListner(this)


//onCreate 밑에 작성(상단 코드에서 생성되는 에러에 Alt+Enter 누르면 자동 implement 창 뜸)
// Navigation menu item 클릭 시 수행
oveerride fun onNavigationItemSelected(item: MenuItem): Boolean {
	when (item.itemId) 
    {
    	R.id.access -> Toast.makeText(applicationContext, text:"접근성", Toast.LENGTH_SHORT).show()
        R.id.email -> Toast.makeText(applicationContext, text:"이메일", Toast.LENGTH_SHORT).show()
        R.id.message -> Toast.makeText(applicationContext, text:"메시지", Toast.LENGTH_SHORT).show()
    }
	layout_drawer.closeDrawers() //네비게이션 뷰 닫기
    return false
}

//Ctrl+O 눌러서 Override Members 패널 오픈 -> onback 검색
override fun onBackPressed(){
	if (layout_drawer.isDrawerOpen(GravityCompat.START))
    {
     layout_drawer.closeDrawers()	
    }
	else {
		super.onBackPressed() // 일반 백버튼 실행 (finish)
    }
	
}

최상단 액션바 변경하기

manifests 폴더 -> AndroidManifest.xml
android:theme 변경해주면 됨
ex) android:theme="@style/Theme.AppCompatLight.NoActionBar"

profile
후숙은 타이밍

1개의 댓글

comment-user-thumbnail
2020년 10월 25일

MainActivity.kt에서 NavigationView.OnNavigationItemSelectedListener 를 안적어줘서 계속 에러나서 헤매다가 아보카도님 글 보고 해결했네요ㅠㅠ 감사합니다!!!

답글 달기