Android studio_ 4. NavigationView

 

활용) "접근성","이메일","메시지" 카테고리가 있는 네비게이션 뷰 메뉴 만들기.

 

네비게이션 뷰? 카테고리를 포함한 네비게이션 뷰가 열고 닫히는 메뉴. 

 

네비게이션 뷰를 활용하기 전에 네비게이션 뷰를 사용하게끔 import를 해주어야 한다. Gradls Scripts > build.gradle > dependentcies 경로를 통해 implementation 'com.google.android.meterial.meterial:1.0.0' 추가하여 sync Now 한다. 이 곳은 안드로이드 스튜디오의 기본적인 설정값들을 지정해주는 곳이다. 거기서 dependentcies은 사용자들이 만든 라이브러리, 안드로이드 스튜디오에서 자체 제공하는 라이브러리를 사용하게 하는 기능이 있다. 

 

네비게이션 뷰를 import 한 후, 네비게이션 메뉴를 준비할 수 있는 .xml을 만든다. rec우클릭> new > Android Resource Directory > Resource type : menu 네비게이션 뷰 전용 폴더 생성하여  rec > menu우클릭 > new > Menu Resouce File > File name : navi_menu 

 

먼저, "접근성","이메일","메시지" 카테고리를 만든다. 무료 이미지 사이트 이용도 가능하나 안드로이드 스튜디오 내에서 자체 제공하는 이미지로 간단하게 만들 수 있다. drawable > new > vector Asset > clip Art 선택  

accessibility_black_24dp

email_black_24dp

send_black_24dp

<group android: checkableBehavior = "single">
    <item android: id "@+id/access"> //accest icon을 쓰기 위함
    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>

 

 

네비게이션 뷰 메뉴를 완성 후, 네비게이션 뷰 메뉴를 선택할 수 있는 버튼을 layout > activity_main.xml 에서 만든다. 

drawerlayout id : layout_drawer

 

Component Tree의 constrainlayout -> drawerlayout 변경. constrainlayout을 drawerlayout 밑으로 끌어오고, textview는 constrainlayout 밑으로 넣음으로써 constrainlayout에 속해있는 textview 사용가능하게 한다. 아까와 같은 방법으로 네비게이션 바 아이콘을 설정한다. 

menu_black_64dp

common > imageView > menu_black_64dp 불러오기

imageView id : btn_navi

 

위의 그림을 살펴보면 처음 만들어 놓은 3개의 이미지가 방금 만든 메뉴를 가려놔서 그레비티 정렬 속성을 통해 화면밖으로 밀어낸다.  constrainlayout 끝나는 꺽쇠(/>)와 drawerlayout 사이에  <navigation> 추가한다.

<com.google.android.material.navigation.NavigationView 
androud: id = "@+id_naviView"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_gravity = "start"
app: menu = "@menu/navi_menu" />

화면 밖으로 나간 3개의 이미지

<MainActivity.kt> 에서 네비게이션 뷰를 클릭 시, "접근성","이메일","메세지" 메뉴가 나올 수 있게 구현할 차례이다. 그 전에 앞서 class MainActivity : AppCompatActivity() 옆에 NavigationView.OnNavigationSalectedListner{} 을 넣어 네비게이션 뷰를 선택하였을 때 아이템들을 Salected할 수 있는 Listner을 만들어야 한다.

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationSalectedListner{

    override fun OnCreate(savedInstanceState: Bundle?){
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        }
    }
    
    override fun onNavigationItemSelected(item: MenuItem): Boolean{
        when(item.itemId)
        {
         R.id.access -> Toast.makeText(applicationContext, "접근성", Toast.LENGTH_SHORT).show()         
         R.id.email -> Toast.makeText(applicationContext, "이메일", Toast.LENGTH_SHORT).show()
         R.id.message -> Toast.makeText(applicationContext, "메세지", Toast.LENGTH_SHORT).show()
        }
        layout.drawer.closeDrawers()
        return false  
    }

 

빨간색 전구 모양이 뜨는 곳을 Alt+Enter(Implement members) 처리 시 override fun onNavigationItemSelected 네비게이션 메뉴 아이템을 클릭 시 수행하는 구문이 형성된다. 네비게이션 메뉴는 클릭될 때 마다 아이템 값이 형성되는데 이를 when 구문으로 끌고와 메뉴 클릭 시 토스트 메시지를 띄울 수 있는 코드를 작성한다. 또한, 토스트 메시지를 띄우는게 다가 아닌 메시지를 띄우면서 layout.drawer.closeDrawers() 네비게이션 뷰를 닫아주어야 한다. 

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationSalectedListner{

    override fun OnCreate(savedInstanceState: Bundle?){
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        btn_navi.setOnClickListener{
            layout.drawer.openDrawer(GravityCompat.START)
        }
    }
    
    override fun onNavigationItemSelected(itemL MenuItem): Boolean{
        when(item.itemId)
        {
         R.id.access -> Toast.makeText(applicationContext, "접근성", Toast.LENGTH_SHORT).show()         
         R.id.email -> Toast.makeText(applicationContext, "이메일", Toast.LENGTH_SHORT).show()
         R.id.message -> Toast.makeText(applicationContext, "메세지", Toast.LENGTH_SHORT).show()
        }
        layout.drawer.closeDrawers()
        return false
    }

 

마지막으로 네비게이션 메뉴 아이템에 클릭 속성을 부여하면 된다. btn_navi.setOnClickListener{layout.drawer.openDrawer(GravityCompat.START)}

//start = left , end = right 방향

 

여기까지 작성하여 build를 하게 되면 네비게이션 아이콘을 클릭 후 메뉴가 나오고 해당 메뉴를 눌렀을 때, 토스트 메시지가 뜨게 되지면 앱 백 버튼을 누르면 원래 영역으로 돌아오는 것이 아니라 앱 자체가 종료된다. 우리는 onBackPressed()을 사용하여 일반 백버튼 구문 실행할 수 있다. Ctrl + O : 추천 오버라이드 메소스 override Members > onBackPressed() 클릭

 

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationSalectedListner{

    override fun OnCreate(savedInstanceState: Bundle?){
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        btn_navi.setOnClickListener{
            layout.drawer.openDrawer(GravityCompat.START)
        }
        naviView.setNavigationItemSelectedListener(this)
    }
    
    override fun onNavigationItemSelected(itemL MenuItem): Boolean{
        when(item.itemId)
        {
         R.id.access -> Toast.makeText(applicationContext, "접근성", Toast.LENGTH_SHORT).show()         
         R.id.email -> Toast.makeText(applicationContext, "이메일", Toast.LENGTH_SHORT).show()
         R.id.message -> Toast.makeText(applicationContext, "메세지", Toast.LENGTH_SHORT).show()
        }
        layout.drawer.closeDrawers()
        return false
    }
    
    override fun onBackPressed(){
        if (layout_drawer.isDrawerOpen(GravityCompat.START))
        {
            layout_drawer.CloseDrawers()
        }
        else
        {
        super.onBackpressed()    
        }
    }
}

 

if 문을 사용하여 layout_drawer가 start방향으로 오픈이 되어 있으면 layout_drawer.CloseDrawers() 닫아달라는 조건을 건다. 여기까지가 onBackPressed()역할이고, else로 super.onBackpressed() finish 역할을 넣어 앱 실행 종료되게 한다.