[Android : Kotlin] Navigation Drawer 화면 구성 콘셉트

안드로이드앱 네비게이션을 구현을 위한 콘셉트를 알아보자.

일반적으로 프로젝트를 생성하면 activity_main.xml이 기본 화면으로 보여지는데, 네비게이션으로 구성하려면 그 상위에 이를 포괄하는 메인을 만들어 준다. activity_main을 include 하고 네비게이션 메뉴를 추가하는 방식이다. 대략적인 구성은 아래와 같다. 

2020/12/13 - [코드리뷰/코틀린 리뷰] - 안드로이드 QR/바코드 스캐너 앱 게시하다.(Scan All)

안드로이드 QR/바코드 스캐너 앱 게시하다.(Scan All)

네비게이션 드로우 콘셉트

• 빨간색 : 네비게이션 드로우 구성을 위한 전체 화면
• 흰색 : 네비게이션 메뉴 화면
• 노란색 : 메인 화면

앱이 구동되면 노란색 메인화면이 나타난다. 상단 앱바 메뉴를 통해 숨겨진 네비게이션 화면을 드로우하는 방식으로 구성한다. Main Class에 NavigationView.OnNavigationItemSelectedListenerf를 implementation하고 이벤트 처리를 위해 필요한 콜백 함수를 override 한다. 

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

...


    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            android.R.id.home->{ // 메뉴 버튼
                main_drawer_layout.openDrawer(GravityCompat.START)    // 네비게이션 드로어 열기
            }
        }
        return super.onOptionsItemSelected(item)
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.account-> Toast.makeText(this,"account clicked",Toast.LENGTH_SHORT).show()
            R.id.item2-> Toast.makeText(this,"item2 clicked",Toast.LENGTH_SHORT).show()
            R.id.item3-> Toast.makeText(this,"item3 clicked",Toast.LENGTH_SHORT).show()
        }
        return false
    }

    override fun onBackPressed() {
        if(main_drawer_layout.isDrawerOpen(GravityCompat.START)){
            main_drawer_layout.closeDrawers()
            // 테스트를 위해 뒤로가기 버튼시 Toast 메시지
            Toast.makeText(this,"back btn clicked",Toast.LENGTH_SHORT).show()
        } else{
            super.onBackPressed()
        }
    }
}

onCreate()에 navigation 리스너와 메인 툴바 설정을 한다. 

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main)
        //메인 툴바 변경
        setSupportActionBar(main_layout_toolbar)
        // 드로어를 꺼낼 홈 버튼 활성화
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        // 홈버튼 이미지 변경
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
        // 툴바에 타이틀 안보이게
        supportActionBar?.setDisplayShowTitleEnabled(false)

        main_navigationView.setNavigationItemSelectedListener(this) //navigation 리스너
        
        ..
        
        }