Bottom Sheet در اندروید

Bottom Sheet در اندروید

دیالوگ های Bottom Sheet آغازگر عصر جدیدی از نمایش دیالوگ ها و منوها در اندروید است.

Bottom Sheet چیست؟

bottom sheet یک الگوی رابط کاربری و یا یک کامپوننت است که برای نمایش یک View ی قابل بستن (رد کردن) در پایین صفحه استفاده می شود. این View ی قابل بستن معمولاً شامل مجموعه ای از گزینه ها است. در روند کنونی ، اکثر برنامه ها از این الگو برای ساده کردن عملیات ها استفاده می کنند. این الگو برای اولین بار در IOS مشاهده شد. به زبان ساده ، این الگو چیزی نیست جز پنجره ای که پایین صفحه قرار دارد و هنگام نیاز با انیمیشن ظاهر شود.

در توضیحات رسمی طراحی «Material Design» گفته شده: «Bottom Sheet سطحی است متصل به پایین صفحه و حاوی محتوای تکمیلی.»

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

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

چه گونه هایی از Bottom Sheet داریم؟

بسته به نیاز سه نوع Bottom Sheet وجود دارد که عبارتند از:

Bottom Sheet های استاندارد

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

Modal Bottom Sheet یا Bottom Sheet مقید

BottomSheetDialogFragment یک نوع Fragment در کتابخانه پشتیبانی اندروید است که فرگمنت شما را به عنوان یک Bottom Sheet مقید ارائه می دهد و اساساً به عنوان یک دیالوگ (کادر محاوره ای) عمل می کند و بهترین گزینه برای منوها و دیالوگ های ساده است. این کادرهای گفتگوی Bottom Sheet روی محتوای اصلی را می پوشانند و برای تعامل با محتوای اصلی باید آنها را بست چون در زمان نمایش این کادر یک پوشش تار محتوای اصلی را می پوشاند. اگر به محتوای خارج از Bottom Sheet ضربه زده شود ، Bottom Sheet بسته می شود. Bottom Sheet های مقید را می توان به صورت عمودی کشید و با کشیدن کامل آنها به سمت پایین آنها را بست. در تصویر زیر یک Modal Bottom Sheet یا Bottom Sheet مقید می بینید:

Bottom Sheet قابل گسترش

Expanding bottom sheets یا Bottom sheet های قابل گسترش ، سطح کوچک و فرو ریخته ای را فراهم می کند که می تواند در صورت نیاز توسط کاربر گسترش یابد تا فضای بیشتری به آن اختصاص یابد. این نوع بهترین ویژگی های دو نوع قبلی Bottom Sheet ها را ارائه می کند؛ دسترسی مداوم نوع استاندارد و فضا و تمرکز نوع مقید.

پیاده سازی

در اینجا یک نمونه ساده از یک کادر محاوره ای را توسط Bottom Sheet پیاده سازی می کنیم. در این برنامه وقتی کاربر دکمه ای را کلیک می کند Bottom Sheet نمایش داده می شود. برای درک بهتر پیاده سازی هر مرحله را جداگانه بررسی می کنیم.

مرحله اول

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

implementation "com.android.support:design:27.0.2"

مرحله دوم

ابتدا فایل layout که می خواهیم در Bottom Sheet نمایش داده شود را می سازیم:

