התאמה אישית של ממשק המשתמש של השולח ב-iOS

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

התאמה אישית של העיצוב של הווידג'ט

הווידג'טים של Cast framework תומכים ב-Apple UIמראה פרוטוקול ב-UIKit כדי לשנות את מראה הווידג'טים באפליקציה, למשל את המיקום או הגבול של לחצן. השתמשו בפרוטוקול הזה כדי לעצב את הווידג'טים של מסגרת Cast כך שיתאימו לעיצוב קיים של אפליקציות.

דוגמה ללחצן 'העברה'

Swift

GCKUICastButton.appearance().tintColor = UIColor.gray

יעד ג'

[GCKUICastButton appearance].tintColor = [UIColor grayColor];

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

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

דוגמה ללחצן 'העברה'

Swift

castButton.tintColor = UIColor.gray

יעד ג'

castButton.tintColor = [UIColor grayColor];

בחירת לחצני הבקר

מחלקת הבקר המורחב (GCKUIExpandedMediaControlsViewController) ומחלקת המיני של הבקר (GCKUIMiniMediaControlsViewController) כוללות סרגל לחצנים, והלקוחות יכולים להגדיר אילו לחצנים יופיעו בסרגלים האלה. אפשר לעשות את זה כששני המחלקות עומדים בתנאים של GCKUIMediaButtonBarProtocol.

בסרגל המיני-בקר יש 3 חריצים הניתנים להגדרה ללחצנים:

SLOT  SLOT  SLOT
  1     2     3

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

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

אפשר להציג באפליקציה הפניה לשלט הרחוק המורחב במאפיין -[defaultExpandedMediaControlsViewController] של GCKCastContext וליצור בקר מיני באמצעות -[createMiniMediaControlsViewController].

כל יחידת קיבולת יכולה להכיל לחצן framework או לחצן מותאם אישית, או להיות ריקה. רשימת הלחצנים של בקרות ה-framework מוגדרת כך:

סוג לחצן	התיאור
GCKUIMediaButtonTypeNone	אין להציב לחצן ביחידת הקיבולת (Slot) הזו
GCKUIMediaButtonTypeCustom	לחצן בהתאמה אישית
GCKUIMediaButtonTypePlayPauseToggle	מעבר בין הפעלה להשהיה
GCKUIMediaButtonTypeSkipPrevious	דילוג לפריט הקודם בתור
GCKUIMediaButtonTypeSkipNext	דילוג לפריט הבא בתור
GCKUIMediaButtonTypeRewind30Seconds	הרצת ההפעלה 30 שניות אחורה
GCKUIMediaButtonTypeForward30Seconds	דילוג 30 שניות קדימה של ההפעלה
GCKUIMediaButtonTypeMuteToggle	השתקה וביטול ההשתקה של המקבל המרוחק
GCKUIMediaButtonTypeClosedCaptions	נפתחת תיבת דו-שיח לבחירת טראקים של טקסט ואודיו

אפשר למצוא תיאורים מפורטים של הפעולות של כל לחצן ב-GCKUIMediaButtonBarProtocol.h

מוסיפים לחצן באופן הבא באמצעות שיטות ב-GCKUIMediaButtonBarProtocol:

• כדי להוסיף לחצן של framework לסרגל, נדרשת רק קריאה ל--[setButtonType:atIndex:].

• כדי להוסיף לחצן מותאם אישית לסרגל, האפליקציה צריכה להפעיל את -[setButtonType:atIndex:] כאשר buttonType מוגדר ל-GCKUIMediaButtonTypeCustom, ולאחר מכן להפעיל את -[setCustomButton:atIndex:] כדי להעביר את UIButton עם אותו אינדקס.

החלת סגנונות מותאמים אישית באפליקציה ל-iOS

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

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

החלת סגנון על רכיב בממשק משתמש של ווידג'ט

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

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

   דוגמה: תצוגת ווידג'ט אחת (miniController)

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

   לדוגמה: bodyTextColor הוא נכס של המחלקה GCKUIStyleAttributesMiniController.

3. כותבים את הקוד.

   דוגמה:

סוויפט

// Get the shared instance of GCKUIStyle
let castStyle = GCKUIStyle.sharedInstance()
// Set the property of the desired cast widget.
castStyle.castViews.mediaControl.miniController.bodyTextColor = UIColor.red
// Refresh all currently visible views with the assigned styles.
castStyle.apply()

יעד ג'

// Get the shared instance of GCKUIStyle.
GCKUIStyle *castStyle = [GCKUIStyle sharedInstance];
// Set the property of the desired cast widget.
castStyle.castViews.mediaControl.miniController.bodyTextColor = [UIColor redColor];
// Refresh all currently visible views with the assigned styles.
[castStyle applyStyle];

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

טבלה של תצוגות וסגנונות

טבלה זו מציגה את שבע תצוגות הווידג'ט ושלוש קבוצות (מסומנות ב-▼) שניתן להחיל עליהן סגנונות.

שם התצוגה	תיאור	סיווג סגנון
▼ castViews	קבוצה	GCKUIStyleAttributesCastViews
▼ deviceControl	קבוצה	GCKUIStyleAttributesDeviceControl
deviceChooser	ווידג'ט	GCKUIStyleAttributesDeviceChooser
noDevicesAvailableController	ווידג'ט	GCKUIStyleAttributesNoDevicesAvailableController
▼ connectionController	קבוצה	GCKUIStyleAttributesConnectionController
navigation	ווידג'ט	GCKUIStyleAttributesConnectionNavigation
toolbar	ווידג'ט	GCKUIStyleAttributesConnectionToolbar
▼ mediaControl	קבוצה	GCKUIStyleAttributesMediaControl
miniController	ווידג'ט	GCKUIStyleAttributesMiniController
expandedController	ווידג'ט	GCKUIStyleAttributesExpandedController
trackSelector	ווידג'ט	GCKUIStyleAttributesTrackSelector
instructions	ווידג'ט	GCKUIStyleAttributesInstructions

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

ה-singleton GCKUIStyle הוא נקודת הכניסה ל-API לכל הגדרות הסגנון. יש לו את המאפיין castViews, שהוא השורש של היררכיית הסגנונות, כמו שמוצג בהמשך. התרשים הזה הוא דרך שונה לבחון את אותן התצוגות והקבוצות שהוצגו בטבלה הקודמת.

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

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

castViews
			deviceControl				mediaControl
	הוראות		מכשיר בוחר	המסך noDevicesAvailable	חיבור בקר		mini בקר	מורחב בקר	טראק בורר
				ניווט / סרגל כלים

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