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

MDC-103 Android: עיצוב חומרים עם צבע, גובה וסוג (Kotlin)

1. מבוא

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

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

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

מה תפַתחו

ב-Codelab הזה תתאימו אישית את Shrine כך שישקף את המותג שלו באמצעות:

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

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

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

מה צריך להכין

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

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

מתחילים

בינוניים

מומחים

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

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

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

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

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

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

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

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

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

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

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

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

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

3. שינוי הצבע

ערכת הצבעים הזו נוצרה על ידי מעצב עם צבעים מותאמים אישית (מוצגת בתמונה שבהמשך). יש בו צבעים שנבחרו מהמותג של Shrine והוחלו על Material Theme Editor, שהרחיבה אותם ליצירת צבעים מלאים יותר. (הצבעים האלה לא מופיעים בלוחות הצבעים של Material מ-2014).

הכלי Material Theme Editor ארגן אותם בגוונים לפי מספר, כולל תוויות 50, 100, 200, .... עד 900 מכל צבע. ב-Shrine נעשה שימוש רק בגוונים 50,‏ 100 ו-300 מהלוח הצבעים ורוד ובגוון 900 מהלוח הצבעים חום.

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi-nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJg0LPjkXWEVlV7cwS0U1naqpnHToEIQ 1HLdzGp-TIhg2ULijquMw_KQdk18b080CVQN_oECAhiCnFI11Nm3nbcsCIXvZBXULMajAW9NEmGZ7iR_j-eEF6NiODuaike96xVpLwUIzfV4dzTg9uQHsmNG-BDTOd04e6_eRLs--Q

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

הגדרת 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>

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

shr_login_fragment.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_fragment.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. קובץ ה-drawable אמור להיראות כך:

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

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

4. שינוי סגנונות הגופן והתוויות

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

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

מעצבים את מראה הטקסט בסרגל האפליקציות העליון כך שיתאים למפרט שסיפק המעצב. צריך להוסיף את הסגנון הבא של מראה הטקסט ל-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_fragment.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" />

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

5. שינוי הגובה

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

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

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

shr_product_grid_fragment.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 מגדירה את הלחצן 'הבא' לשימוש באנימציה שסיפקנו.

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

6. שינוי הפריסה

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

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

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

כדי להשתמש במתאם החדש הזה, צריך לשנות את השיטה onCreateView() בקובץ ProductGridFragment.kt. מחליפים את בלוק הקוד אחרי התגובה 'set up the 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_fragment.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. משנים את ה-method getItemOffsets() של ProductGridItemDecoration.kt באופן הבא:

ProductGridItemDecoration.kt

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

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

7. אני רוצה לנסות נושא אחר

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

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

ב-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.

8. Recap

עד עכשיו יצרתם אפליקציה שדומה למפרטי העיצוב של המעצב/ת.

השלבים הבאים

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

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

הצלחתי להשלים את ה-Codelab הזה תוך השקעה של זמן ומאמץ סבירים

נכון מאוד

נכון

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

לא נכון

לא נכון בכלל

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

נכון מאוד

נכון

ניטרלי

לא נכון

לא נכון בכלל

MDC-103 Android: עיצוב חומרים עם צבע, גובה וסוג (Kotlin)

1. מבוא

מה תפַתחו

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

מה צריך להכין

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

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

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

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

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

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

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

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

3. שינוי הצבע

הגדרת colorPrimaryDark ו-colorAccent

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

עיצוב הצבעים של הלחצנים

4. שינוי סגנונות הגופן והתוויות

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

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

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

5. שינוי הגובה

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

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

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

6. שינוי הפריסה

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

7. אני רוצה לנסות נושא אחר

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

8. Recap

השלבים הבאים

הצלחתי להשלים את ה-Codelab הזה תוך השקעה של זמן ומאמץ סבירים

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