MDC-104 Android: רכיבי Material Advanced (Kotlin)

1. מבוא

רכיבי Material ‏ (MDC) עוזרים למפתחים להטמיע את Material Design. ‫MDC נוצרה על ידי צוות של מהנדסים ומעצבי UX ב-Google. היא כוללת עשרות רכיבי ממשק משתמש יפים ופונקציונליים, וזמינה ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop

ב-codelab‏ MDC-103, התאמתם אישית את הצבע, הגובה והטיפוגרפיה של רכיבי Material (MDC) כדי לעצב את האפליקציה.

רכיב במערכת Material Design מבצע קבוצה של משימות מוגדרות מראש ויש לו מאפיינים מסוימים, כמו כפתור. עם זאת, לחצן הוא לא רק דרך שבה משתמש יכול לבצע פעולה, אלא גם ביטוי חזותי של צורה, גודל וצבע שמאפשר למשתמש לדעת שמדובר באלמנט אינטראקטיבי, ושמשהו יקרה אם הוא ילחץ עליו או יקיש עליו.

ההנחיות של Material Design מתארות רכיבים מנקודת המבט של מעצב. הם מתארים מגוון רחב של פונקציות בסיסיות שזמינות בפלטפורמות שונות, וגם את הרכיבים האנטומיים שמרכיבים כל פונקציה. לדוגמה, תמונת רקע מכילה שכבה אחורית והתוכן שלה, שכבה קדמית והתוכן שלה, כללי תנועה ואפשרויות תצוגה. אפשר להתאים אישית כל אחד מהרכיבים האלה בהתאם לצרכים, לתרחישי השימוש ולתוכן של כל אפליקציה. החלקים האלה הם ברובם תצוגות, אמצעי בקרה ופונקציות מסורתיים מ-SDK של הפלטפורמה.

בהנחיות של Material Design מוזכרים רכיבים רבים, אבל לא כולם מתאימים לשימוש חוזר בקוד, ולכן לא נמצאים ב-MDC. אתם יכולים ליצור את החוויות האלה בעצמכם כדי להשיג סגנון מותאם אישית לאפליקציה שלכם, והכול באמצעות קוד רגיל.

מה תפַתחו

ב-Codelab הזה, תוסיפו רקע ל-Shrine. המוצרים שיוצגו בפריסה האסימטרית יסוננו לפי קטגוריה. תצטרכו להשתמש:

• צורה
• תנועה
• מחלקות Android SDK מסורתיות

זוהי סדנת ה-codelab האחרונה מתוך 4 סדנאות שמנחות אתכם בתהליך של בניית אפליקציה למוצר שנקרא Shrine. מומלץ לבצע את כל ה-codelabs לפי הסדר, כי הם מתקדמים במשימות שלב אחר שלב.ה-codelabs הקשורים נמצאים בכתובת: ‫MDC-101: יסודות של Material Components‏ (MDC) ‫MDC-102: מבנה ופריסה של Material Design. ‫MDC-103: Material Design Theming with Color, Shape, Elevation and Type

רכיבי MDC-Android ב-Codelab הזה

• צורה

מה תצטרכו

• ידע בסיסי בפיתוח ל-Android
• ‫Android Studio (אם עדיין לא הורדתם אותו, אפשר להוריד אותו כאן)
• אמולטור או מכשיר Android (זמינים דרך Android Studio)
• קוד לדוגמה (ראו השלב הבא)

מה רמת הניסיון שלך בפיתוח אפליקציות ל-Android?

מתחילים ביניים מומחים

2. הגדרת סביבת הפיתוח

ממשיכים מ-MDC-103?

אם השלמתם את MDC-103, הקוד שלכם אמור להיות מוכן ל-codelab הזה. אפשר לדלג לשלב 3.

מתחילים מאפס?

הורדת אפליקציית ה-codelab למתחילים

הורדת אפליקציה לתחילת הדרך

אפליקציה לתחילת הדרך נמצאת בספרייה material-components-android-codelabs-104-starter/kotlin. חשוב לעבור לספרייה הזו באמצעות הפקודה cd לפני שמתחילים.

...או לשכפל אותו מ-GitHub

כדי לשכפל את ה-codelab הזה מ-GitHub, מריצים את הפקודות הבאות:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 104-starter

