1. מבוא
Material Components (MDC) עוזר למפתחים להטמיע Material Design. MDC נוצר על ידי צוות של מהנדסים ומעצבי חוויית המשתמש ב-Google, שכולל עשרות רכיבים יפים ופונקציונליים של ממשק המשתמש. זמין ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
Material Elements ל-Android (MDC Android) היא לא מערכת או framework חדשים שמחייבים שינוי פרדיגמה באפליקציה. MDC Android מבוסס על אותם המחלקות וממשקי ה-API שאתם כבר מכירים ב-Android, כמו לחצני AppCompat ושדות טקסט. אפשר להשתמש ברכיבים שמסופקים על ידי MDC Android לפי הצורך ולשפר באופן מיידי את העיצוב של האפליקציה הקיימת.
מה תפַתחו
ב-Codelab הזה מחליפים חלק מהרכיבים הקיימים בצורה ברכיבים חדשים על ידי MDC.
רכיבי MDC-Android ב-Codelab הזה
- שדות טקסט
- לחצנים
- תפריטים
מה צריך להכין
- ידע בסיסי בפיתוח Android
- Android Studio (אפשר להוריד אותו כאן אם עדיין אין לך אותו)
- אמולטור או מכשיר של Android (האפשרות זמינה ב-Android Studio)
- הקוד לדוגמה (מידע נוסף מופיע בשלב הבא)
איזה דירוג מגיע לדעתך לרמת הניסיון שלך בפיתוח אפליקציות ל-Android?
2. הגדרת סביבת הפיתוח
להורדת האפליקציה לתחילת פעולה של Codelab
האפליקציה לתחילת הפעולה נמצאת בספרייה material-components-android-codelabs-111-starter/kotlin. חשוב להקליד cd בספרייה הזו לפני שמתחילים.
...או לשכפל אותו מ-GitHub
כדי לשכפל את ה-Codelab הזה מ-GitHub, מריצים את הפקודות הבאות:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
טוענים את הקוד לתחילת הפעולה ב-Android Studio
- כשאשף ההגדרה יסתיים ובחלון ברוכים הבאים אל Android Studio, לוחצים על פתיחת פרויקט קיים של Android Studio. מנווטים לספרייה שבה התקנתם את הקוד לדוגמה ובוחרים באפשרות kotlin -> משלוח (או לחפש במחשב את המילה shipping) כדי לפתוח את פרויקט המשלוח.
- ממתינים רגע עד שמערכת Android Studio תסיים לבנות ולסנכרן את הפרויקט, כפי שמוצג באינדיקטורים של הפעילות בחלק התחתון של החלון של Android Studio.
- בשלב הזה, ייתכן שיוצגו ב-Android Studio חלק משגיאות ה-build כי ה-SDK של Android או כלי ה-build חסרים לכם, כמו זה שמוצג למטה. כדי להתקין או לעדכן אותם ולסנכרן את הפרויקט, פועלים לפי ההוראות ב-Android Studio.
הפעלת אפליקציה לתחילת פעולה
|
|
הצלחת! אמורים לראות את האפליקציה ואת הצורה שלה.
3. עדכון שדות הטקסט
לשדות טקסט בעיצוב חדשני יש יתרונות משמעותיים בהשוואה לשדות טקסט פשוטים. הגדרת אזור ההיט עם קו מתאר או מילוי רקע מגדילה את הסיכוי שמשתמשים יקיימו אינטראקציה עם הטופס או יזהו שדות טקסט בתוכן מורכב יותר.
ייבוא מ-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!
}
}
}
בנייה והפעלה. לוחצים על SAVE (שמירה), ומשאירים לפחות שדה טקסט אחד ריק:
שדות הטקסט הריקים הם אדומים ומתחתם יש טקסט שגיאה.
4. עדכון הלחצן
ב-MDC יש לחצנים עם:
- גלי דיו
- פינות מעוגלות
- תמיכה בנושא בחירת נושאים
- פריסה וטיפוגרפיה מושלמות
- מובנה על AppCompatButton (כיתת הלחצנים הרגילים של Android) כדי שתדעו איך להשתמש בהם בקוד שלכם.
אופציונלי: החלפה של סיווג לחצנים
כברירת מחדל, ספריית Material מגדילה באופן אוטומטי לחצנים רגילים ללחצני MDC. עם זאת, תוכלו להחליף את כל ההפניות ל'לחצן' ב'לחצן חומר' כדי לגשת לשיטות נוספות הזמינות ב'לחצן חומר', למשל שינוי רדיוס הפינות. לחצני 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>
בנייה והפעלה. צריך לכווץ את הטופס כולו לכרטיס:
הרכיב 'תצוגת כרטיסי מוצר' הוא דרך מוכרת וחדשה לאריזה של התוכן בכרטיס.
6. Recap
החלפת כמה רכיבים נפוצים כדי להציג ערך מיידי: שדות טקסט, לחצנים, כרטיסים, ולא היה צורך לעצב מחדש את האפליקציה. גם רכיבים אחרים יכולים להשפיע מאוד, כמו סרגל האפליקציות העליון ופריסת Tab.
השלבים הבאים
אפשר לראות עוד רכיבים ב-MDC-Android ב-Android Widgets Catalog.