1. מבוא
רכיבי Material (MDC) עוזרים למפתחים להטמיע את Material Design. MDC נוצרה על ידי צוות של מהנדסים ומעצבי UX ב-Google. היא כוללת עשרות רכיבי ממשק משתמש יפים ופונקציונליים, וזמינה ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop |
Material Components for Android (MDC Android) הוא לא מערכת או מסגרת חדשה שדורשת שינוי פרדיגמה באפליקציה. 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
- אחרי שאשף ההגדרה יסיים את הפעולה ויוצג החלון Welcome to Android Studio (ברוכים הבאים ל-Android Studio), לוחצים על Open an existing Android Studio project (פתיחת פרויקט קיים של Android Studio). עוברים אל הספרייה שבה התקנתם את קוד הדוגמה ובוחרים באפשרות kotlin -> shipping (או מחפשים במחשב את shipping) כדי לפתוח את פרויקט המשלוח.
- מחכים כמה רגעים עד ש-Android Studio יבנה ויסנכרן את הפרויקט, כפי שמצוין על ידי אינדיקטורים של פעילות לאורך החלק התחתון של חלון Android Studio.
- בשלב הזה, יכול להיות ש-Android Studio יציג שגיאות build כי חסר לכם Android SDK או כלי build, כמו השגיאה שמוצגת למטה. פועלים לפי ההוראות ב-Android Studio כדי להתקין או לעדכן את התוספים האלה ולסנכרן את הפרויקט.
הפעלת אפליקציה לתחילת הדרך
|
|
הצלחת! האפליקציה והטופס שלה אמורים להופיע.
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>
גרסת build והפעלה:
כל שדות הטקסט מעודכנים כך שישתמשו בעיצובים החדשים יותר ב-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!
}
}
}
מבצעים build והרצה. לוחצים על SAVE (שמירה), אבל משאירים לפחות שדה טקסט אחד ריק:
שדות הטקסט הריקים יהיו אדומים ויופיע מתחתם טקסט שגיאה.
4. עדכון הכפתור
ב-MDC יש לחצנים עם:
- גלים של דיו
- פינות מעוגלות
- תמיכה בבחירת עיצוב
- פריסה וטיפוגרפיה מושלמות
- הלחצנים מבוססים על AppCompatButton (מחלקת הלחצנים הרגילה של Android), כך שאתם יודעים איך להשתמש בהם בקוד.
אופציונלי: החלפת סוג הכפתור
כברירת מחדל, ספריות Material מרחיבות אוטומטית לחצנים רגילים ללחצני MDC. אבל אפשר להחליף את כל ההפניות ל-Button ב-MaterialButton כדי לקבל גישה לשיטות נוספות שזמינות רק ב-MaterialButton, כמו שינוי רדיוס הפינות. רכיבי MDC Buttons הם רכיבים פשוטים שמוכנים לשימוש מיידי. פשוט מחליפים את שם רכיב ה-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" />
גרסת build והפעלה:
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>
מבצעים build והרצה. הטופס כולו צריך להיות בתוך כרטיס:
רכיב Material Card View הוא דרך מוכרת אבל חדשה לעטוף בקלות את התוכן שלכם בכרטיס.
6. Recap
החלפתם כמה רכיבים נפוצים כדי להציג ערך מיידי: שדות טקסט, לחצנים, כרטיסים, ולא הייתם צריכים לעצב מחדש את כל האפליקציה. גם רכיבים אחרים יכולים לעשות הבדל גדול, כמו סרגל האפליקציה העליון ו-TabLayout.
השלבים הבאים
אפשר לעיין ברכיבים נוספים ב-MDC-Android בקטלוג הווידג'טים של Android.