نظرة عامة على ابتكارات مكتبة دعم Android الإصدار v28

مرحبا مرة اخرى

إننا نقترب من تاريخ إطلاق الدورة التدريبية الجديدة "Android Developer" ، لم يتبق شيء ، وهناك القليل من المواد المثيرة للاهتمام التي نشاركها مع الجميع ، بما في ذلك المستمعين المحتملين.

دعنا نذهب.

في الآونة الأخيرة ، تم الإعلان عن الإصدار 28 من مكتبة دعم Android. في الإصدار ألفا الحالي ، لدينا الآن الوصول إلى مجموعة من المكونات الجديدة المثيرة للاهتمام. في هذه المقالة ، أود إلقاء نظرة على الإضافات التي تم إجراؤها على مكتبة الدعم كمكونات لـ "طريقة عرض المواد".



زر المواد

MaterialButton عبارة عن عنصر واجهة مستخدم يمكن استخدامه لعرض الأزرار بنمط مادة في واجهة المستخدم للتطبيقات. يرث هذا الفصل من فئة AppCompatButton ، والتي ربما تستخدمها بالفعل في مشاريعك ، ولكن ما هي الاختلافات؟ افتراضيًا ، سيتم تزيين هذا الزر بالفعل بمظهر مادي دون الحاجة إلى تكوينه بنفسك باستخدام علامة النمط. يمكننا استخدام فئة MaterialButton كما هي ، لأنه سيكون لها بالفعل المظهر المادي الذي نحتاجه - نعتبره فئة أكثر ملاءمة.



يمكننا إضافة هذا الزر إلى ملف التصميم الخاص بنا كما يلي:

<android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="MATERIAL BUTTON" android:textSize="18sp" app:icon="@drawable/ic_android_white_24dp" /> 

بشكل افتراضي ، ستستخدم هذه الفئة لون التمييز لموضوعك لملء خلفية الأزرار والأبيض للنص عليها. إذا لم يملأ الزر ، فسيتم استخدام لون التوكيد للون النص الموجود على الزر مع خلفية شفافة.

إذا كنا نريد إضافة بعض الأنماط الإضافية إلى الزر ، فيمكننا القيام بذلك باستخدام مجموعة السمات style MaterialButton .

• التطبيق: رمز - يستخدم لتحديد الصورة المعروضة في بداية الزر.

• التطبيق: iconTint - يستخدم لتغيير لون الرمز المحدد في التطبيق: سمة الرمز
• التطبيق: iconTintMode - يحدد الوضع الذي سيتم استخدامه لتغيير لون الرمز

• التطبيق: iconPadding - المسافة البادئة التي سيتم تطبيقها على الأيقونة المحددة في التطبيق: سمة الرمز

• التطبيق: extraPaddingLeftForIcon - يحدد المسافة البادئة التي سيتم تطبيقها على يسار الرمز المحدد في التطبيق: سمة الرمز

• التطبيق: extraPaddingRightForIcon - يحدد المسافة البادئة التي سيتم تطبيقها على يمين الرمز المحدد في التطبيق: سمة الرمز

• التطبيق: rippleColor - زر تأثير تموج اللون
• التطبيق: backgroundTint - يستخدم لتطبيق تدرج اللون على خلفية الزر. إذا كنت ترغب في تغيير لون خلفية الزر ، استخدم هذه السمة بدلاً من الخلفية ، حتى لا تنتهك نمط الأزرار
• التطبيق: backgroundTintMode - يستخدم لتحديد الوضع الذي سيتم استخدامه لتغيير تدرج الخلفية

• التطبيق: strokeColor - زر حد اللون
• التطبيق: strokeWidth - عرض زر السكتة الدماغية

• التطبيق: cornerRadius - يستخدم لتحديد نصف قطر تجانس زوايا الزر

رقاقة

يسمح لنا مكون Chip بعرض الرقائق في تخطيطنا. في الواقع ، الشريحة عبارة عن نص على خلفية مستديرة. والغرض منه هو عرض شكل من أشكال النص للمستخدم ، والذي قد يتم تحديده أو عدم تحديده. على سبيل المثال ، يمكن استخدام الرقائق لعرض قائمة بالعروض القابلة للتحديد للمستخدم بناءً على السياق الحالي في التطبيق الخاص بك.



يمكننا إضافة Chip إلى app:chipText ، باستخدام ، على سبيل المثال ، app:chipText سمة app:chipText لتعيين النص الذي سيتم عرضه على الشريحة:

 <android.support.design.chip.Chip android:id="@+id/some_chip" android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This is a chip" /> 

هناك أيضًا مجموعة من السمات الأخرى التي يمكن استخدامها لزيادة تبسيط الرقاقة:

• التطبيق: قابل للتحقق - يستخدم للإعلان عما إذا كان يمكن تمييز الشريحة على أنها محددة / غير محددة. إذا تم تعطيله ، فإن اختيار الشريحة يتصرف كما هو الحال مع الزر.
• التطبيق: chipIcon - يستخدم لعرض الرموز في الشريحة

• التطبيق: closeIcon - يستخدم لعرض أيقونة الحذف في الشريحة

يمكننا أيضًا تعليق المستمعين على مثيلات الرقاقة الخاصة بنا. يمكن أن تكون مفيدة لتتبع تفاعلات المستخدم. إذا كان بالإمكان تحديد الشريحة الخاصة بنا ، فعلى الأرجح سنرغب في معرفة متى تم تغيير هذه الحالة. يمكننا القيام بذلك باستخدام setOnCheckedChangeListener الاستماع setOnCheckedChangeListener :

 some_chip.setOnCheckedChangeListener { button, checked -> } 