<?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"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:paddingBottom="8dp">
	

	    <androidx.appcompat.widget.AppCompatTextView
	        android:id="@+id/txt_download"
	        style="@style/BottomSheetItem"
	        android:drawableStart="@drawable/ic_baseline_save_alt_24"
	        android:drawableLeft="@drawable/ic_baseline_save_alt_24"
	        android:text="Download"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintTop_toTopOf="parent" />
	

	    <androidx.appcompat.widget.AppCompatTextView
	        android:id="@+id/txt_copy"
	        style="@style/BottomSheetItem"
	        android:drawableStart="@drawable/copy_iocn"
	        android:drawableLeft="@drawable/copy_iocn"
	        android:text="Copy"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintTop_toBottomOf="@+id/txt_download" />
	

	    <androidx.appcompat.widget.AppCompatTextView
	        android:id="@+id/txt_share"
	        style="@style/BottomSheetItem"
	        android:layout_marginTop="8dp"
	        android:drawableStart="@drawable/share_iocn"
	        android:drawableLeft="@drawable/share_iocn"
	        android:text="Share"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintTop_toBottomOf="@+id/txt_copy" />
	

	    <androidx.appcompat.widget.AppCompatTextView
	        android:id="@+id/txt_whats_app"
	        style="@style/BottomSheetItem"
	        android:drawableStart="@drawable/ic_whatsapp_new"
	        android:drawableLeft="@drawable/ic_whatsapp_new"
	        android:text="Whats App"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintTop_toBottomOf="@+id/txt_share" />
	</androidx.constraintlayout.widget.ConstraintLayout>

می توانید استیل های زیر را نیز به فایل styles.xml اضافه کنید:

<style name="BottomSheetItem">
	        <item name="android:textSize">20sp</item>
	        <item name="android:drawablePadding">20dp</item>
	        <item name="android:layout_width">0dp</item>
	        <item name="android:layout_height">wrap_content</item>
	        <item name="android:padding">15dp</item>
	        <item name="fontFamily">@font/mono_bold</item>
</style>

حالا که مرحله طراحی ظاهر Bottom Sheet را کامل کرده ایم، به مرحله کد نویسی می رسیم.

مرحله سوم

یک کلاس جدید بسازید، این کلاس باید از کلاس BottomSheetDialogFragment ارث بری داشته باشد. متد onCreateView  از این کلاس را override کنید تا layout خودمان را ارائه کنیم:

// Mohamadreza Amani
// Email: help4usr@gmail.com
package com.amani.sample
	import android.os.Bundle
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import com.google.android.material.bottomsheet.BottomSheetDialogFragment
	import com.sample.R
	import kotlinx.android.synthetic.main.bottom_sheet_options.*
	import java.lang.ref.WeakReference
	

	class OptionsBottomSheetFragment : BottomSheetDialogFragment() {
	

	    override fun onCreateView(
	        inflater: LayoutInflater, container: ViewGroup?,
	        savedInstanceState: Bundle?
	    ): View? {
	        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
	    }
	

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

	    private fun setUpViews() {
	        //در اینجا می توان یک کلید برای بستن هم قرار داد که کد آن در کامنت خط زیر هست 
	        //iv_close.setOnClickListener { dismissAllowingStateLoss() }
	        txt_download.setOnClickListener {
	            dismissAllowingStateLoss()
	           Toast.makeText(application, "Download option clicked", Toast.LENGTH_LONG)
	                    .show()
	        }
	       
	       txt_share.setOnClickListener {
	            dismissAllowingStateLoss()
	            Toast.makeText(application, "Share option clicked", Toast.LENGTH_LONG)
	                    .show()
	      }
	    }
	

	    companion object {
	        @JvmStatic
	        fun newInstance(bundle: Bundle): OptionsBottomSheetFragment {
	            val fragment = OptionsBottomSheetFragment()
	            fragment.arguments = bundle
	            return fragment
	        }
	    }
	}

در کد بالا، کد های رسیدگی به رویداد را در همین Fragment قرار دادیم ولی بجای اینکار می توانستیم یک Interface تعریف کنیم و رویداد ها را به Activity بفرستیم تا در Activity به رویداد ها رسیدگی شود. اگر از Interface برای رسیدگی به رویداد ها استفاده کنیم کد های بالا به صورت زیر می شود:

