Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

MDC-103 Android: עיצוב חומר, צבע וגובה (קוטלין)

לוגו_components_color_2x_web_96dp.png

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

material.io/develop

ב-Codelabs MDC-101 ו-MDC-102, השתמשתם ב-Material Components (MDC) כדי לבנות את היסודות של אפליקציה שנקראת Shrine, אפליקציית מסחר אלקטרוני שבה נמכרים בגדים ומוצרים לבית. באפליקציה הזו יש תהליך עבודה שמתחיל במסך התחברות ומעביר את המשתמש למסך הבית שמציג מוצרים.

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

מה תיצור

בשיעור Lab זה תבצעו התאמה אישית של המקדש כך שישקף את המותג שלו באמצעות:

צבע
טיפוגרפיה
גובה
פריסה

רכיבים ומערכות הפעלה של MDC ל-Android המשמשים ב-codelab זה:

עיצובים
טיפוגרפיה
גובה

מה צריך?

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

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

מתחילים

בקיאים

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

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

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

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

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

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

כדי לשכפל את קוד Lab זה מ-GitHub, יש להריץ את הפקודות הבאות:

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

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

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

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

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

עיצוב הצבעים הזה נוצר על ידי מעצב עם צבעים מותאמים אישית (מוצגים בתמונה למטה). יש בו צבעים שנבחרו מהמותג Shrine' והוחלו על עורך העיצוב של העיצוב, שהרחיב אותו כדי ליצור לוח צבעים מלא יותר. (הצבעים האלה אינם מגיעים מלוחות הצבעים של החומר 2014).

הכלי לעריכת העיצובים של Google מאפשר לארגן אותם בגוונים מסומנים בתווית, כולל תוויות 50, 100, 200 ו-9...0 לכל צבע. המקדש משתמש בגוונים 50, 100 ו-300 בלבד מהשעון הוורוד וב-900 מהשעון החום.

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

הגדרת colorPrimarydark ו-colorAccent

ב-colors.xml, משנים את השורות הבאות. המאפיין colorAccent מציין את הצבע של שורת האפליקציות העליונה, בין היתר, והמאפיין colorPrimaryDark קובע את הצבע של שורת הסטטוס.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

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

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

<resources xmlns:tools="http://schemas.android.com/tools">

ה-colors.xml וה-styles.xml אמורים להיראות כך:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

במדיניות colors.xml, מוסיפים משאב צבע חדש מסוג textColorPrimary שמוגדר ל-#442C2E, ומעדכנים את המאפיין toolbarIconColor כך שיפנה לצבע textColorPrimary.

יש לעדכן את קובץ ה-styles.xml כדי להגדיר את

מאפיין לצבע textColorPrimary שהגדרנו עכשיו.

דבר אחד נוסף: יש להגדיר את המאפיין android:theme בסגנון Widget.Shrine.Toolbar כ-Theme.Shrine.

ה-colors.xml וה-styles.xml אמורים להיראות כך:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

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

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

עיצוב של שדות טקסט

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

עליך להוסיף את משאב הצבעים הבא לקובץ colors.xml שלך:

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

אפשר להוסיף שני סגנונות חדשים בstyles.xml.

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

לבסוף, מגדירים את מאפיין הסגנון ב-שני רכיבי TextInputLayout ה-XML שב-shr_login_fragment.xml לסגנון החדש:

shr_login_snippet.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

עיצוב הסגנון של הלחצן

לבסוף, מעצבים את צבעי הלחצנים בדף ההתחברות. הוספת הסגנונות הבאים ל-styles.xml שלך:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

הסגנון Widget.Shrine.Button מתרחב מסגנון ברירת המחדל של MaterialButton ומשנים את צבע הטקסט ואת הגוון של הרקע של הלחצן. Widget.Shrine.Button.TextButton מתרחב לסגנון ברירת המחדל של הטקסט MaterialButton, ומשנים רק את צבע הטקסט.

הגדר את הסגנון Widget.Shrine.Button בלחצן 'הבא' ואת הסגנון Widget.Shrine.Button.TextButton בלחצן 'ביטול', באופן הבא:

shr_login_snippet.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

מעדכנים את הצבע של לוגו המקדש בדף ההתחברות. יהיה צורך בשינוי קטן בשרטוט - וקטור - shr_logo.xml. פותחים את הקובץ שאפשר לצייר ומשנים את המאפיין android:fillAlpha ל-1. ניתן לשרטט את התמונה כך:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

לאחר מכן, מגדירים את המאפיין android:tint בלוגו<ImageView> ב-shr_login_fragment.xml כך: ?android:attr/textColorPrimary:

shr_login_snippet.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

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

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

עיצוב הסגנון של סרגל האפליקציות העליון