الأمر نفسه ينطبق إذا كنا نريد الاستماع إلى التفاعلات مع أيقونة الحذف. للقيام بذلك ، يمكننا استخدام وظيفة setOnCloseIconClickListener لتسجيل أحداث الإزالة:

 some_chip.setOnCloseIconClickListener { } 

مجموعة رقاقة

إذا عرضنا مجموعة من الرقائق على مستخدمينا ، فنحن نريد التأكد من تجميعها بشكل صحيح معًا في رأينا. للقيام بذلك ، يمكننا استخدام مكون طريقة العرض ChipGroup :



إذا كنا نريد استخدام ChipGroup ، فنحن بحاجة فقط إلى التفاف ChipView الخاص بنا في المكون الأصل لـ ChipGroup :

 <android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This" /> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="is" /> // ... </android.support.design.chip.ChipGroup> 

بشكل افتراضي ، قد يبدو ChipViews مثبتًا بشكل بسيط على بعضها البعض. إذا كان الأمر كذلك ، يمكنك إضافة تباعد إلى طرق العرض الفرعية باستخدام سمات ChipGroup التالية:

• التطبيق: chipSpacing - يضيف مسافة أفقيا وعموديا
• التطبيق: chipSpacingHorizontal - يضيف المسافة الأفقية
• التطبيق: chipSpacingVertical - يضيف المسافة العمودية

يمكننا أيضًا إعلان عرض Chip View التابع لنا في سطر واحد داخل حاوية ChipGroup باستخدام app:singleLine :



في هذه الحالة ، تحتاج إلى التفاف ChipGroup في طريقة عرض قابلة للتمرير ، على سبيل المثال ، HorizontalScrollView ، بحيث يمكن للمستخدمين التمرير خلال الشرائح المعروضة:

 <HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content" app:singleLine="true"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="Some chip" /> //  ... </android.support.design.chip.ChipGroup> </HorizontalScrollView> 

عرض بطاقة المواد

في تطبيقاتنا ، ربما استخدمنا بالفعل مكون CardView في مرحلة ما. تحتوي مكتبة الدعم الآن على مكون يسمى MaterialCardView يوفر لنا تطبيقًا جاهزًا للتصميم مصمم على أنه تصميم مواد.



يمكن إضافة CardView إلى تخطيطك مثل هذا:

 <android.support.design.card.MaterialCardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp"> ... child views ... </android.support.design.card.MaterialCardView> 

يمكنك اختياريا اختيار طريقة عرض CardView باستخدام ميزتيها:

• التطبيق: strokeColor - اللون الذي سيتم استخدامه للسكتة الدماغية (يجب ضبطه لعرض الحد)
• التطبيق: strokeWidth - عرض السكتة الدماغية

مع هاتين app:cardBackgroundColor ، يمكنك أيضًا تصميم CardView باستخدام السمات المتاحة في البداية ، مثل app:cardBackgroundColor ، إلخ.

شريط التطبيق أسفل

BottomAppBar هو مكون جديد يسمح لنا بعرض مكون يشبه شريط الأدوات في أسفل BottomAppBar . يتيح لنا ذلك عرض المكونات للمستخدم بطريقة تجعل التفاعل معهم أسهل من شريط الأدوات القياسي.



يمكنك إضافة BottomAppBar إلى ملف التخطيط الخاص بك مثل هذا:

 <android.support.design.bottomappbar.BottomAppBar android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

يبدو أن BottomAppBar يجب أن يكون لديه قائمة مخصصة لها ليتم عرضها على الشاشة. يمكن القيام بذلك برمجياً كما يلي:

 bottom_app_bar.replaceMenu(R.menu.main) 

عندما يتعلق الأمر بتصميم BottomAppBar ، هناك العديد من السمات التي يمكنك استخدامها.

• التطبيق: fabAttached - يشير إلى ما إذا كان FAB قد تم إرفاقه إلى BottomAppBar. يمكنك تمكين FAB باستخدام التطبيق: layout_anchor في مكون FAB الذي تريد الاتصال به باستخدام معرف BottomAppBar. إذا تم إرفاق FAB ، فسيتم إدراجه في BottomAppBar ، وإلا سيبقى FAB أعلى BottomAppBar.

• التطبيق: fabAlignmentMode - تعلن عن موقف FAB الذي تم إرفاقه في BottomAppBar. يمكن أن تكون إما النهاية:

أو المركز:

• التطبيق: fabCradleVerticalOffset - تعلن عن إزاحة رأسية لاستخدامها مع FAB المرفق. الافتراضي هو 0dp

سيؤدي تعيين قيمة dp إلى السماح لـ FAB بالتحرك رأسياً:

• التطبيق: backgroundTint - يستخدم لتغيير تدرج خلفية العرض. إذا كنت ترغب في تعيين لون الخلفية في العرض ، فأنت بحاجة إلى استخدام سمة android:background . سيضمن هذا استقرار العرض التقديمي.

الخاتمة

في رأيي ، هذه إضافات أنيقة إلى مكتبة الدعم. إنني أتطلع إلى استخدام مكونات نمط المواد مباشرة خارج الصندوق ويسرني أيضًا العثور على حالة يمكن فيها استخدام BottomAppBar. أنا متأكد أن الأمر يستغرق بعض الوقت حتى تصبح مكتبة الدعم مستقرة. كالعادة ، أود أن أسمع أفكارك أو تعليقات حول هذه المكونات الجديدة!

النهاية

نحن نتطلع إلى تعليقاتك والأسئلة التي يمكنك تركها هنا أو يمكنك الذهاب إلى باربرا في يوم مفتوح .