مكتبة iOS-style Bottom Sheets for Navigation 3 لإنشاء Bottom Sheet احترافي في Jetpack Compose
أصبحت واجهات Bottom Sheet جزءًا أساسيًا من تصميمات التطبيقات الحديثة، خاصةً بعد انتشار أسلوب التنقل الموجود في تطبيقات iOS، حيث تظهر الصفحات الجديدة على شكل نافذة سفلية قابلة للسحب مع الحفاظ على الصفحة الحالية في الخلفية.
ومع إطلاق Navigation 3 في Jetpack Compose بدأ المطورون بالبحث عن حلول توفر تجربة مشابهة لنظام iOS، وهنا جاءت مكتبة iOS-style Bottom Sheets for Navigation 3 التي تسمح بعرض شاشات التنقل داخل Bottom Sheet مع دعم كامل لـ Navigation 3.
توفر هذه المكتبة تجربة استخدام حديثة وسلسة، كما أنها تتكامل مع Jetpack Compose دون الحاجة إلى إنشاء نظام تنقل مخصص أو كتابة كمية كبيرة من الأكواد.
في هذا المقال سنتعرف على كيفية استخدام مكتبة iOS-style Bottom Sheets for Navigation 3، وأهم مميزاتها، وطريقة إضافتها إلى المشروع، بالإضافة إلى أفضل الممارسات للحصول على تجربة مستخدم احترافية.
لماذا نستخدم iOS-style Bottom Sheets؟
تعتمد الكثير من التطبيقات الحديثة على Bottom Sheets بدلاً من الانتقال التقليدي بين الصفحات، لأنها تمنح المستخدم تجربة أكثر سلاسة مع الحفاظ على سياق الشاشة الحالية.
ومن أهم مميزات هذه المكتبة:
- تكامل مباشر مع Navigation 3.
- واجهة مشابهة لتطبيقات iOS.
- حركات انتقال سلسة.
- إمكانية سحب النافذة للأسفل لإغلاقها.
- سهولة تخصيص شكل Bottom Sheet.
- سهولة دمجها داخل مشاريع Jetpack Compose.
ولهذا السبب أصبحت من المكتبات المميزة للمطورين الذين يرغبون في تقديم تجربة استخدام حديثة داخل تطبيقاتهم.
فكرة المكتبة
تعتمد المكتبة على استبدال الانتقال التقليدي بين الشاشات بعرض الشاشة الجديدة داخل Bottom Sheet.
فعند الضغط على عنصر معين يتم فتح شاشة جديدة من أسفل الشاشة مع إمكانية سحبها أو إغلاقها بسهولة، بينما تبقى الشاشة السابقة مرئية في الخلفية.
ويمنح هذا الأسلوب المستخدم إحساسًا مشابهًا للتنقل الموجود داخل تطبيقات iOS الحديثة.
إضافة المكتبة
يمكن إضافة المكتبة إلى المشروع باستخدام Gradle.
dependencies {
implementation("com.tbahlai:ios-style-bottom-sheet-nav3:VERSION")
}
بعد مزامنة المشروع تصبح جميع مكونات المكتبة جاهزة للاستخدام داخل Jetpack Compose.
إنشاء Bottom Sheet Navigator
توفر المكتبة Navigator مخصصًا لإدارة التنقل بين الصفحات داخل Bottom Sheet.
ويتم ربطه مع Navigation 3 بحيث تصبح عملية الانتقال بين الشاشات مشابهة تمامًا للتنقل التقليدي.
val navigator = rememberBottomSheetNavigator()
بعد ذلك يمكن استخدامه داخل NavHost لإدارة جميع الصفحات.
إنشاء الشاشة الأولى
يتم إنشاء الشاشة الرئيسية بالطريقة المعتادة باستخدام Composable.
@Composable
fun HomeScreen() {
}
ويمكن من خلالها فتح أي شاشة جديدة داخل Bottom Sheet عند الضغط على زر أو عنصر معين.
فتح Bottom Sheet
بعد إعداد Navigator يمكن الانتقال إلى شاشة جديدة تظهر من أسفل الشاشة.
navigator.navigate(
DetailsScreen()
)
ستظهر الشاشة الجديدة مع حركة انتقال ناعمة تحاكي تطبيقات iOS.
إغلاق Bottom Sheet
توفر المكتبة أكثر من طريقة لإغلاق النافذة السفلية.
يمكن للمستخدم سحب النافذة للأسفل، أو إغلاقها برمجيًا عند تنفيذ عملية معينة.
navigator.popBackStack()
وبذلك يعود المستخدم مباشرة إلى الشاشة السابقة.
التعامل مع الرسوم المتحركة
من أهم مميزات المكتبة أنها توفر انتقالات Animation جاهزة دون الحاجة إلى كتابة أي كود إضافي.
كما تتم إدارة حركة فتح وإغلاق Bottom Sheet تلقائيًا للحصول على تجربة استخدام سلسة.
ويمكن تخصيص بعض الإعدادات بما يتناسب مع تصميم التطبيق.
دمج المكتبة مع Navigation 3
تم تصميم المكتبة خصيصًا للعمل مع Navigation 3، لذلك يمكن استخدامها داخل المشاريع الجديدة بسهولة.
كما يمكن الجمع بين التنقل التقليدي والتنقل باستخدام Bottom Sheet داخل نفس التطبيق حسب احتياجات المشروع.
استخدامات عملية للمكتبة
يمكن استخدام iOS-style Bottom Sheets في العديد من السيناريوهات، مثل:
- عرض تفاصيل المنتجات.
- نماذج تسجيل الدخول.
- إضافة تعليق جديد.
- اختيار الصور.
- إعدادات التطبيق.
- صفحات تأكيد الطلب.
- عرض معلومات المستخدم.
- اختيار الموقع أو العنوان.
أفضل الممارسات
- استخدم Bottom Sheet للمهام السريعة فقط.
- تجنب وضع صفحات طويلة جدًا داخل النافذة.
- اجعل إمكانية السحب واضحة للمستخدم.
- استخدم Material 3 للحصول على تصميم متناسق.
- اختبر حركة التنقل على مختلف أحجام الشاشات.
- لا تستخدم Bottom Sheet لجميع الصفحات الرئيسية داخل التطبيق.
- احرص على الحفاظ على تجربة استخدام بسيطة وسريعة.
الخلاصة
تعد مكتبة iOS-style Bottom Sheets for Navigation 3 خيارًا رائعًا للمطورين الذين يرغبون في تقديم تجربة تنقل حديثة داخل تطبيقات Android باستخدام Jetpack Compose.
فهي توفر تكاملًا مباشرًا مع Navigation 3، ورسومًا متحركة سلسة، وإمكانية عرض الصفحات داخل Bottom Sheet بطريقة مشابهة لتطبيقات iOS، مما يساعد على تحسين تجربة المستخدم وتقليل التعقيد أثناء التنقل بين الشاشات.
كما يمكن دمج المكتبة بسهولة مع المشاريع الحالية، وتخصيص سلوك Bottom Sheet بما يتناسب مع احتياجات التطبيق، مما يجعلها خيارًا مناسبًا للتطبيقات الحديثة التي تعتمد على واجهات مستخدم تفاعلية.
رابط المكتبة
iOS-style Bottom Sheets for Navigation 3
لمزيد من المقالات : تعلم المزيد عن Android وJetpack Compose وKotlin
الكود كامل
// إضافة المكتبة
dependencies {
implementation("com.tbahlai:ios-style-bottom-sheet-nav3:VERSION")
}
// إنشاء Bottom Sheet Navigator
val navigator = rememberBottomSheetNavigator()
// فتح شاشة داخل Bottom Sheet
navigator.navigate(
DetailsScreen()
)
// إغلاق Bottom Sheet
navigator.popBackStack()Github code
