如何在Android中使用Activity實現底部導航?


Android 應用中的底部導航是設計可導航和使用者友好介面時常用的功能。它通常涉及在螢幕底部放置一個導航欄,以便快速訪問應用的不同部分。

本教程探討了如何在 Android 中使用 Activity 實現底部導航。它涉及建立多個 Activity,每個 Activity 代表應用的不同螢幕或部分,並利用底部導航檢視在它們之間切換。在本教程結束時,讀者將對使用 Android 上的 Activity 構建帶有底部導航欄的應用有一個紮實的瞭解。

底部導航

底部導航是移動應用介面中常用的設計模式。此 UI 功能涉及在螢幕底部放置一個導航欄,通常使用圖示或標籤來表示應用的不同部分。底部導航的目的是允許使用者輕鬆訪問應用內的關鍵功能或螢幕,並在各個部分之間導航,而無需花費太多精力。

此外,透過將其放置在底部,使用者可以輕鬆觸及它,減少在與應用互動時需要重新調整手勢的需求。通常與各種 Activity、片段或螢幕一起使用,這些 Activity、片段或螢幕代表應用程式中的不同功能。

方法

在 Android 中使用 Activity 實現底部導航有多種方法。以下是一些常見的方法

  • 使用導航元件

  • 使用 Intent 管理 Activity

  • 在 Activity 中使用片段

  • 自定義檢視和事件處理

使用導航元件

使用導航元件,您可以定義一個導航圖,該圖表示 Activity 或片段之間的流程。透過合併 BottomNavigationView,您可以輕鬆處理 Activity 之間的導航,方法是在圖中指定目標,並讓導航元件管理過渡。

演算法

  • 定義一個表示 Activity 或片段之間流程的導航圖。

  • 在您的佈局中包含 BottomNavigationView。

  • 設定導航元件以根據 BottomNavigationView 中選定的專案處理 Activity 或片段之間的導航。

示例

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

      val navController = findNavController(R.id.navHostFragment)
      val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottomNavigationView)
      bottomNavigationView.setupWithNavController(navController)
   }
}

activity_main.xml

<RelativeLayout 
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:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <androidx.fragment.app.FragmentContainerView
      android:id="@+id/navHostFragment"
      android:name="androidx.navigation.fragment.NavHostFragment"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:defaultNavHost="true"
      app:navGraph="@navigation/nav_graph" />

   <
com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottomNavigationView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      app:menu="@menu/bottom_navigation_menu" />

</RelativeLayout>

輸出

使用 Intent 管理 Activity

此方法涉及為 BottomNavigationView 中的專案分配點選監聽器。當用戶選擇一個專案時,您可以使用顯式 Intent 啟動相應的 Activity。此方法允許您為每個部分建立單獨的 Activity,並直接在它們之間導航。

演算法

  • 為 BottomNavigationView 中的專案分配點選監聽器。

  • 當用戶選擇一個專案時,建立一個顯式 Intent 以啟動相應的 Activity。

  • 使用 Intent 啟動 Activity,這將引導使用者導航到所需的部分。

示例

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

      val bottomNavigationView = findViewById<
BottomNavigationView>(R.id.bottomNavigationView)
      bottomNavigationView.setOnNavigationItemSelectedListener { 
menuItem ->
         when (menuItem.itemId) {
            R.id.homeItem -> {
               val intent = Intent(this, HomeActivity::class.java)
               startActivity(intent)
               true
            }
            R.id.profileItem -> {
               val intent = Intent(this, 
ProfileActivity::class.java)
               startActivity(intent)
               true
            }
            else -> false
         }
      }
   }
}

輸出

在 Activity 中使用片段

您可以使用單個 Activity 並使用片段來表示應用的不同部分,而不是建立多個 Activity。透過替換 Activity 內的片段容器,您可以根據 BottomNavigationView 中選定的專案動態地在不同的片段之間切換。

演算法

  • 建立一個承載片段容器的單個 Activity。

  • 為應用的每個部分定義單獨的片段。

  • 當單擊 BottomNavigationView 中的專案時,用選定的片段替換片段容器,從而在各個部分之間提供無縫過渡。

示例

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

      val bottomNavigationView = findViewById<
BottomNavigationView>(R.id.bottomNavigationView)
      bottomNavigationView.setOnNavigationItemSelectedListener { 
menuItem ->
         when (menuItem.itemId) {
            R.id.homeItem -> {
               supportFragmentManager.beginTransaction()
                  .replace(R.id.fragmentContainer, HomeFragment())
                  .commit()
               true
            }
            R.id.profileItem -> {
               supportFragmentManager.beginTransaction()
                  .replace(R.id.fragmentContainer, 
ProfileFragment())
                  .commit()
               true
            }
            else -> false
         }
      }
   }
}

activity_main.xml

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <FrameLayout
      android:id="@+id/fragmentContainer"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

   <
com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottomNavigationView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      app:menu="@menu/bottom_navigation_menu" />

</RelativeLayout>

輸出

自定義檢視和事件處理

對於更自定義的方法,您可以建立一個類似於底部導航欄的自定義檢視。這涉及設計一個佈局,在底部放置按鈕或圖示,並手動處理使用者點選。您需要管理 Activity 內不同部分的可見性和狀態,並自行處理導航邏輯。此方法提供了更大的靈活性,但需要更多手動實現。

演算法

  • 設計一個自定義檢視以類似於底部導航欄。

  • 為自定義檢視中的按鈕或圖示實現點選監聽器。

  • 維護 Activity 內不同部分的狀態和可見性。

  • 根據選定的按鈕或圖示更新內容或 UI,手動管理導航邏輯和過渡。

示例

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

      val customBottomNavigationView = findViewById<CustomBottomNavigationView>(R.id.customBottomNavigationView)
      customBottomNavigationView.setOnButtonClickListener { button ->
         when (button) {
            Button.HOME -> {
               // Handle home button click
               Toast.makeText(this, "Home Button Clicked", Toast.LENGTH_SHORT).show()
            }
            Button.PROFILE -> {
               // Handle profile button click
               Toast.makeText(this, "Profile Button Clicked", Toast.LENGTH_SHORT).show()
            }
         }
      }
   }
}

custom_bottom_navigation_view.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">

   <Button
      android:id="@+id/homeButton"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="Home" />

   <Button
      android:id="@+id/profileButton"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="Profile" />

</LinearLayout>

CustomBottomNavigationView.kt

class CustomBottomNavigationView(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) {

   init {
      LayoutInflater.from(context).inflate(R.layout.custom_bottom_navigation_view, this, true)
      setListeners()
   }

   private fun setListeners() {
      val homeButton = findViewById<Button>(R.id.homeButton)
      val profileButton = findViewById<Button>(R.id.profileButton)

      homeButton.setOnClickListener {
         onButtonClickListener?.invoke(Button.HOME)
      }

      profileButton.setOnClickListener {
         onButtonClickListener?.invoke(Button.PROFILE)
      }
   }

   private var onButtonClickListener: ((Button) -> Unit)? = null

   fun setOnButtonClickListener(listener: (Button) -> Unit) {
      onButtonClickListener = listener
   }

   companion object {
      enum class Button {
         HOME,
         PROFILE
      }
   }
}

輸出

結論

在本教程中,可以透過不同的方法在 Android 中實現底部導航,例如使用導航元件、使用 Intent 管理 Activity、在 Activity 中使用片段或建立自定義檢視和事件處理。

每種方法在實現應用各個部分之間的無縫導航方面都具有其自身的優勢和靈活性。開發人員可以根據其專案需求和偏好選擇最合適的方法,為其 Android 應用程式建立使用者友好且直觀的導航體驗。

更新於: 2023年7月27日

2K+ 閱讀量

開啟您的職業生涯

透過完成課程獲得認證

立即開始
廣告