1. مقدمة
تساعد المكونات المادية (MDC) المطورين على تنفيذ التصميم المتعدد الأبعاد. يضم مركز MDC، الذي أنشأه فريق من المهندسين ومصممي تجربة المستخدم في Google، عشرات من مكونات واجهة المستخدم الجميلة والعملية، وهو متاح لأجهزة Android وiOS والويب وFlutter.material.io/develop |
إن Material Components for Android (MDC Android) ليس نظامًا أو إطار عمل جديدًا يتطلب تغييرًا نموذجيًا في تطبيقك. يستند MDC Android إلى الفئات وواجهات برمجة التطبيقات التي تعرفها بالفعل في Android، مثل أزرار AppCompat والحقول النصية. يمكن استخدام المكونات التي يوفّرها MDC Android حسب الحاجة وإجراء تحسينات فورية في تصميم تطبيقك الحالي.
ما الذي ستنشئه
في هذا الدرس التطبيقي حول الترميز، ستستبدل بعض المكونات الحالية في نموذج بأخرى جديدة من قِبل MDC.
مكونات MDC-Android في هذا الدرس التطبيقي حول الترميز
- حقول النص
- الأزرار
- القوائم
المتطلبات
- معرفة أساسية بتطوير تطبيقات Android
- استوديو Android (يمكنك تنزيله من هنا إذا لم يكن متوفّرًا لديك)
- محاكي أو جهاز Android (متاح من خلال "استوديو Android")
- نموذج الرمز (انظر الخطوة التالية)
ما هو تقييمك لمستوى خبرتك في إنشاء تطبيقات Android؟
2. إعداد بيئة التطوير
تنزيل تطبيق "الدرس التطبيقي حول الترميز" للمبتدئين
يتوفّر تطبيق إجراء التفعيل في دليل material-components-android-codelabs-111-starter/kotlin. تأكَّد من cd في ذلك الدليل قبل البدء.
...أو استنساخها من GitHub
لاستنساخ هذا الدرس التطبيقي حول الترميز من GitHub، شغِّل الأوامر التالية:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
تحميل رمز إجراء التفعيل في "استوديو Android"
- بعد انتهاء معالج الإعداد وظهور نافذة مرحبًا بك في استوديو Android، انقر على فتح مشروع استوديو Android حالي. انتقل إلى الدليل الذي قمت فيه بتثبيت نموذج التعليمات البرمجية، وحدد kotlin ->. shipping (الشحن) (أو ابحث عن shipping (الشحن) على جهاز الكمبيوتر) لفتح مشروع "الشحن".
- انتظِر قليلاً حتى ينشئ "استوديو Android" المشروع ويزامنه، كما هو موضّح من خلال مؤشرات النشاط أسفل نافذة "استوديو Android".
- في هذه المرحلة، قد يعرض "استوديو Android" بعض أخطاء الإصدار بسبب عدم توفُّر حزمة تطوير البرامج (SDK) لنظام التشغيل Android أو أدوات الإصدار، مثل الأداة الموضّحة أدناه. اتّبِع التعليمات الواردة في "استوديو Android" لتثبيت هذه العناصر أو تحديثها ومزامنة مشروعك.
تشغيل تطبيق إجراء التفعيل
|
|
اكتمال عملية النقل بنجاح من المفترض أن يظهر لك التطبيق ونموذجه.
3- تعديل الحقول النصية
تحتوي الحقول النصية في Material Design على قابلية استخدام كبيرة على حقول النص العادي. فمن خلال تحديد منطقة النتائج باستخدام مخطط تفصيلي أو تعبئة خلفية، من المرجح أن يتفاعل المستخدمون مع النموذج أو يتعرفون على حقول نصية ضمن محتوى أكثر تعقيدًا.
استيراد MDC-Android
انتقِل إلى ملف build.gradle في وحدة app وتأكَّد من أنّ الكتلة dependencies تتضمن اعتمادًا على MDC Android:
api 'com.google.android.material:material:1.1.0-alpha05'
استبدال أنماط الحقول النصية
في shipping_info_activity.xml، أضِف النمط التالي إلى جميع مكوّنات XML الخاصة بـ TextInputLayout:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
يجب أن يظهر كل TextInputLayout على النحو التالي:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
الإنشاء والتشغيل:
يتم تعديل جميع الحقول النصية لاستخدام التصميمات الأحدث في MDC.
إضافة خطأ
تحتوي الحقول النصية الخاصة بـ MDC على عرض خطأ مضمَّن. يضيف MDC نصًا أحمر أسفل حقل النص ويعدّل زخارفه لتصبح حمراء أيضًا.
في ShippingInfoActivity.kt، عدِّل onCreate() للتحقّق من إدخال النص وضبط الأخطاء حسب الحاجة. يُفترض أن يبدو هذا على النحو التالي:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
البناء والتشغيل. اضغط على "حفظ"، ولكن اترك حقلاً نصيًا واحدًا على الأقل فارغًا:
الحقول النصية الفارغة باللون الأحمر وتحتها نص خطأ.
4. تعديل الزرّ
يتضمّن MDC أزرارًا تشمل ما يلي:
- تموجات حبر
- زوايا مستديرة
- إتاحة إمكانية التصنيف حسب الموضوع
- تصميم وأسلوب الخط رائعان
- مصمَّمة باستخدام AppCompatButton (فئة الأزرار العادية في Android) حتى تعرف كيفية استخدامها في الرمز البرمجي
اختياريًا، يمكنك استبدال فئة الزر.
بشكل افتراضي، تضخّم مكتبة المواد الأزرار العادية تلقائيًا إلى أزرار MDC. ومع ذلك، يمكنك بشكل اختياري استبدال جميع الإشارات إلى Button بـ MaterialButton بحيث يمكنك الوصول إلى طرق إضافية متاحة فقط في MaterialButton مثل تغيير نصف قطر الزاوية. أزرار MDC هي مكون بسيط للتوصيل والتشغيل. ما عليك سوى استبدال اسم مكوِّن XML Button بـ MaterialButton، وتطبيق نمط MaterialButton التلقائي على MaterialButton.
في shipping_info_activity.xml، يمكنك تغيير الزر من:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
إلى:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
الإنشاء والتشغيل:
5- إضافة بطاقة
MaterialCardView هو مكوِّن تم إنشاؤه على CardView مع:
- تصحيح الارتفاع والتصميم
- سمات عرض الخط واللون
التفاف المحتوى في بطاقة
أغلِق LinearLayout الذي يتضمّن المحتوى الخاص بك في "shipping_info_activity.xml" باستخدام المكوِّن MaterialCardView على النحو التالي:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
البناء والتشغيل. يجب أن يكون النموذج بأكمله ملفوفًا في بطاقة:
إنّ مكوِّن عرض بطاقة Material هو طريقة مألوفة وجديدة لتجميع المحتوى بسهولة في بطاقة.
6- ملخّص
لقد استبدلت بعض المكونات الشائعة لإظهار قيمة فورية: الحقول النصية والأزرار والبطاقات، ولم يكن عليك إجراء إعادة تصميم كاملة لتطبيقك. يمكن أن تحدث مكونات أخرى فرقًا كبيرًا أيضًا، مثل شريط التطبيق العلوي وتخطيط TabLayout.
الخطوات التالية
يمكنك استكشاف المزيد من المكونات في MDC-Android من خلال الانتقال إلى Android Widgets Catalog.