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

רוצה לנסות את שיטת הכתיבה?

'Jetpack פיתוח נייטיב' היא ערכת הכלים המומלצת לממשק המשתמש ל-Android. כאן מוסבר איך עובדים איתם בנושא 'כתיבה'.

עיצוב מערכות בכתיבה ←

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

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

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

הסגנונות והעיצובים מוצהרים בהצהרה style resource file ב- res/values/, בדרך כלל בשם styles.xml.

איור 1. שני נושאים הוחלו על אותה פעילות: Theme.AppCompat (בצד שמאל) ו-Theme.AppCompat.Light (ימין).

עיצובים לעומת סגנונות

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

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

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

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

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

יצירת סגנון והחלתו

כדי ליצור סגנון חדש, פותחים את הקובץ res/values/styles.xml של הפרויקט. עבור כדי ליצור כל סגנון, מבצעים את השלבים הבאים:

1. צריך להוסיף רכיב <style> עם שם שמזהה את הסגנון באופן ייחודי.
2. מוסיפים רכיב <item> לכל מאפיין סגנון שרוצים להגדיר. name בכל פריט מציין מאפיין שאחרת משמש כמאפיין XML הפריסה שלו. הערך ברכיב <item> הוא הערך של המאפיין הזה.

לדוגמה, נניח שמגדירים את הסגנון הבא:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

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

<TextView
    style="@style/GreenText"
    ... />

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

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

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

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

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

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

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

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

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

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

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

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

כדי לבדוק על אילו מאפיינים אפשר להצהיר בעזרת תג <item>, עיינו במאמר 'XML' "מאפיינים" בהפניות השונות למחלקות. תמיכה בכל הצפיות מאפייני XML מהבסיס View כיתה, ולתצוגות רבות יש מאפיינים מיוחדים משלהן. לדוגמה, TextView מאפייני XML כוללים את android:inputType שאפשר להחיל על תצוגת טקסט שמקבלת קלט, כמו הווידג'ט EditText.

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

אפשר ליצור עיצוב באותו אופן שבו יוצרים סגנונות. ההבדל הוא באופן שבו מיישמים אותה: במקום להחיל סגנון עם המאפיין style בתצוגה, צריך להחיל עיצוב עם המאפיין android:theme בתג <application> או תג <activity> בקובץ AndroidManifest.xml.

לדוגמה, כך מחילים את העיצוב Material Design של ספריית התמיכה ב-Android – כהה עיצוב ל את כל האפליקציה:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

הנה הדרך להחיל את ה"אור" נושא לפעילות אחת בלבד:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

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

החל מ-Android 5.0 (רמת API 21) ו-Android Support Library גרסה 22.1, ניתן גם לציין המאפיין android:theme לתצוגה בקובץ הפריסה. הפעולה הזו תשנה את העיצוב של את התצוגה הזו ואת כל תצוגות הצאצא, שמועילות לשינוי לוחות צבעים של עיצובים לחלק מהממשק שלך.

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

היררכיית סגנונות

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

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

1. החלת עיצוב ברמת התווים או הפסקה באמצעות טקסט על פני TextView הסוגים.
2. החלת מאפיינים באופן פרוגרמטי.
3. החלת מאפיינים בודדים ישירות על תצוגה מפורטת.
4. החלת סגנון על תצוגה מפורטת.
5. עיצוב ברירת המחדל.
6. החלת עיצוב על אוסף של תצוגות, פעילות או האפליקציה כולה.
7. החלת סגנון מסוים לתצוגה ספציפית, כמו הגדרת TextAppearance על TextView.

איור 2. עיצוב מ-span מבטל את הסגנון מ- textAppearance.

מראה הטקסט

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

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

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

TextAppearance תומך בקבוצת משנה של מאפייני עיצוב שTextView מבצעים. לרשימת המאפיינים המלאה: TextAppearance

