דף זה תורגם על ידי Cloud Translation API.

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

רכיבי 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 מסורתיות

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

צורה

מה צריך להכין

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

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

מתחילים

ביניים

מומחים

המשך מ-MDC-103?

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

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

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

הורדת אפליקציית Starter

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

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

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

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

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

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

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

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

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

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

(אופציונלי) אם צריך, עורכים את הקובץ 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 בונה את האפליקציה, פורס אותה ופותח אותה באופן אוטומטי במכשיר היעד.

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

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

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

ב-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 והרצה. מסך הבית אמור להיראות כך:

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

לפני שביצענו שינויים ב-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.java. מוסיפים את הלוגיקה הבאה כדי להגדיר את הרקע לסוף של onCreateView(), ממש לפני הצהרת ההחזרה:

ProductGridFragment.java

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}

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

colors.xml

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

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

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

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

התנועה היא של הצורה הקדמית, שזזה ישר למטה. כבר סיפקנו לכם מאזין קליקים שיבצע את אנימציית התרגום של הגיליון, ב-NavigationIconClickListener.java. אפשר להגדיר את מאזין הקליקים הזה בתוך השיטה setupToolbar() של ProductGridFragment.java:

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

השיטה setUpToolbar() אמורה להיראות עכשיו כך:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}

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

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

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

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

מעדכנים את הקוד ב-setupToolbar() ב-ProductGridFragment.java כדי להעביר Interpolator ל-click listener של סמל הניווט, באופן הבא:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator()));
}

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

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

משנים את לחצן התפריט כך שיוצג סמל שכולל עיצוב של יהלום. אפשר לעדכן את סרגל הכלים ב-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 ב-setupToolbar() ב-ProductGridFragment.java כדי להוסיף drawables לסרגל הכלים כשהתפריט פתוח וכשהוא סגור, באופן הבא:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator(),
           getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
           getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}

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

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

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

השלבים הבאים

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

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

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

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

נכון מאוד

נכון

אין לי דעה לכאן או לכאן

לא נכון

לא נכון בכלל

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

נכון מאוד

נכון

אין לי דעה לכאן או לכאן

לא נכון

לא נכון בכלל

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

מה תפַתחו

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

מה צריך להכין

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

המשך מ-MDC-103?

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

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

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

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

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

הפעלת אפליקציית המתחילים

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

shr_product_grid_fragment.xml

shr_product_grid_fragment.xml

styles.xml

הוספת התפריט

shr_backdrop.xml

shr_product_grid_fragment.xml

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

shr_product_grid_fragment.xml

הוספת צורה

shr_product_grid_fragment.xml

ProductGridFragment.java

colors.xml

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

ProductGridFragment.java

ProductGridFragment.java

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

ProductGridFragment.java

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

shr_product_grid_fragment.xml

ProductGridFragment.java

השלבים הבאים

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

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

MDC-104 Android: רכיבי Material Advanced (Java) קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

מה תפַתחו

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

מה צריך להכין

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

המשך מ-MDC-103?

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

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

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

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

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

הפעלת אפליקציית המתחילים

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

הוספת התפריט

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

הוספת צורה

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

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

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

השלבים הבאים

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

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

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