接著昨天的挑戰，我們今天來看看主要程式碼是如何建構的吧。

實作過程

讓我們來看看佈局完後還需要做些什麼吧？

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    lateinit var fragmentManager: FragmentManager
    lateinit var myFragmentManager: MyFragmentManager

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)

        setupView()
        setupFrag()

    }

View 相關設置

我們這次嘗試將一些 View 相關的實作都用 function 包裝起來，現在就讓我們來看看我們是怎麼做的吧。

private fun setupView() {
        
        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)

    }

這裡可以看到我們做了兩個 View 相關的處理

• ActionBar 能有按鈕能讓 NavigationView 出現

想要將 ActionBar 與 DrawerLayout 結合可以使用 ActionBarDrawerToggle 這個類別
建立完後我們使用 DraweLayout 所提供的 addDrawerListener 來實現這個功能
最後我們還需要透過 syncState 這個 function 來達到同步效果

• NavigationView 選項被按下的反應

這裡我們使用 setNavigationItemSelectedListener 並 override 其 onNavigationItemSelect 。
這樣我們就可以透過裡面所提供的 itemid 來做相對應的反應。
這個 function 需要回傳一個 Boolean 值，來顯示使用者按下選項後的狀態。

override fun onNavigationItemSelected(item: MenuItem): Boolean {

        when (item.itemId) {
            R.id.nav_airport -> {
                myFragmentManager.replaceFragment(AirportFragment())
            }
            R.id.nav_court -> {
                myFragmentManager.replaceFragment(CourtFragment())
            }
            R.id.nav_bank -> {
                myFragmentManager.replaceFragment(BankFragment())
            }
            R.id.nav_cafe -> {
                myFragmentManager.replaceFragment(CafeFragment())
            }
            R.id.nav_baby -> {
                myFragmentManager.replaceFragment(BabyFragment())
            }
            R.id.nav_babys -> {
                myFragmentManager.replaceFragment(BabysFragment())
            }

            R.id.nav_apple -> {
                myFragmentManager.replaceFragment(AppleFragment())
            }

            R.id.nav_banana -> {
                myFragmentManager.replaceFragment(BananaFragment())
            }
        }

        drawer_layout.closeDrawer(GravityCompat.START)
        return true
    }

Fragment 設置

這次我們嘗試將 Fragment 的相關作業包裝成一個 class 然後在 MainActivity 中使用。

MyFragmentManager.kt

class MyFragmentManager(val fragmentManager: FragmentManager) {
    
    fun replaceFragment(frag: Fragment) {

        fragmentManager.beginTransaction().replace(R.id.container, frag).commit()
    }
    
}

上一頁功能

 override fun onBackPressed() {
        if (drawer_layout.isDrawerOpen(GravityCompat.START)) {
            drawer_layout.closeDrawer(GravityCompat.START)
        } else {
            super.onBackPressed()
        }
    }

這裡我們可以判斷 Drawer 開關狀態來關閉 Drawer 或者是返回桌面。

今天就先這樣囉，我們明天見～～