לקבלת עזרה נוספת: שכפול מאגר מ-GitHub

טעינת קוד לתחילת הדרך ב-Android Studio

1. אחרי שאשף ההגדרה יסיים את הפעולה ויוצג החלון Welcome to Android Studio (ברוכים הבאים ל-Android Studio), לוחצים על Open an existing Android Studio project (פתיחת פרויקט קיים של Android Studio). עוברים לספרייה שבה התקנתם את קוד הדוגמה ובוחרים באפשרות kotlin -> shrine (או מחפשים במחשב את shrine) כדי לפתוח את פרויקט המשלוח.
2. מחכים כמה רגעים עד ש-Android Studio יבנה ויסנכרן את הפרויקט, כפי שמצוין על ידי אינדיקטורים של פעילות לאורך החלק התחתון של חלון Android Studio.
3. בשלב הזה, יכול להיות ש-Android Studio יציג שגיאות build כי חסר לכם Android SDK או כלי build, כמו השגיאה שמוצגת למטה. פועלים לפי ההוראות ב-Android Studio כדי להתקין או לעדכן את התוספים האלה ולסנכרן את הפרויקט.

הוספת יחסי תלות בפרויקט

הפרויקט צריך להיות תלוי בספריית התמיכה של MDC ב-Android. התלות הזו כבר אמורה להופיע בקוד לדוגמה שהורדתם, אבל מומלץ לבצע את השלבים הבאים כדי לוודא זאת.

1. עוברים לקובץ build.gradle של המודול app ומוודאים שהבלוק dependencies כולל תלות ב-MDC Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (אופציונלי) אם צריך, עורכים את הקובץ build.gradle כדי להוסיף את התלות הבאה ומסנכרנים את הפרויקט.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

הפעלת אפליקציה לתחילת הדרך

מוודאים שהגדרת ה-build שמשמאל ללחצן ההפעלה היא app. לוחצים על הלחצן הירוק Run / Play כדי ליצור ולהריץ את האפליקציה. בחלון Select Deployment Target (בחירת יעד הפריסה), אם כבר מופיע מכשיר Android ברשימת המכשירים הזמינים, מדלגים אל שלב 8. אם לא, לוחצים על יצירת מכשיר וירטואלי חדש. במסך Select Hardware (בחירת חומרה), בוחרים מכשיר טלפון, כמו Pixel 2, ואז לוחצים על Next (הבא). במסך System Image, בוחרים גרסה עדכנית של Android, רצוי את רמת ה-API הגבוהה ביותר. אם היא לא מותקנת, לוחצים על הקישור הורדה שמופיע ומשלימים את ההורדה. לוחצים על הבא. במסך Android Virtual Device (AVD) , משאירים את ההגדרות כמו שהן ולוחצים על Finish (סיום). בוחרים מכשיר Android מתיבת הדו-שיח של יעד הפריסה. לוחצים על אישור. ‫Android Studio בונה את האפליקציה, פורס אותה ופותח אותה באופן אוטומטי במכשיר היעד.

אם לא הצלחתם להוסיף את התלות או להפעיל את האפליקציה בהצלחה, עצרו את הפעולה ונסו לפתור את הבעיה בסביבת הפיתוח.

אם מתקבלת השגיאה INSTALL_FAILED_INVALID_APK במהלך ה-build, מנסים לבצע את הפעולות הבאות ב-Android Studio: ‏Build (יצירת build) > ‏Clean Project (ניקוי הפרויקט).

הצלחת! אפליקציית Shrine אמורה לפעול במכשיר.

3. הוספת תפריט הרקע

רקע הוא המשטח הכי אחורי של אפליקציה, שמופיע מאחורי כל התוכן והרכיבים האחרים. הוא מורכב משתי שכבות: שכבה אחורית (שבה מוצגות פעולות ומסננים) ושכבה קדמית (שבה מוצג התוכן). אפשר להשתמש ברקע כדי להציג מידע ופעולות אינטראקטיביים, כמו ניווט או מסנני תוכן.

הסתרת התוכן של הרשת

ב-shr_product_grid_fragment.xml, מוסיפים את המאפיין android:visibility="gone" ל-NestedScrollView כדי להסיר באופן זמני את תוכן המוצר:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

נציב רקע באזור הזה. כדי שלא יהיה קו הפרדה בין סרגל האפליקציות העליון לבין תוכן התפריט שמופיע ברקע, נגדיר את הרקע באותו צבע של סרגל האפליקציות העליון.

ב-shr_product_grid_fragment.xml, מוסיפים את הקוד הבא כרכיב הראשון בבסיס FrameLayout, לפני AppBarLayout:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

ב-styles.xml, מוסיפים את השורות הבאות:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

כל הכבוד! הוספת רקע יפה לממשק המשתמש של Shrine. לאחר מכן, נוסיף תפריט.

הוספת התפריט

תפריט הוא בעצם רשימה של לחצני טקסט. אנחנו נוסיף כאן אחד.

יוצרים קובץ פריסה חדש בשם shr_backdrop.xml בספרייה res -> layout ומוסיפים את הקוד הבא:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

מוסיפים את הרשימה אל LinearLayout שהוספתם זה עתה ב-shr_product_grid_fragment.xml באמצעות תג <include>:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

מבצעים build והרצה. מסך הבית אמור להיראות כך:

עכשיו הגדרנו את הרקע. בואו נחזיר את התוכן שהסתרנו קודם.

4. הוספת צורה

לפני שביצענו שינויים ב-Shrine ב-codelab הזה, תוכן המוצר הראשי היה ממוקם במשטח האחורי ביותר. הוספתם תמונת רקע, ועכשיו התוכן הזה מקבל יותר דגש כי הוא מופיע לפני תמונת הרקע.

הוספת שכבה חדשה

צריך להציג שוב את שכבת רשת המוצרים. צריך להסיר את המאפיין android:visibility="gone" מהNestedScrollView:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

נשנה את הסגנון של השכבה הקדמית כך שתהיה לה מגרעת בפינה הימנית העליונה. ב-Material Design, סוג ההתאמה האישית הזה נקרא צורה. משטחי Material יכולים להופיע בצורות שונות. צורות מוסיפות דגש וסגנון למשטחים, ואפשר להשתמש בהן כדי לבטא את המיתוג. לצורות של חומרים יכולות להיות פינות וקצוות מעוגלים או בזווית, וכל מספר של צדדים. הן יכולות להיות סימטריות או לא סדירות.

הוספת צורה

שינוי הצורה של תצוגת המשבצות. סיפקנו רקע עם צורה בהתאמה אישית, אבל הצורה מוצגת בצורה תקינה רק ב-Android Marshmallow ומעלה. אנחנו יכולים להגדיר את shr_product_grid_background_shape הרקע בNestedScrollView רק ב-Android Marshmallow ומעלה. קודם כול, מוסיפים id ל-NestedScrollView כדי שנוכל להתייחס אליו בקוד, באופן הבא:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

אחר כך מגדירים את הרקע באופן פרוגרמטי ב-ProductGridFragment.kt. מוסיפים את הלוגיקה הבאה להגדרת הרקע לסוף של onCreateView(), ממש לפני פקודת החזרה:

ProductGridFragment.kt

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}

לבסוף, נעדכן את משאב הצבע productGridBackgroundColor (שמשמש גם את הרקע של הצורה המותאמת אישית) באופן הבא:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

גרסת build והפעלה:

הוספנו ל-Shrine צורה מעוצבת בהתאמה אישית למשטח הראשי שלה. בגלל ההגבהה של השטח, המשתמשים יכולים לראות שיש משהו ממש מאחורי השכבה הלבנה הקדמית. נוסיף תנועה כדי שהמשתמשים יוכלו לראות מה יש שם: התפריט.

5. הוספת תנועה

אנימציה היא דרך להפיח חיים באפליקציה. התנועה יכולה להיות גדולה ודרמטית, עדינה ומינימלית, או כל דבר שביניהן. סוג התנועה שבו משתמשים צריך להתאים למצב. תנועה שמוחלת על פעולות רגילות שחוזרות על עצמן צריכה להיות קטנה ועדינה, כדי שלא תתפוס יותר מדי זמן באופן קבוע. במצבים אחרים, כמו בפעם הראשונה שמשתמש פותח אפליקציה, אפשר להציג מודעות שמושכות יותר את העין ועוזרות למשתמש ללמוד איך להשתמש באפליקציה.