// Mohamadreza Amani
// Email: help4usr@gmail.com
package com.amani.sample
	import android.content.Context
	import android.os.Bundle
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import com.google.android.material.bottomsheet.BottomSheetDialogFragment
	import com.sample.R
	import kotlinx.android.synthetic.main.bottom_sheet_layiut.*
	

	class OptionsBottomSheetFragment : BottomSheetDialogFragment() {
	

	    override fun onCreateView(
	        inflater: LayoutInflater, container: ViewGroup?,
	        savedInstanceState: Bundle?
	    ): View? {
	        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
	    }
	

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

	    private fun setUpViews() {
	        //در اینجا می توان یک کلید برای بستن هم قرار داد که کد آن در کامنت خط زیر هست
	        //iv_close.setOnClickListener { dismissAllowingStateLoss() }
	        txt_download.setOnClickListener {
	            dismissAllowingStateLoss()
	            mListener?.onItemClick("Download")
	

	        }
	

	        txt_share.setOnClickListener {
	            dismissAllowingStateLoss()
	            mListener?.onItemClick("Share")
	        }
	    }
	

	    private var mListener: ItemClickListener? = null
	

	    override fun onAttach(context: Context) {
	        super.onAttach(context)
	        if (context is ItemClickListener) {
	            mListener = context as ItemClickListener
	        } else {
	            throw RuntimeException(
	                context.toString()
	                    .toString() + " must implement ItemClickListener"
	            )
	        }
	    }
	

	    override fun onDetach() {
	        super.onDetach()
	        mListener = null
	    }
	    interface ItemClickListener {
	        fun onItemClick(item: String)
	    }
	

	    companion object {
	        @JvmStatic
	        fun newInstance(bundle: Bundle): OptionsBottomSheetFragment {
	            val fragment = OptionsBottomSheetFragment()
	            fragment.arguments = bundle
	            return fragment
	        }
	    }
	}

مرحله چهارم

طراحی یک layout با یک کلید که با کلیک روی آن Bottom Sheet را نمایش دهیم:

<?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">
	   
	    <androidx.appcompat.widget.AppCompatTextView
	        android:id="@+id/tv_click_me"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="30sp"
	        android:padding="@dimen/spacing_20"
	        android:background="@color/grey3"
	        app:layout_constraintTop_toTopOf="parent"
	        app:layout_constraintBottom_toBottomOf="parent"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        tools:text="Click Me"
	        />
	</androidx.constraintlayout.widget.ConstraintLayout>

مرحله پنجم

مرحله آخر نمایش Bottom Sheet از طریق Activity است:

// Mohamadreza Amani
// Email: help4usr@gmail.com
package com.amani.sample
	import android.os.Bundle
	import androidx.appcompat.app.AppCompatActivity
	import kotlinx.android.synthetic.main.main.*
	

	class SampleActivity :AppCompatActivity(),OptionsBottomSheetFragment.ItemClickListener  {
	

	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	        setContentView(R.layout.amin)
	        tv_click_me?.setOnClickListener {
	            supportFragmentManager.let {
	                OptionsBottomSheetFragment.newInstance(Bundle()).apply {
	                    show(it, tag)
	                }
	            }
	        }
	    }

	    override fun onItemClick(param:String) {
	        when(param){
	            "share"->{
	                //رسیدگی به رویداد
	            }
	            "Download"->{
	                // رسیدگی به رویداد
	            }
	            else->{
	                // رسیدگی به رویداد
	            }
	        }
	    }
	
	}

اگر Activity را در فایل Manifest رجیستر کرده باشید، می توانید برنامه را اجرا کنید. پس از اجرای برنامه تصویر زیر را می بینید:

دستاورد اضافی:

می توانید اجازه گسترش Bottom Sheet از حالت کادر به حالت تمام صفحه را نیز بدهید. برای اینکار مقدار peekHeight را برابر صفر قرار دهید به صورت زیر:

// Mohamadreza Amani
// Email: help4usr@gmail.com

override fun setupDialog(dialog: Dialog, style: Int) {
	        super.setupDialog(dialog, style)
	        val rootView = View.inflate(context, R.layout.dialog_layout, null)
	        dialog.setContentView(rootView)
	

	        val bottomSheet = dialog.window?.findViewById(R.id.design_bottom_sheet) as FrameLayout
	        val behaviour = BottomSheetBehavior.from(bottomSheet)
	

	        behaviour.peekHeight = 0  // اضافه کردن حالت تمام صفحه
	

}