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

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

לוגו_components_color_2x_web_96dp.png

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

material.io/develop

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

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

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

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

מה תיצור

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

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

רכיבי 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

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

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

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

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

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

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

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

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

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

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

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

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

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

נכונה מאוד

נכונה

ניטרלית

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

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

נכונה מאוד

נכונה

ניטרלית

לא נכונה

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

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

מה תיצור

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

מה צריך?

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

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

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

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

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

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

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

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

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

shr_product_grid_snippet.xml

shr_product_grid_snippet.xml

styles.xml

הוספת התפריט

shr_backdrop.xml

shr_product_grid_snippet.xml

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

shr_product_grid_snippet.xml

הוספת צורה

shr_product_grid_snippet.xml

ProductGridFragment.JavaScript

colors.xml

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

ProductGridFragment.JavaScript

ProductGridFragment.JavaScript

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

ProductGridFragment.JavaScript

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

shr_product_grid_snippet.xml

ProductGridFragment.JavaScript

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

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

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

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

מה תיצור

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

מה צריך?

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

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

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

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

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

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

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

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

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

הוספת התפריט

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

הוספת צורה

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

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

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

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

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

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

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