منوی کِشویی در اندروید

منوی کِشویی در اندروید

در این مقاله ساده ترین راه برای پیاده سازی Navigation Drawer (ناوبری کِشویی یا منوی کِشویی) را در برنامه های خود بیاموزید.

Navigation Drawer چیست؟

Navigation Drawer چیزی نیست جز مجموعه ای از گزینه ها در لبه سمت چپ صفحه. معمولاً از دید پنهان است ، اما هنگامی که کاربر از سمت چپ می کشد یا روی آیکون منو کلیک می کند ، باز می شود. منوی کِشویی را می توان در سمت راست صفحه هم قرار داد، در اینصورت کاربر می تواند با کشیدن از سمت راست یا زدن آیکون منو، آن را باز کند. همچنین اگر فضای کافی روی صفحه باشد، (مثلاً در یک رایانه لوحی در حالت افقی) می توان Navigation Drawer را به طور دائمی و بدون پنهان کردن نمایش داد. Navigation Drawer به طور کلی با بسیاری از نام ها مانند:
Nav Drawer  ، Nav menu  ، Left Nav  ، Navigation Menu و غیره نیز نامگذاری می شود.

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

Nav Drawer یکی از روشهای استاندارد استفاده شده در اکثر برنامه هایی است که گزینه های زیادی برای نمایش به کاربران خود دارند. یک روش انعطاف پذیر و آسان برای دستیابی سریع کاربران به بخش مورد نیازشان بجای جستجو در برنامه است. Nav Drawer بهترین راه حل برای جابجایی سریع بین مکان های غیر مرتبط داخل برنامه نیز هست.

چطور Navigation Drawer را پیاده سازی کنیم؟

Navigation Drawer چیزی نیست جز بستری که منوی ما در آن قرار می گیرد. می توان از NavigationView برای ایجاد یک منوی کاملاً سفارشی و  از RecyclerView برای قرار دادن منو ها در Navigation Drawer استفاده کرد. در این مقاله از NavigationView برای پیاده سازی منوها استفاده می کنیم. Navigation View یک Widget یا ابزارک ارائه شده توسط اندروید است که می توانیم از آن در داخل Drawer یا «کِشو» استفاده کنیم. این ابزارک معمولاً با استفاده از DrawerLayout در هنگام پیاده سازی Navigation Drawer های متریال بکار می رود. استفاده از Navigation View ایجاد یک منو برای جابجایی در داخل برنامه را بسیار آسان تر می کند.

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

پیاده سازی

افزودن Navigation Drawer به برنامه نیاز به چند مرحله دارد. برای درک بهتر هر مرحله را جداگانه بررسی می کنیم.

• مرحله اول

یک کلاس مدل تعریف می کنیم که حاوی ویژگی های هر آیتم در منو باشد:

// Mohamadreza Amani
// Email: help4usr@gmail.com
package com.amani.sidenav

data class SideNavItem(
	 var id: Int, // آیدی منو را مشخص می کند
	 var itemName: String, // عنوان منو را مشخص می کند
	 var resourceId: Int// آیکون منو را مشخص می کند
)

• مرحله دوم

افزودن نیازمندی ها به فایل build.gradle در پوشه app :

implementation 'com.google.android.material:material:1.0.0'// For NavigationView
	   
implementation 'androidx.fragment:fragment:1.2.0'// For FragmentContainView

FragmentContainerView  یک Container View سفارشی شده مخصوص fragment ها است و در صورت استفاده از آن نیازی به اضافه کردن SideNavFragment  داخل کد برنامه نیست و بجای اینکار  می توانیم آن را در فایل layout اضافه کنیم. کلاس SideNavFragment فرگمنتی است که ما آن را برای قرار دادن کدهای منوی کشویی در ادامه می سازیم.

• مرحله سوم و پیاده سازی DashboardActivity

فایل layout برای قرار گیری NavigationView را طراحی می کنیم. این همان فایلی است که باید توسط HomeActivity  یا DashboardActivity استفاده شود:

<?xml version="1.0" encoding="utf-8"?>
	<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    xmlns:app="http://schemas.android.com/apk/res-auto"
	    android:id="@+id/drawer_layout"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    xmlns:tools="http://schemas.android.com/tools"
	    android:background="@color/theme_color">
	

	    <RelativeLayout
	        android:layout_width="match_parent"
	        android:layout_height="match_parent">
	        
	     <androidx.appcompat.widget.AppCompatImageView
	            android:layout_width="wrap_content"
	            android:id="@+id/im_hamburger"
	            android:layout_height="wrap_content"
	            android:layout_margin="@dimen/spacing_10"
	            android:padding="13dp"
	            app:srcCompat="@drawable/ic_left_menu"
	            tools:ignore="VectorDrawableCompat" />
	        
	        ......
	

	    </RelativeLayout>
	        
	    <com.google.android.material.navigation.NavigationView
	        android:id="@+id/side_nav_view"
	        android:layout_width="wrap_content"
	        android:layout_height="match_parent"
	        android:layout_gravity="start">
	

	        <androidx.fragment.app.FragmentContainerView
	            android:id="@+id/side_nav_container"
	            android:layout_width="match_parent"
	            android:layout_height="match_parent"
	            android:layout_gravity="start"
	            android:name="com.amani.SideNavFragment"
	            tools:layout="@layout/fragment_side_nav" />
	

	    </com.google.android.material.navigation.NavigationView>
	

	</androidx.drawerlayout.widget.DrawerLayout>

