آموزش Bottom Navigation در اندروید

همه‌ی ما از برنامه‌هایی که دارای Bottom Navigation هستند، استفاده کرده‌ایم. یکی از معروف‌ترین برنامه‌ها که از Bottom Navigation بهره برده است و اکثر ما آن را می‌شناسیم، Instagram است. با استفاده از این قابلیت، شما می‌توانید تجربه‌ی کاربری بهتری را در اختیار کاربر بگذارید و همچنین جابه‌جایی در صفحات برنامه را برای کاربر راحت‌تر کنید. در زیر تصویری از Bottom Navigation را مشاهد می‌کنید. در ادامه‌ی این مقاله به شما نحوه‌ی پیاده سازی Bottom Navigation در اندروید را آموزش می‌دهیم، با ما همراه باشید.

چرا به Bottom Navigation نیاز داریم؟

دلایل اهمیت استفاده از Bottom Navigation عبارتند از:

• به کاربر این امکان را می‌دهد تا به‌راحتی بین اکتیویتی‌ها و یا فرگمنت‌ها جابه‌جا شود.
• Bottom Navigation باعث می‌شود کاربر از صفحه‌های مختلف موجود در برنامه آگاه شود.
• کاربر می‌تواند صفحه‌ای که در حال حاضر در آن می‌باشد را تشخیص دهد و در صورت نیاز بین صفحه‌های دیگر جابه‌جا شود.

مراحل ساخت Bottom Navigation

implementation ‘com.google.android.material:material:1.2.0’

در این مرحله ما به یک FramLayout و یک Bottom Navigation، در فایل activity_main.xml نیاز داریم. FrameLayout شامل فرگمنت‌هایی خواهد بود که با کلیک کاربر روی آیتم‌های موجود در Bottom Navigation تغییر خواهد کرد. فایل activity_main.xml را در زیر مشاهده می‌کنید:

<?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout
	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"> 

	<FrameLayout
		android:id="@+id/flFragment"
		android:layout_width="match_parent"
		android:layout_height="0dp"
		app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintHorizontal_bias="0.5"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent" /> 

	<com.google.android.material.bottomnavigation.BottomNavigationView
		android:id="@+id/bottomNavigationView"
		android:layout_width="match_parent"
		android:layout_height="75dp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintHorizontal_bias="0.5"
		app:layout_constraintStart_toStartOf="parent"
		app:menu="@menu/bottom_nav_menu"/> 
	
</androidx.constraintlayout.widget.ConstraintLayout>

در Bottom Navigation مواردی وجود دارد که با استفاده از منو ایجاد می‌شوند. برای ایجاد یک منو، ابتدا با کلیک روی res <- app  (کلیک راست) ->  Android Resource Directory <- New، یک فهرست ایجاد کنید و در نوع آن گزینه Menu را انتخاب کنید.

برای ایجاد یک فایل منو، روی menu <- res کلیک کنید (کلیک راست) -> Menu Resource File <- New را بزنید و نام آن را bottom_nav_menu بگذارید.

حالا می‌توانید به هر تعداد که می‌خواهید در فایل bottom_nav_menu.xml، آیتم ایجاد کنید. همچنین باید برای هر یک از این آیتم‌ها یک آیکون ایجاد کنید. برای ایجاد یک آیکون، روی app کلیک کنید -> drawable <- res (کلیک راست) -> Image Asset <- New یا Vector Asset را انتخاب کنید.

در پنجره‌ی باز شده، می‌توانید آیکون را نامگذاری کنید اما توجه داشته باشید که نام نباید شامل حرف بزرگ باشد. می‌توانید با جستجو در آن، آیکون مورد نظر خود را انتخاب کرده و پس از اتمام بر روی  Finish <- Next کلیک کنید.

حالا این آیتم‌ها را در menu_nav_men.xml اضافه کنید. به این ترتیب فایل bottom_nav_menu.xml پس از افزودن آیتم‌ها به‌صورت زیر خواهد بود:

<?xml version="1.0" encoding="utf-8"?> 
<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
	<item
		android:id="@+id/person"
		android:title="Person"
		android:icon="@drawable/ic_person_foreground"/> 
	<item
		android:id="@+id/home"
		android:title="Home"
		android:icon="@drawable/ic_home_foreground"/> 
	<item
		android:id="@+id/settings"
		android:title="Settings"
		android:icon="@drawable/ic_settings_foreground"/> 
