0

آموزش کار با Bottom Sheet در اندروید

دسته بندی ها : برنامه نویسی اندروید ۲۴ مرداد ۱۳۹۹ فرشته آقامیری
ساخت باتم شیت با دیالوگ

استفاده از Bottom Sheet متریال دیزاین در برنامه نویسی اندروید

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

از باتم شیت می توان برای ایجاد منوهایی به منظور دسترسی سریع و توضیحاتی در مورد بخش های اصلی که درون صفحه هستند استفاده کرد. نمونه ی این کامپوننت در برخی اپلیکیشن های گوگل و ویجت ها مانند تلگرام، گوگل درایو و … مشاهده می شود.

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

برای استفاده از Bottom Sheet باید کتابخانه Support Design را به پروژه خود اضافه کنید.

در بخش xml، باید لایه Root را روی CoordinatorLayout قرار دهید که از زیرمجموعه های کتابخانه Design است. استفاده از این لایه در Bottom Sheet باعث می شود تا باز و بسته شدن باتم شیت با انیمیشن باشد که نسبت به باز و بسته شدن عادی، تجربه بهتری به کاربر می دهد.

اکنون یک LinearLayout تعریف کردیم که حاوی دو Textview است. باید تگ

را به LinearLayout اضافه کنید تا این لایه به عنوان باتم شیت معرفی شود.

پروژه را اجرا می‌کنم:

bottom sheet

یک باکس با رنگ پس زمینه سبز که حاوی دو Textview است، نمایش داده می شود. اما این نوار ثابت بوده و با کشیدن آن به سمت پایین هیچ اتفاقی نمی افتد. تگ

را به Bottom Sheet یعنی LinearLayout اضافه می کنیم.

دوباره اجرا می گیریم:

bottom sheet

اکنون نوار به ارتفاع ۵۰dp باز می شود و با کشیدن آن به سمت بالا، به حداکثر ارتفاع ۲۰۰dp می رسد و دوباره با کشیدن نوار به سمت پایین، به ارتفاع اولیه یعنی ۵۰dp برمی گردد.

با استفاده از خاصیت behavior_hideable و مقدار true، نوار به طور کلی به پایین صفحه رفته و محو می‌شود:

البته مقدار false برای این مثال هیچ خاصیتی نداشته و نوار کاملا مخفی نمی شود.

اگر توضیحات بلند بود و می خواستید تنها به اندازه ۲۰۰dp در باتم شیت نمایش داده شود، قابلیت اسکرول را فعال کنید. برای این منظور باید NestedScrollView را جایگزین LinearLayout کنید. بدین ترتیبت امکان اسکرول محتوای باتم شیت فراهم شده و بعد از آنکه نوار به سمت بالا کشیده شود در حداکثر ارتفاع خود یعنی ۲۰۰dp قرار می گیرد.

تعریف Bottom Sheet با استفاده از AlertDialog

همانند مثال قبل، کتابخانه Support Design را به پروژه خود اضافه کنید.
در MainActivity یک دکمه قرار میدهیم تا با کلیک بر روی آن، باتم شیت نمایش داده شود:
برای نمایش Bottom Sheet در قالب یک دیالوگ، یک فرگمنت بسازید و از BottomSheetDialogFragment ارث بری کنید:
BottomSheetFragment.java:

اکنون باید لایه مربوط به فرگمنت را بسازیم. همان محتوایی که در مثال قبل قرار داریم را در اینجا استفاده می کنیم:

fragment_bottom_sheet.xml:

اکنون کلیک را برای دکمه در MainActivity.java می نویسیم:


پروژه را اجرا می کنیم:

bottom sheet

با زدن دکمه back دیوایس یا کشیدن نوار به سمت پایین، نوار حذف می شود.

فرشته آقامیری
فرشته آقامیری

مطالب زیر را حتما بخوانید:

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

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

لینک کوتاه :

عضویت در خبرنامه ویژه مشتریان سیگما پلاس

با عضویت در خبرنامه ویژه سیگما پلاس از آخرین جشنواره های سایت باخبر شوید!