در تگ FragmentContainerView  می بینید که صفتی با نام name وجود دارد و مقدار آن نام فرگمنتی است که میزبانی می شود. ما در آن نام کلاس SideNavFragment را که در ادامه می سازیم و یک فرگمنت است قرار داده ایم.

Activity به صورت زیر است:

// Mohamadreza Amani
// Email: help4usr@gmail.com
package com.amani.sidenav

	import android.os.Bundle
	import androidx.appcompat.app.AppCompatActivity

	class DashboardActivity: AppCompatActivity() {

	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	        setContentView(R.layout.main)
	          im_hamburger?.setOnClickListener {
	            drawer_layout.openDrawer(GravityCompat.START)
	        }
	    }    
	    
	    fun closeDrawer(item: SideNavItem) {
	        drawer_layout?.closeDrawer(GravityCompat.START)
	        when (item.id) {
	            1 -> {
	                handleUpgrade()
	            }
	            2 -> {
	                rateUs()
	            }
	            3 -> {
	                shareApp()
	            }
	            4 -> {
	                handlesettings()
	            }
	          
	        }
	    }

	}

• مرحله چهارم

پیاده سازی فایل layout برای SideNavFragment :

<?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"
	    android:background="@color/white">
	

	    <!--  ویویی که رنگ زمینه را برای هدر مشخص می کند  -->
	    <View
	        android:id="@+id/header"
	        android:layout_width="match_parent"
	        android:layout_height="0dp"
	        android:background="@color/theme_color"
	        app:layout_constraintBottom_toBottomOf="@+id/txt_app_name"
	        app:layout_constraintTop_toTopOf="parent" />
	

	    <androidx.appcompat.widget.AppCompatTextView
	        android:id="@+id/txt_app_name"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:gravity="left"
	        android:paddingLeft="20dp"
	        android:paddingRight="20dp"
	        android:paddingBottom="70dp"
	        android:layout_marginTop="70dp"
	        android:textColor="@color/white"
	        android:textSize="40sp"
	        app:fontFamily="@font/sample"
	        app:layout_constraintLeft_toLeftOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintRight_toRightOf="parent"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintTop_toTopOf="parent"
	        android:text="Side Nav" />
	

	    <androidx.recyclerview.widget.RecyclerView
	        android:id="@+id/rv_side_nav_options"
	        android:layout_width="match_parent"
	        android:layout_height="0dp"
	        android:layout_marginTop="10dp"
	        android:clipToPadding="false"
	        app:layout_constraintTop_toBottomOf="@id/header"
	        tools:layout_editor_absoluteX="0dp" />
	

	</androidx.constraintlayout.widget.ConstraintLayout>

کد بالا را می توانید به شیوه دلخواه خودتان هم پیاده کنید. این کد فقط یک نمونه بود. این همان طرحی است که با کلیک روی منو یا کشیدن از سمت چپ ، آن را مشاهده خواهیم کرد.

• مرحله پنجم

اکنون زمان پیاده سازی SideNavFragment فرا رسیده است. در این کلاس ، شی از نوع آداپتور ایجاد می کنیم که منوها را نمایش می دهد:

// Mohamadreza Amani
// Email: help4usr@gmail.com
package com.amani.sidenav
	

	import android.os.Bundle
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import android.widget.Toast
	import androidx.fragment.app.Fragment
	import androidx.recyclerview.widget.LinearLayoutManager
	import com.example.sidenav.SideNavAdapter
	import com.example.sidenav.SideNavItem
	import kotlinx.android.synthetic.main.fragment_side_nav.*
	

	class SideNavFragment: Fragment(){
	

	    private val sideNavAdapter: SideNavAdapter = SideNavAdapter { position, item ->
	        onItemClick(position,item)
	    }
	

	    private fun onItemClick(position: Int, item: SideNavItem) {
	        Toast.makeText(requireContext(),"" + item.itemName,Toast.LENGTH_LONG).show()
	        (activity as MenuScreen).closeDrawer(item)
	    }
	

	    override fun onCreateView(
	        inflater: LayoutInflater,
	        container: ViewGroup?,
	        savedInstanceState: Bundle?
	    ): View?  = inflater.inflate(R.layout.fragment_side_nav, container, false)
	

	    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
	        super.onViewCreated(view, savedInstanceState)
	        setUpViews()
	    }
	

	    private fun setUpViews() {
	        rv_side_nav_options?.layoutManager = LinearLayoutManager(requireActivity(), LinearLayoutManager.VERTICAL, false)
	        rv_side_nav_options?.adapter = sideNavAdapter
	        sideNavAdapter.setNavItemsData(prrepareNavItems())
	    }
	

	   //در اینجا لیستی از آیتم هایی می سازیم که می خواهیم در منو نمایش داده شود
	    private fun prrepareNavItems(): List<SideNavItem> {
	        val menuItemsList = ArrayList<SideNavItem>()
	        menuItemsList.add(SideNavItem(1, "Upgrade", R.drawable.ic_upgrade))
	        menuItemsList.add(SideNavItem(2, "Rate us", R.drawable.ic_rate))
	        menuItemsList.add(SideNavItem(3, "Share", R.drawable.ic_share))
	        menuItemsList.add(SideNavItem(5, "Settings", R.drawable.ic_settings))
	        return menuItemsList
	    }
	}