דוגמאות למאפייני TextView נפוצים שלא נכללים: lineHeight[Multiplier|Extra], lines, breakStrategy, hyphenationFrequency. TextAppearance פועל ברמת התווים ולא ברמת הפסקה, לכן מאפיינים שמשפיעים על כל הפריסה אינם נתמכים.

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

כשיוצרים פרויקט באמצעות Android Studio, המערכת מחילה עיצוב Material Design על האפליקציה כך: כברירת מחדל, כפי שמוגדר בקובץ styles.xml של הפרויקט. הסגנון הזה מסוג AppTheme מרחיב את העיצוב מספריית התמיכה וכולל שינויים במאפייני הצבעים שנמצאים בשימוש לפי אלמנטים מרכזיים בממשק המשתמש, כמו סרגל האפליקציות לחצן פעולה צף, אם משתמשים בו. אז אתם יכול להתאים אישית במהירות את עיצוב הצבעים של האפליקציה על ידי עדכון הצבעים שסופקו.

לדוגמה, הקובץ styles.xml נראה כך:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

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

אחרי זיהוי הצבעים, מעדכנים את הערכים ב-res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

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

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

לרשימת המאפיינים שבהם אפשר להשתמש בעיצוב שלכם, עיינו בטבלת המאפיינים בכתובת R.styleable.Theme בעת ההוספה את הסגנונות של התצוגות המפורטות בפריסה אפשר למצוא גם במאפיינים של "מאפייני XML" בטבלה שמציגה את ההפניות לכיתה. לדוגמה, כל התצוגות תומכות מאפייני XML מהבסיס View class.

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

בספריית התמיכה ב-Android יש גם מאפיינים נוספים שאפשר להשתמש בהם כדי להתאים אישית את העיצוב הוא מורחב מ-Theme.AppCompat, כמו המאפיין colorPrimary שמוצג מהדוגמה שלמעלה. מומלץ לצפות בסרטונים האלה הקובץ attrs.xml של הספרייה.

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

הוספת סגנונות ספציפיים לגרסה

אם גרסה חדשה של Android מוסיפה מאפייני עיצוב שבהם ברצונך להשתמש, אפשר להוסיף אותם לעיצוב ועדיין להיות תואמים לגרסאות ישנות. כל מה שצריך זה עוד קובץ styles.xml נשמר בספרייה values שכוללת את גרסת המשאב qualifier:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

הסגנונות בקובץ values/styles.xml זמינים לכל הגרסאות, לכן העיצובים שלך ב-values-v21/styles.xml יכולים לרשת אותם. כלומר, אפשר להימנע לשכפל סגנונות על ידי התחלה ב'בסיס' ואז להרחיב אותו בגרסה הספציפית

לדוגמה, כדי להצהיר על מעברים בין חלונות ל-Android 5.0 (רמת API 21) ואילך, צריך כדי להשתמש במאפיינים חדשים. לכן, העיצוב הבסיסי שלך ב-res/values/styles.xml יכול להיראות כמו הזה:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

לאחר מכן מוסיפים את הסגנונות הספציפיים לגרסה ב-res/values-v21/styles.xml, באופן הבא:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

עכשיו אפשר להחיל את AppTheme בקובץ המניפסט, והמערכת תבחר את הסגנונות שזמינות בכל גרסת מערכת.

למידע נוסף על שימוש במשאבים חלופיים במכשירים שונים: מתן משאבים חלופיים.

התאמה אישית של סגנונות הווידג'ט

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

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

אם תרצו להחיל את הסגנון הזה על כל הלחצנים, תוכלו להצהיר עליו בתרחיש העיצוב buttonStyle באופן הזה:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

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

מקורות מידע נוספים

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

פוסטים בבלוגים

• עיצוב ל-Android: עיצובים לעומת סגנונות
• עיצוב ל-Android: מאפיינים נפוצים של עיצובים
• עיצוב ל-Android: העדפה למאפייני עיצוב