يعد BottomAppBar أحد مكونات مواد Android الجديدة التي تم تقديمها في Google I / O 2018 . هذا هو في الأساس امتداد لمكون شريط الأدوات . يقع BottomAppBar الجديد في الجزء السفلي من نافذة التطبيق ، على عكس شريط الأدوات ، الموجود في قمته. مع هذا النموذج ، يتوقع فريق التصميم المتعدد الأبعاد تجربة مستخدم جديدة (UX). يمكن الوصول إلى BottomAppBar بسهولة أكبر للمستخدم بالمقارنة مع شريط الأدوات المعتاد. من خلال تحريك لوحة التحكم والقائمة إلى أسفل التطبيق ، يوفر BottomAppBar تصميمًا جديدًا جذريًا لتطبيقات Android.
مع BottomAppBar ، تم تغيير موقع زر الإجراء العائم (FAB) أيضًا ( زر الإجراء العائم الروسي). الآن يمكن وضع FAB إما "تحطم" في BottomAppBar ، أو تداخله.
ستوضح هذه المقالة تنفيذ أساسيات BottomAppBar جنبًا إلى جنب مع خيارات وضع FAB الجديدة.
التخصيص
أولاً ، يلزم إعداد أولي صغير.
يمكن العثور على شرح مفصل لكيفية تمكين مكونات المواد لمشروع Android الخاص بك في هذه الصفحة . بالإضافة إلى ذلك ، في هذا البرنامج التعليمي ، تحتاج إلى استخدام Android Studio 3.2 أو أعلى .
فيما يلي خطوات التكوين الضرورية.
build.gradle مستودع Google Maven في ملف build.gradle .
allprojects { repositories { jcenter() maven { url "https://maven.google.com" } } }
2. أضف تبعية لمكونات المواد في ملف build.gradle . ضع في اعتبارك أن الإصدار يتم تحديثه بانتظام.
implementation 'com.google.android.material:material:1.0.0-alpha1'
compileSdkVersion as compileSdkVersion و targetSdkVersion الحد الأدنى من إصدار واجهة برمجة التطبيقات لنظام Android P (أي 28 وما فوق).
4. تأكد من أن التطبيق الخاص بك يرث سمة Theme.MaterialComponents بحيث يستخدم BottomAppBar أحدث أسلوب. بدلاً من ذلك ، يمكنك تصميم BottomAppBar عند الإعلان عن عنصر واجهة المستخدم في ملف XML للتخطيط كما يلي:
style=”@style/Widget.MaterialComponents.BottomAppBar”
التنفيذ
يمكنك إضافة BottomAppBar إلى التخطيط الخاص بك على النحو التالي. أيضًا ، يجب أن يكون BottomAppBar تابعًا لـ CoordinatorLayout .
<com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottom_app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:fabAlignmentMode="center" app:fabAttached="true" app:navigationIcon="@drawable/baseline_menu_white_24"/>
يمكنك ربط FAB بـ BottomAppBar عن طريق تحديد id عنصر BottomAppBar في app:layout_anchor سمة app:layout_anchor لعنصر FAB. يمكن لـ BottomAppBar أن يلف FAB أو يمكن لـ FAB أن يتداخل مع BottomAppBar.
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/baseline_add_white_24" app:layout_anchor="@id/bottom_app_bar" />
سمات BottomAppBar
يوضح الجدول أدناه سمات BottomAppBar.
الخلفية
هذه هي السمة لتعيين لون خلفية BottomAppBar.
fabAlignmentMode
تحدد السمة موضع FAB (إما في المركز أو في نهاية BottomAppBar). أدناه هو محاذاة FAB في نهاية BottomAppBar.
fab مرفق
تم تصميم السمة لربط FAB بـ BottomAppBar ويمكن أن تكون صحيحة أو خاطئة . على الرغم من أن دليل التصميم متعدد الأبعاد لا يوصي بوضع FABs خارج BottomAppBar ، فهناك إمكانية لهذا التخصيص. فيما يلي الحالة التي fabAttached تعيين السمة fabAttached على false .
fabCradleDiameter
يحدد قطر "مهد" يحتوي على FAB.
fabCradleRoundedCornerRadius
يضبط نصف قطر الزاوية عند نقطة التقاء "المهد" والجزء الأفقي من BottomAppBar.
fabCradleVerticalOffset
يشير إلى إزاحة المهد من الأسفل.
فيما يلي ملف 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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottom_app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:fabAlignmentMode="center" app:fabAttached="true" app:navigationIcon="@drawable/baseline_menu_white_24"/> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/baseline_add_white_24" app:layout_anchor="@id/bottom_app_bar" /> </androidx.coordinatorlayout.widget.CoordinatorLayout> </androidx.constraintlayout.widget.ConstraintLayout>
اكتشفنا أساسيات مكون مواد Android الجديد - BottomAppBar ، بالإضافة إلى ميزات FAB الجديدة. ليس من الصعب استخدام عنصر واجهة مستخدم BottomAppBar نفسه ، لأنه يمتد شريط الأدوات المعتاد ، ولكنه يغير بشكل أساسي نهج تصميم واجهة التطبيق.
سيركز الجزءان الثاني والثالث من سلسلة BottomAppBar على العمل مع القوائم والتنقل عبر سلوكيات BottomAppBar المختلفة وتنفيذها وفقًا لمبادئ التصميم متعدد الأبعاد.
→ تنفيذ BottomAppBar. الجزء 2: القائمة والتحكم في درج التنقل
→ تنفيذ BottomAppBar. الجزء 3: سلوك Android