• مرحله ششم

ساختن adapter را با پیاده سازی کلاس SideNavAdapter و فایل layout آن برای نمایش هر کدام از آیتم های منو تمام می کنیم. فایل layout را بر اساس اینکه چطور می خواهید هر کدام از آیتم های منو نمایش داده شوند پیاده سازی می کنیم:

<?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="wrap_content"
	    android:paddingBottom="@dimen/spacing_10"
	    android:background="?android:attr/selectableItemBackground">
	

	    <androidx.appcompat.widget.AppCompatImageView
	        android:id="@+id/iv_nav_option"
	        android:layout_width="@dimen/spacing_30"
	        android:layout_height="@dimen/spacing_30"
	        android:layout_marginStart="@dimen/sidenav_horizontal_margin"
	        android:layout_marginLeft="@dimen/sidenav_horizontal_margin"
	        android:layout_marginTop="@dimen/spacing_10"
	        android:layout_marginBottom="@dimen/spacing_10"
	        app:layout_constraintBottom_toBottomOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintTop_toTopOf="parent" />
	

	    <androidx.appcompat.widget.AppCompatTextView
	        android:id="@+id/tv_nav_text"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_gravity="center_vertical"
	        android:layout_marginStart="15dp"
	        android:layout_marginLeft="15dp"
	        android:ellipsize="end"
	        android:textColor="@color/black"
	        android:textSize="16sp"
	        app:layout_constraintBottom_toBottomOf="@id/iv_nav_option"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toEndOf="@id/iv_nav_option"
	        app:layout_constraintTop_toTopOf="@id/iv_nav_option"
	        tools:text="Rate" />
	

	    <View
	        android:layout_width="0dp"
	        android:layout_height="10dp"
	        android:background="@color/grey"
	        android:visibility="visible"
	        app:layout_constraintBottom_toBottomOf="parent"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent" />
	

	</androidx.constraintlayout.widget.ConstraintLayout>

حالا زمان پیاده سازی کلاس SideNavAdapter است:

// Mohamadreza Amani
// Email: help4usr@gmail.com
package com.amani.sidenav

	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import androidx.recyclerview.widget.RecyclerView
	import com.example.sidenav.R
	import com.example.sidenav.SideNavItem
	import kotlinx.android.synthetic.main.item_side_nav.view.*
	
	class SideNavAdapter(private val onItemClick: ((position: Int, item: SideNavItem) -> Unit)) :
	    RecyclerView.Adapter<SideNavAdapter.SideNavVH>() {
	    var menuItemsList = ArrayList<SideNavItem>()
	

	    fun setNavItemsData( list: List<SideNavItem>){
	        menuItemsList.addAll(list)
	        notifyDataSetChanged()
	    }
	
	    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): SideNavAdapter.SideNavVH {
	        return SideNavVH(
	            LayoutInflater.from(viewGroup.context)
	                .inflate(R.layout.item_side_nav, viewGroup, false)
	        )
	    }
	
	    inner class SideNavVH(inflate: View) : RecyclerView.ViewHolder(inflate) {
	        fun setData(sideNavItem: SideNavItem) {
	            itemView.setOnClickListener {
	                sideNavItem.let {
	                    onItemClick.invoke(adapterPosition, sideNavItem)
	                }
	            }
	            itemView.iv_nav_option?.setImageResource(sideNavItem.resourceId)
	            itemView.tv_nav_text?.text = sideNavItem.itemName
	        }
	    }
	
	    override fun getItemCount(): Int {
	        return menuItemsList.size
	    }
	
	    override fun onBindViewHolder(holder: SideNavVH, position: Int) {
	        holder.setData(menuItemsList[position])
	    }
	}

جمع بندی

کار ما تمام شد این یک پیاده سازی آسان با امکان سفارشی شدن برای Side Nav بود. اگر با استفاده از منوها آن را پیاده سازی می کردیم، و بعداً کسی می خواست ظاهر یک مورد را سفارشی کند ، برایش مشکل بود. بنابراین حتی اگر کمی زمان گیر باشد پیاده سازی کد قابل استفاده مجدد و قابل سفارشی شدن به زحمت آن می ارزد.