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/java. חשוב לעבור לספרייה הזו באמצעות הפקודה 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). עוברים לספרייה שבה התקנתם את קוד הדוגמה ובוחרים באפשרות java -> shipping (או מחפשים במחשב את shipping) כדי לפתוח את פרויקט המשלוח.
- מחכים כמה רגעים עד ש-Android Studio יבצע build ויסנכרן את הפרויקט, כפי שמצוין על ידי אינדיקטורים של פעילות לאורך החלק התחתון של חלון Android Studio.
- בשלב הזה, יכול להיות ש-Android Studio יציג שגיאות build כי חסר לכם Android SDK או כלי build, כמו השגיאה שמוצגת למטה. פועלים לפי ההוראות ב-Android Studio כדי להתקין או לעדכן את התוספים האלה ולסנכרן את הפרויקט.
ייבוא של MDC-Android
עוברים לקובץ build.gradle של המודול app ומוודאים שהבלוק dependencies כולל תלות ב-MDC Android:
api 'com.google.android.material:material:1.1.0-alpha06'
הפעלת אפליקציה לתחילת הדרך
|
|
הצלחת! האפליקציה והטופס שלה אמורים להופיע.
3. עדכון שדות הטקסט
שדות טקסט של Material Design משפרים משמעותית את נוחות השימוש בהשוואה לשדות טקסט רגילים. אם תגדירו את אזור הלחיצה באמצעות קו מתאר או מילוי רקע, הסיכוי שהמשתמשים יקיימו אינטראקציה עם הטופס או יזהו שדות טקסט בתוך תוכן מורכב יותר יהיה גבוה יותר.
החלפת סגנונות של שדות טקסט
ב-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.TextInputLayout
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.java, מעדכנים את השיטה onCreate() כך שתיראה כמו בדוגמה הבאה:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(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.