הוספת אנימציית חשיפה ללחצן התפריט

התנועה היא של הצורה הקדמית, שזזה ישר למטה. כבר סיפקנו לכם מאזין קליקים שיבצע את אנימציית התרגום של הגיליון, ב-NavigationIconClickListener.kt. אפשר להגדיר את מאזין הקליקים הזה ב-ProductGridFragement של onCreateView(), בקטע שאחראי להגדרת סרגל הכלים. מוסיפים את השורה הבאה כדי להגדיר את מאזין הקליקים בסמל התפריט של סרגל הכלים:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

המקטע אמור להיראות כך:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

מבצעים build והרצה. לוחצים על כפתור התפריט:

לחיצה נוספת על סמל תפריט הניווט אמורה להסתיר אותו.

שינוי התנועה של השכבה הקדמית

תנועה היא דרך מצוינת לבטא את המותג שלכם. בואו נראה איך אנימציית החשיפה נראית כשמשתמשים בעקומת תזמון שונה.

מעדכנים את מאזין הלחיצות ב-ProductGridFragment.kt כדי להעביר את האובייקט Interpolator למאזין הלחיצות של סמל הניווט, באופן הבא:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))

זה יוצר אפקט שונה, נכון?

6. סמל ממותג

המיתוג של הסמלים כולל גם סמלים מוכרים. בואו נתאים אישית את סמל החשיפה ונמזג אותו עם הכותרת כדי ליצור מראה ייחודי וממותג.

שינוי הסמל של לחצן התפריט

משנים את לחצן התפריט כך שיוצג סמל שכולל עיצוב של יהלום. כדי שהסרגל יתאים יותר למפרטים של המעצב, צריך לעדכן את סרגל הכלים ב-shr_product_grid_fragment.xml כדי להשתמש בסמל ממותג חדש שסיפקנו לכם (shr_branded_menu), ולהגדיר את מאפייני app:contentInsetStart ו-android:padding:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

נעדכן שוב את click listener ב-onCreateView() ב-ProductGridFragment.kt כדי לקבל drawables עבור סרגל הכלים כשהתפריט פתוח וכשהוא סגור, באופן הבא:

ProductGridFragment .kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
       activity!!,
       view.product_grid,
       AccelerateDecelerateInterpolator(),
       ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
       ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon

גרסת build והפעלה:

איזה יופי! כשניתן לחשוף את הרקע, מוצג סמל התפריט בצורת יהלום. אם אפשר להסתיר את התפריט, מוצג במקומו סמל סגירה.

7. Recap

במהלך ארבעת ה-codelab האלה, ראיתם איך להשתמש ברכיבי Material כדי ליצור חוויות משתמש ייחודיות ואלגנטיות שמבטאות את האישיות והסגנון של המותג.

אפשר להוריד את אפליקציית MDC 104 המלאה מה-Codelab המוגמר, או להשתמש ב-git כדי לבדוק את 104-complete: git checkout 104-complete.

אתם יכולים לבדוק את גרסת האפליקציה שלכם מול האפליקציה בענף הזה.

השלבים הבאים

ה-Codelab הזה, MDC-104, משלים את רצף ה-Codelab הזה. אפשר לעיין ברכיבים נוספים ב-MDC-Android בקטלוג הרכיבים של MDC-Android.

כדי להפוך את ה-codelab הזה למאתגר יותר, אפשר לשנות את אפליקציית Shrine כך שתמונות המוצרים שמוצגות ישתנו כשבוחרים קטגוריה בתפריט הרקע.

כדי ללמוד איך לחבר את האפליקציה הזו ל-Firebase כדי ליצור קצה עורפי פעיל, אפשר לעיין ב-Firebase Android Codelab.

הצלחתי להשלים את ה-codelab הזה בזמן סביר ובמאמץ סביר

נכון מאוד נכון אין לי דעה לכאן או לכאן לא נכון לא נכון בכלל

אני רוצה להמשיך להשתמש ב-Material Components בעתיד

נכון מאוד נכון אין לי דעה לכאן או לכאן לא נכון לא נכון בכלל