[Kotlin] TodoList 만들기 [2/2]

지난 시간에 이어서 Kotlin 을 활용한 TodoList 만들기 기능 공유하겠습니다.

이번 시간에는 ActionBarDrawerToggle 과 ActionBar을 활용하여 'BACK Button' 만드는 법에 대해서 공유 하겠습니다.

ActionBarDrawerToggle

Android에서 제공하는 DrawerToggle 을 활용한다면 보다 쉽게 메뉴를 구성할 수 있니다. Activity 생성 시 Nabvigation Drawer Activity 로 생성 하면 간편히 메뉴를 만들 수 있습니다.

Navi Drawer 설정 시 Acitivity에 ActionBarDrawerToggle 등록 하며 메뉴 선택은 setNavigationItemSelectedListener 로 구성하여 동작합니다.

MainDrawerActivity.java

class MainDrawerActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
     override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_drawer)
        setSupportActionBar(toolbar)
​
        init()
    }
    
    // Navi Drawer 설정
    fun init(){
        val toggle = ActionBarDrawerToggle(
            this, drawer_layout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
        drawer_layout.addDrawerListener(toggle)
        toggle.syncState()
​
        nav_view.setNavigationItemSelectedListener(this)
    }
​
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
            // Handle navigation view item clicks here.
            when (item.itemId) {
                R.id.action_todo -> {
                    // Handle the Todo action
                }
                R.id.action_setting -> {
                   // Handle the Setting action
                }
            }
​
            drawer_layout.closeDrawer(GravityCompat.START)
            return true
    }
}

activity_main_drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
​
    <include
        layout="@layout/app_bar_main_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
​
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main_drawer"
        app:menu="@menu/drawer_menu" />
​
</android.support.v4.widget.DrawerLayout>

DrawerLayout 구성 시 주의 사항

DrawerLayout을 잘못 구성한 경우 ActionBar와 구성한 화면이 겹치는 경우가 있습니다. DrawerLayout 안에 포함될 xml 에 context, showIn, layout_behavior 설정으로 해당 이슈를 해결할 수 있습니다.

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".view.main.MainDrawerActivity"
tools:showIn="@layout/app_bar_main_drawer"
app:layout_behavior="@string/appbar_scrolling_view_behavior"

content_main.xml

<?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"
   xmlns:tools="http://schemas.android.com/tools"
   tools:context=".view.main.MainDrawerActivity"
   tools:showIn="@layout/app_bar_main_drawer"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/black"
   android:orientation="vertical">
   <FrameLayout
       android:id="@+id/content_view"
       android:background="@color/white"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
</LinearLayout>

ActionBar 'Back' Button 구성 방법

ActionBar에서 'Back' 버튼을 지원하는거 알고 계셨나요? 간단한 설정으로 쉽게 구성할 수 있습니다.

'Back' 버튼 구성 시 ParentActivity와 ChildActivity 를 구분하여 설정해야 합니다.

ParentActivity와 ChlidActivity 선언은 manifests 에서 합니다.

manifests.xml

<activity
          android:name=".view.join.JoinActivity"
          android:launchMode="singleTop"
          android:parentActivityName=".view.login.LoginActivity"
          android:screenOrientation="portrait">
    <meta-data
               android:name="android.support.PARENT_ACTIVITY"
               android:value=".view.login.LoginActivity" />
</activity>

'Back' Button을 표시할 Activity 에서도 버튼 표시 선언을 해야합니다. ChildActivity 에 표시 된 setDisplayHomeAsUpEnabled(true) 선언하여 'Back' Button을 표시합니다.

supportActionBar?.setDisplayHomeAsUpEnabled(true)

setDisplayHomeAsUpEnabled 의 true 로 했을 경우 ActionBar에 표시만 되고 그것에 대한 액션은 이뤄지지 않습니다. NavUtils.navigateUpFromSameTask(this) 을 통하여 이전 화면으로 뒤돌아가는 로직을 구현합니다.

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    when (item?.groupId){
        android.R.id.home -> {
            NavUtils.navigateUpFromSameTask(this)
            return true
        }
        else -> {
            return super.onOptionsItemSelected(item)
        }
    }
}

정리

Realm과 Kotlin 을 활용하여 TodoList을 구성하였습니다. Fragment와 RecyclerView을 연습할 수 있는 예제로 공부하는데 도움이 되길 바랍니다.

Kotlin Extention 개념은 Android Kotlin Extention 에서 확인 가능 합니다.