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

  ‏سطح متوسط
‏  8 دقیقه
۲۹ آذر ۱۳۹۹

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

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

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

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

مراحل ساخت Bottom Navigation

مرحله‌ی 1: یک پروژه‌ی جدید در اندروید استودیو ایجاد کنید.
مرحله‌ی 2: وابستگی زیر را به فایل (build.gradle (app اضافه کنید.
ما در این آموزش از کتابخانه‌ی Material Design استفاده خواهیم کرد، بنابراین باید آن را  به فایل (build.gradle (app اضافه کنیم:
implementation ‘com.google.android.material:material:1.2.0’
مرحله‌ی 3: کار با فایل activity_main.xml را شروع می‌کنیم.

در این مرحله ما به یک 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>
مرحله‌ی 4: یک منو برای Bottom Navigation در اندروید استودیو ایجاد کنید.

در 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>
مرحله‌ی 5: استایل Action Bar را تغییر دهید.
از آنجا که ما از کتابخانه Material Design Google استفاده می‌کنیم، باید استایل Bottom Navigation را تغییر دهیم تا از همان کتابخانه استفاده کنیم، در غیر این صورت Bottom Navigation سیاه و آیتم‌های آن غیرقابل مشاهده خواهد بود. برای تغییر آن، با کلیک بر روی value <- res ->  به styles.xml بروید و استایل را به صورت زیر تغییر دهید:
 <style name=”AppTheme” parent=”Theme.MaterialComponents.Light.DarkActionBar”>
فایل styles.xml به شکل زیر است:
<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>
مرحله‌ی 6: فرگمنت‌ها را برای نمایش ایجاد کنید.
اکنون که Bottom Navigation را داریم، می‌خواهیم با کلیک بر روی هر آیتم، ما را به یک فرگمنت یا اکتیوتی دیگری منتقل کند. در این مثال، برای هر آیتم یک فرگمنت ایجاد می‌کنیم و هر زمان که بر روی آیتم مربوطه کلیک شد، آن را نمایش می‌دهیم. از آنجا که ما سه آیتم را در Bottom Navigation ایجاد کردیم، سه فرگمنت نیز ایجاد خواهیم کرد. برای ایجاد فرگمنت، روی app کلیک راست کنید، سپس -> Fragment (Blank) <- Fragment <- New را بزنید.
نام فرگمنت را FirstFragment و فایل XML مربوطه را fragment_first قرار دهید. برای اینکه همه چیز را ساده نگه ‌داریم، به هر سه فرگمنت فقط یک TextView اضافه می‌کنیم. با این حال، می‌توانیم فرگمنت‌ها را تغییر دهیم، همانطور که می‌خواهیم در برنامه باشد. کد fragment_first.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"> 

	<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) { 
}
مرحله‌ی 7: کار با فایل MainActivity.kt را شروع ‌کنید.
در حال حاضر هر آنچه را که نیاز داریم در دسترس داشته و در آخر فقط باید در MainActivity.kt کد‌های لازم را به کار ببریم تا همه چیز به برنامه متصل شود. ابتدا، یک تابع به نام ()setCurrentFragment ایجاد کنید که یک Fragment را به عنوان آرگومان در نظر بگیرد و آن را در فایل activity_main.xml برای FramLayout ما تنظیم کند. به آیتم‌های موجود در Bottom Navigation یک onClickListener اضافه کنید تا با کلیک روی آیتم‌ها، فرگمنت مربوطه را نمایش دهد. بعد از افزودن همه‌ی این کدها، MainActivity.kt به شکل زیر می‌باشد:
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 و متصل کردن آن به فرگمنت‌ها را با زبان کاتلین آموختیم. شما می‌توانید با خروجی گرفتن از این برنامه و تست آن در شبیه ساز اندروید استودیو، با آن کار کنید و آن را در صورت نیاز خود تغییر دهید. خوشحال می‌شویم سوالات و نظرات خود را در مورد این آموزش با ما و کاربران سون لرن به اشتراک بگذارید.

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

چه امتیازی به این مقاله می دید؟
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !