הסגנונות והעיצובים ב-Android מאפשרים להפריד בין הפרטים של עיצוב האפליקציה לבין ממשק המשתמש במבנה ובהתנהגות, בדומה לגיליונות ראשיים בעיצוב אינטרנט.
סגנון הוא אוסף של מאפיינים שמציין את המראה של
View
. סגנון יכול לציין מאפיינים
כמו צבע הגופן, גודל הגופן, צבע רקע ועוד.
עיצוב הוא אוסף של מאפיינים שחלים על כל האפליקציה, הפעילות או התצוגה ההיררכיה, ולא רק תצוגה מפורטת בודדת. כשמחילים עיצוב, כל תצוגה באפליקציה או מחילה כל אחד מהמאפיינים של העיצוב שבו היא תומכת. אפשר להחיל סגנונות גם על רכיבים שאינם תצוגה, כמו שורת הסטטוס ורקע החלון.
הסגנונות והעיצובים מוצהרים בהצהרה
style resource file ב-
res/values/
, בדרך כלל בשם styles.xml
.
![](https://developer.android.com/static/training/material/images/material-themes_2x.png?authuser=9&hl=he)
איור 1. שני נושאים הוחלו על אותה פעילות:
Theme.AppCompat
(בצד שמאל) ו-Theme.AppCompat.Light
(ימין).
עיצובים לעומת סגנונות
לעיצובים ולסגנונות יש הרבה דמיון, אבל הם משמשים למטרות שונות. עיצובים ו לסגנונות יש מבנה בסיסי זהה – צמד מפתח/ערך שממפה את המאפיינים אל משאבים.
style מציין מאפיינים לסוג מסוים של תצוגה. לדוגמה, סגנון אחד יכול לציין את המאפיינים של הלחצן. כל מאפיין שמציינים בסגנון הוא מאפיין שאפשר להגדיר בו את קובץ הפריסה. חילוץ כל המאפיינים לסגנון מאפשר להשתמש בהם ולתחזק אותם בקלות בכמה ווידג'טים.
עיצוב מגדיר אוסף של משאבים בעלי שם שאפשר להפנות אליהם לפי סגנונות, פריסות,
הווידג'טים וכו'. עיצובים מקצים שמות סמנטיים, כמו colorPrimary
, ל-Android
במשאבי אנוש.
כל הסגנונות והעיצובים אמורים לפעול יחד. לדוגמה, ייתכן שיש לכם סגנון שמציין
שחלק אחד של הלחצן הוא colorPrimary
, וחלק אחר הוא
colorSecondary
. ההגדרות בפועל של הצבעים האלה מופיעות בעיצוב. מתי
המכשיר עובר למצב לילה, האפליקציה יכולה לעבור ממצב 'בהיר' לעיצוב "כהה" עיצוב,
לשנות את הערכים של כל שמות המשאבים האלה. אין צורך לשנות את הסגנונות, מכיוון
סגנונות משתמשים בשמות הסמנטיים ולא בהגדרות צבעים ספציפיות.
למידע נוסף על האופן שבו עיצובים וסגנונות פועלים יחד, כדאי לקרוא את הפוסט בבלוג עיצוב ל-Android: עיצובים לעומת סגנונות.
יצירת סגנון והחלתו
כדי ליצור סגנון חדש, פותחים את הקובץ res/values/styles.xml
של הפרויקט. עבור
כדי ליצור כל סגנון, מבצעים את השלבים הבאים:
- צריך להוסיף רכיב
<style>
עם שם שמזהה את הסגנון באופן ייחודי. - מוסיפים רכיב
<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. באופן כללי, מומלץ עיצובים וסגנונות שונים ככל האפשר, כדי לשמור על עקביות. אם תציינו את אותם מאפיינים כמה מקומות, הרשימה הבאה קובעת אילו מאפיינים יחולו בסופו של דבר. הרשימה היא מסודרות מהעדיפות הגבוהה ביותר לנמוכה ביותר.
- החלת עיצוב ברמת התווים או הפסקה באמצעות טקסט על פני
TextView
הסוגים. - החלת מאפיינים באופן פרוגרמטי.
- החלת מאפיינים בודדים ישירות על תצוגה מפורטת.
- החלת סגנון על תצוגה מפורטת.
- עיצוב ברירת המחדל.
- החלת עיצוב על אוסף של תצוגות, פעילות או האפליקציה כולה.
- החלת סגנון מסוים לתצוגה ספציפית, כמו הגדרת
TextAppearance
עלTextView
.
![](https://developer.android.com/static/guide/topics/ui/images/text-multiple-styles.png?authuser=9&hl=he)
איור 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: העדפה למאפייני עיצוב