MDC-104 Android: רכיבים מתקדמים לחומר (Java)

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

ב-codelab MDC-103, התאמת אישית את הצבע, הגובה והטיפוגרפיה של רכיבי החומר (MDC) כדי לסגנן את האפליקציה שלך.

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

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

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

מה תיצור

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

• צורה
• תנועה
• שיעורי SDK רגילים ל-Android

זו אחת מ-4 שיעורי הקוד האחרונות שמנחות אתכם בבניית אפליקציה למוצר בשם Shrine. מומלץ לבצע את כל פעולות שיעור ה-Lab לפי הסדר, תוך כדי התקדמות במשימות המפורטות. ניתן למצוא את שיעורי Lab הקשורים ב: MDC-101: יסודות הרכיב (MDC) MDC-102: מבנה ופריסה של עיצוב חדשני תלת-ממדי. MDC-103: נושאים של עיצוב חדשני תלת-ממדי עם צבע, צורה, גובה וסוג

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

• צורה

מה צריך?

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

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

מתחילים מתחילים בקיאים

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

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

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

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

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

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

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

כדי לשכפל את קוד Lab זה מ-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. אחרי שאשף ההגדרה יסתיים והחלון ברוכים הבאים אל Android Studio מוצג, לוחצים על פתיחת פרויקט Android Studio קיים. עוברים אל הספרייה שבה התקנתם את הקוד לדוגמה ובוחרים באפשרות JavaScript &> מקדש (או מחפשים במחשב את המקדש) כדי לפתוח את פרויקט המקדש.
2. ממתינים רגע עד ש-Android Studio יבנה את הפרויקט ויסנכרן אותו, כפי שמוצג בחלק התחתון של חלון Android Studio.
3. בשלב זה, Android Studio עשוי להעלות מספר שגיאות build כי חסר לך ה-SDK של Android או כלי פיתוח כמו זה שמוצג בהמשך. יש לפעול לפי ההוראות ב-Android Studio כדי להתקין/לעדכן את הפרויקטים האלה ולסנכרן את הפרויקט.

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

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

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. לוחצים על הלחצן 'הפעלה/הפעלה' הירוק כדי לבנות ולהפעיל את האפליקציה. בחלון בחר יעד פריסה, אם כבר יש לך מכשיר Android רשום במכשירים הזמינים שלך, דלג לשלב 8. אחרת, לוחצים על יצירת מכשיר וירטואלי חדש. במסך בחירת חומרה, בוחרים מכשיר טלפון, כמו Pixel 2, ואז לוחצים על הבא. במסך תמונת מערכת, בוחרים גרסת Android עדכנית, עדיף ברמת ה-API הגבוהה ביותר. אם היא לא מותקנת, לוחצים על הקישור הורדה שמוצג ומשלימים את ההורדה. לוחצים על Next. במסך מכשיר וירטואלי של Android (AVD), משאירים את ההגדרות כפי שהן ולוחצים על סיום. בתיבת הדו-שיח של יעד הפריסה, בוחרים מכשיר Android. לוחצים על אישור. Android Studio בונה את האפליקציה, פורס אותה ופותחים אותה באופן אוטומטי במכשיר היעד.

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

אם מוצגת לכם הודעת השגיאה INSTALL_FAILED_INVALID_APK במהלך הבנייה, נסו להגדיר 'Build' -> ‘Clean Project' ב-Android Studio.

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

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

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

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

shr_product_grid_snippet.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_snippet.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>

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

הוספת התפריט

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

יש ליצור פריסה חדשה בשם 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_snippet.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>

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

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

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

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

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

shr_product_grid_snippet.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">

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

הוספת צורה

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

shr_product_grid_snippet.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.JavaScript

// 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>

בנייה והפעלה:

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

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

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

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

ProductGridFragment.JavaScript

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

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

ProductGridFragment.JavaScript

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)));
}

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

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

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

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

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

ProductGridFragment.JavaScript

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_snippet.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" />

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

ProductGridFragment.JavaScript

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
}

בנייה והפעלה:

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

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

אפליקציית MDC 104 המלאה זמינה על ידי הורדת מעבדת הקוד הסופית או על ידי השלמת 104 של תהליך ההתקנה של Gmail: git checkout 104-complete.

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

מה אפשר לעשות?

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

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

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

הצלחתי להשלים את שיעור הקוד הזה בזמן סביר ובמאמץ מספיק

נכונה מאוד נכונה ניטרלית לא נכונה במידה רבה

אני רוצה להמשיך להשתמש ברכיבי החומר בעתיד

נכונה מאוד נכונה ניטרלית לא נכונה לא נכונה במידה רבה