מעצבים את מראה סרגל האפליקציות המוביל כך שיתאים למפרט שעיצב המעצב. עליך להוסיף את הסגנון הבא של מראה הטקסט ל-styles.xml, ולהגדיר את המאפיין titleTextAppearance כך שיפנה לסגנון הזה בסגנון Widget.Shrine.Toolbar.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

ה-colors.xml וה-styles.xml אמורים להיראות כך:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

עיצוב התוויות

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

אפשר לעדכן את הטיפוגרפיה של שם התווית מ-textAppearanceHeadline6 ל-textAppearanceSubtitle2:

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

כדי למרכז את תוויות התמונות, יש לשנות את התווית <TextView> ב-shr_product_card.xml כדי להגדיר את המאפיין android:textAlignment="center":

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

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

עכשיו צריך לשנות את הטיפוגרפיה של מסך ההתחברות.

ב-styles.xml, מוסיפים את הסגנון הבא:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

ב-shr_login_fragment.xml, הגדירו את הסגנון החדש של ה-"SHRINE" יש להזין את הכותרת <TextView> (ומחקו את מאפייני ה-textAllCaps וה-textSize שקיימים):

shr_login_snippet.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

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

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

שינוי גובה של רשת מוצרים

כדי להיראות כאילו התוכן נמצא בגיליון צף מעל סרגל האפליקציות העליון, יש לשנות את הגבהים של סרגל האפליקציה העליון. יש להוסיף את המאפיין app:elevation למאפיין AppBarLayout ולמאפיין android:elevation לרכיבי XML של shr_product_grid_fragment.xml באופן הבא:

shr_product_grid_snippet.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<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:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

שינוי גובה הכרטיס (וצבע)

כדי לשנות את גובה כל כרטיס, יש לשנות את app:cardElevation ב-shr_product_card.xml מ-2dp ל-0dp. משנים גם את app:cardBackgroundColor ל@android:color/transparent.

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

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

שינוי הגובה של הלחצן 'הבא'

בstyles.xml, מוסיפים את הנכס הבא לסגנון Widget.Shrine.Button:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

הגדרת android:stateListAnimator בסגנון Button' מגדירה את הלחצן 'הבא' כדי להשתמש באנימטור שמסרנו.

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

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

שימוש במתאם RecyclerView משולב

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

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

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

כמו כן, נצטרך לבצע שינוי קטן ב-shr_product_grid_fragment.xml כדי להסיר את המרווח הפנימי מה-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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

לסיום, נשנה את המרווח הפנימי של הכרטיס ב-RecyclerView על ידי שינוי של ProductGridItemDecoration.kt. כך משנים את השיטה getItemOffsets() של ProductGridItemDecoration.kt:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

בונים ומפעילים. עכשיו צריך לזעזע את הפריטים ברשת המוצרים:

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

שינוי סגנונות וצבעים

באפליקציה styles.xml, מוסיפים את העיצוב החדש הבא:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

בעוד AndroidManifest.xml, השתמש בעיצוב החדש הזה באפליקציה שלך:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

שינוי הצבע של סמל סרגל הכלים ב-colors.xml כפי שמוצג בהמשך:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

לאחר מכן, יש להגדיר את המאפיין android:theme של סגנון סרגל הכלים כדי להפנות אל העיצוב הנוכחי באמצעות המאפיין "?theme" , במקום להשתמש בקידוד קשיח:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

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

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

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

יש להחזיר את הקוד בחלק הזה לפני המעבר ל-MDC-104.

בשלב זה, יצרת אפליקציה שדומה למפרטי העיצוב מהמעצב שלך.

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

השתמשת ברכיבי ה-MDC הבאים: עיצוב, טיפוגרפיה וגובה. תוכלו לעיין ברכיבים ובמערכות משנה נוספים [בספריית האינטרנט של MDC].

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

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

נכונה מאוד

נכונה

ניטרלית

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

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

נכונה מאוד

נכונה

ניטרלית

לא נכונה

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

MDC-103 Android: עיצוב חומר, צבע וגובה (קוטלין)

מה תיצור

רכיבים ומערכות הפעלה של MDC ל-Android המשמשים ב-codelab זה:

מה צריך?

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

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

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

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

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

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

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

הגדרת colorPrimarydark ו-colorAccent

עיצוב של שדות טקסט

עיצוב הסגנון של הלחצן

עיצוב הסגנון של סרגל האפליקציות העליון

עיצוב התוויות

שינוי הגופן של מסך ההתחברות

שינוי גובה של רשת מוצרים

שינוי גובה הכרטיס (וצבע)

שינוי הגובה של הלחצן 'הבא'

שימוש במתאם RecyclerView משולב

שינוי סגנונות וצבעים

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

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

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