</menu>

 <style name=”AppTheme” parent=”Theme.MaterialComponents.Light.DarkActionBar”>

<resources> 
	<!-- Base application theme. -->
	<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> 
		<!-- Customize your theme here. -->
		<item name="colorPrimary">@color/colorPrimary</item> 
		<item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
		<item name="colorAccent">@color/colorAccent</item> 
	</style> 

</resources>

<?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout
	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"> 

	<TextView
		android:id="@+id/firstFragment"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Geeks for Geeks"
		android:textColor="#43a047"
		android:textSize="40sp"
		android:textStyle="italic|bold"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintHorizontal_bias="0.5"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent" /> 

</androidx.constraintlayout.widget.ConstraintLayout>

سپس، FirstFragment.kt را باز کنید تا fragment_first.xml نمایش داده شود. برای این کار، تمام کدهای نوشته شده‌ی قبلی را در FirstFragment.kt حذف کرده و کد زیر را جایگزین آن کنید. کد زیر فقط طرحی را که برای فرگمنت خود ایجاد کرده‌ایم می‌گیرد و آن را نمایش می‌دهد. اگر بخواهیم که فرگمنت ما وظیفه‌ای را انجام دهد، آن کد را در FirstFragment.kt اضافه خواهیم کرد.

import androidx.fragment.app.Fragment 

class FirstFragment:Fragment(R.layout.fragment_first) { 
}

به همین ترتیب، دو فرگمنت دیگر را برای دو مورد باقیمانده ایجاد کنید. در زیر به ترتیب فایل‌هایfragment_second.xml ، SecondFragment.kt ، fragment_third.xml و ThirdFragment.kt آورده شده است.

<?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout
	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"> 

	<TextView
		android:id="@+id/secondFragment"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Data Structures"
		android:textColor="#43a047"
		android:textSize="40sp"
		android:textStyle="italic|bold"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintHorizontal_bias="0.5"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent" /> 

</androidx.constraintlayout.widget.ConstraintLayout>

import androidx.fragment.app.Fragment 

class SecondFragment:Fragment(R.layout.fragment_second) { 
}

<?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout
	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"> 

	<TextView
		android:id="@+id/thirdFragment"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Algorithms"
		android:textColor="#43a047"
		android:textSize="40sp"
		android:textStyle="italic|bold"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintHorizontal_bias="0.5"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent" /> 

</androidx.constraintlayout.widget.ConstraintLayout>

import androidx.fragment.app.Fragment 

class ThirdFragment:Fragment(R.layout.fragment_third) { 
}

import androidx.appcompat.app.AppCompatActivity 
import android.os.Bundle 
import androidx.fragment.app.Fragment 
import kotlinx.android.synthetic.main.activity_main.* 

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

		val firstFragment=FirstFragment() 
		val secondFragment=SecondFragment() 
		val thirdFragment=ThirdFragment() 

		setCurrentFragment(firstFragment) 

		bottomNavigationView.setOnNavigationItemSelectedListener { 
			when(it.itemId){ 
				R.id.home->setCurrentFragment(firstFragment) 
				R.id.person->setCurrentFragment(secondFragment) 
				R.id.settings->setCurrentFragment(thirdFragment) 

			} 
			true
		} 

	} 

	private fun setCurrentFragment(fragment:Fragment)= 
		supportFragmentManager.beginTransaction().apply { 
			replace(R.id.flFragment,fragment) 
			commit() 
		} 
	
}

جمع بندی:

در این مقاله نحوه‌ی پیاده سازی Bottom Navigation و متصل کردن آن به فرگمنت‌ها را با زبان کاتلین آموختیم. شما می‌توانید با خروجی گرفتن از این برنامه و تست آن در شبیه ساز اندروید استودیو، با آن کار کنید و آن را در صورت نیاز خود تغییر دهید. خوشحال می‌شویم سوالات و نظرات خود را در مورد این آموزش با ما و کاربران سون لرن به اشتراک بگذارید.

اگر به یادگیری بیشتر در زمینه‌ی اندروید علاقه داری، با شرکت در دوره‌ی آموزشی متخصص اندروید در کمتر از یکسال به یک توسعه‌دهنده اندروید همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه و حتی پیاده‌سازی اپلیکیشن خودت هستی.

نویسنده

امیر حسین حیدری