คุณปรับแต่งแคสต์ วิดเจ็ต โดยการตั้งค่าสี จัดรูปแบบปุ่ม ข้อความ และลักษณะที่ปรากฏของภาพขนาดย่อ และเลือกประเภทปุ่มที่จะแสดง
ปรับแต่งธีมวิดเจ็ต
วิดเจ็ตเฟรมเวิร์ก Cast รองรับโปรโตคอล Apple UIAppearance Protocol ใน UIKit เพื่อเปลี่ยนรูปลักษณ์ของวิดเจ็ตในแอป เช่น ตำแหน่งหรือขอบของปุ่ม ใช้โปรโตคอลนี้เพื่อจัดรูปแบบวิดเจ็ตเฟรมเวิร์กของ Cast ให้ตรงกับการจัดรูปแบบแอปที่มีอยู่
ตัวอย่างปุ่ม "แคสต์"
GCKUICastButton.appearance().tintColor = UIColor.gray
[GCKUICastButton appearance].tintColor = [UIColor grayColor];
ปรับแต่งวิดเจ็ตโดยตรง
ปรับแต่งวิดเจ็ตโดยตรงโดยใช้พร็อพเพอร์ตี้ของคลาสขั้นสูง เช่น ปกติแล้วมักจะปรับแต่งสีของ GCKUICastButton
โดยใช้พร็อพเพอร์ตี้ tintColor:
ตัวอย่างปุ่ม "แคสต์"
castButton.tintColor = UIColor.gray
castButton.tintColor = [UIColor grayColor];
เลือกปุ่มตัวควบคุม
ทั้งคลาสตัวควบคุมที่ขยาย
(GCKUIExpandedMediaControlsViewController
)
และคลาสตัวควบคุมขนาดเล็ก
(GCKUIMiniMediaControlsViewController
)
มีแถบปุ่ม และไคลเอ็นต์จะกำหนดค่าปุ่มที่จะแสดงบนแถบเหล่านั้นได้ ซึ่งทำได้ทั้ง 2 คลาสที่สอดคล้องกับ GCKUIMediaButtonBarProtocol
แถบตัวควบคุมขนาดเล็กมีช่องที่กำหนดค่าได้ 3 ช่องสำหรับปุ่มต่างๆ ดังนี้
SLOT SLOT SLOT
1 2 3
แถบตัวควบคุมที่ขยายจะมีปุ่มเปิด/ปิดการเล่น/หยุดชั่วคราวแบบถาวรตรงกลางแถบ รวมถึงมีช่องที่กำหนดค่าได้ 4 ช่องดังนี้
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
แอปของคุณรับการอ้างอิงไปยังตัวควบคุมแบบขยายที่มีพร็อพเพอร์ตี้ -[defaultExpandedMediaControlsViewController]
ของ
GCKCastContext
และสามารถสร้างตัวควบคุมขนาดเล็กโดยใช้
-[createMiniMediaControlsViewController]
ได้
แต่ละช่องอาจมีปุ่มเฟรมเวิร์ก ปุ่มที่กำหนดเอง หรือเว้นว่างไว้ก็ได้ รายการปุ่มควบคุมเฟรมเวิร์กมีคำจำกัดความดังนี้
ประเภทปุ่ม | คำอธิบาย |
---|---|
GCKUIMediaButtonTypeNone |
อย่าวางปุ่มในช่องนี้ |
GCKUIMediaButtonTypeCustom |
ปุ่มที่กำหนดเอง |
GCKUIMediaButtonTypePlayPauseToggle |
สลับระหว่างการเล่นและหยุดชั่วคราว |
GCKUIMediaButtonTypeSkipPrevious |
ข้ามไปยังรายการก่อนหน้าในคิว |
GCKUIMediaButtonTypeSkipNext |
ข้ามไปยังรายการถัดไปในคิว |
GCKUIMediaButtonTypeRewind30Seconds |
กรอการเล่นกลับ 30 วินาที |
GCKUIMediaButtonTypeForward30Seconds |
ข้ามการเล่นไปข้างหน้า 30 วินาที |
GCKUIMediaButtonTypeMuteToggle |
ปิดและเปิดเว็บรีซีฟเวอร์ระยะไกล |
GCKUIMediaButtonTypeClosedCaptions |
เปิดกล่องโต้ตอบเพื่อเลือกแทร็กข้อความและแทร็กเสียง |
ดูคำอธิบายโดยละเอียดเกี่ยวกับการทำงานของแต่ละปุ่มได้ใน
GCKUIMediaButtonBarProtocol.h
เพิ่มปุ่มดังต่อไปนี้โดยใช้วิธีการใน GCKUIMediaButtonBarProtocol
หากต้องการเพิ่มปุ่มเฟรมเวิร์กลงในแถบ คุณต้องเรียกใช้
-[setButtonType:atIndex:]
เท่านั้นหากต้องการเพิ่มปุ่มที่กำหนดเองลงในแถบ แอปของคุณจะต้องเรียกใช้
-[setButtonType:atIndex:]
โดยตั้งค่าbuttonType
เป็นGCKUIMediaButtonTypeCustom
แล้วเรียก-[setCustomButton:atIndex:]
ที่ผ่านUIButton
ที่มีดัชนีเดียวกัน
ใช้รูปแบบที่กำหนดเองกับแอป iOS
Cast iOS SDK ช่วยให้คุณจัดรูปแบบแบบอักษร สี และรูปภาพขององค์ประกอบ UI ของวิดเจ็ตเริ่มต้นในผู้ส่ง iOS ได้ ซึ่งทำให้มีรูปลักษณ์ที่สอดคล้องกับส่วนที่เหลือของแอป
ส่วนต่อไปนี้แสดงวิธีนำสไตล์ที่กำหนดเองไปใช้กับวิดเจ็ตแคสต์หรือกลุ่มวิดเจ็ต
การนำรูปแบบไปใช้กับองค์ประกอบ UI ของวิดเจ็ต
กระบวนการนี้จะใช้ตัวอย่างการตั้งค่าสีข้อความเนื้อหาของตัวควบคุมขนาดเล็กของแอปเป็นสีแดง
ดูในตารางมุมมองและสไตล์เพื่อหาชื่อมุมมองของวิดเจ็ตหรือกลุ่มวิดเจ็ตที่ต้องการจัดรูปแบบ ชื่อกลุ่มจะมีเครื่องหมาย ▼
ตัวอย่าง: มุมมองวิดเจ็ต
miniController
ค้นหาชื่อของแอตทริบิวต์ที่คุณต้องการเปลี่ยนแปลงจากรายการพร็อพเพอร์ตี้ในคลาสสไตล์ที่เกี่ยวข้องซึ่งแสดงในตารางนี้
ตัวอย่างเช่น
bodyTextColor
เป็นพร็อพเพอร์ตี้ของคลาสGCKUIStyleAttributesMiniController
เขียนโค้ด
ตัวอย่าง
// 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];
ใช้รูปแบบนี้เพื่อนำสไตล์ไปใช้กับองค์ประกอบ UI ของวิดเจ็ต
ตารางมุมมองและรูปแบบ
ตารางนี้แสดงมุมมองวิดเจ็ต 7 รายการและกลุ่ม 3 กลุ่ม (ทำเครื่องหมายด้วย ▼) ที่คุณใช้รูปแบบได้
ชื่อการแสดงผล | Type | คลาสของรูปแบบ |
---|---|---|
▼ castViews |
กลุ่ม | GCKUIStyleAttributesCastViews |
▼ deviceControl |
กลุ่ม | GCKUIStyleAttributesDeviceControl |
deviceChooser |
วิดเจ็ต | GCKUIStyleAttributesDeviceChooser |
noDevicesAvailableController |
วิดเจ็ต | GCKUIStyleAttributesNoDevicesAvailableController |
▼ connectionController |
กลุ่ม | GCKUIStyleAttributesConnectionController |
navigation |
วิดเจ็ต | GCKUIStyleAttributesConnectionNavigation |
toolbar |
วิดเจ็ต | GCKUIStyleAttributesConnectionToolbar |
▼ mediaControl |
กลุ่ม | GCKUIStyleAttributesMediaControl |
miniController |
วิดเจ็ต | GCKUIStyleAttributesMiniController |
expandedController |
วิดเจ็ต | GCKUIStyleAttributesExpandedController |
trackSelector |
วิดเจ็ต | GCKUIStyleAttributesTrackSelector |
instructions |
วิดเจ็ต | GCKUIStyleAttributesInstructions |
ลำดับชั้นของรูปแบบ
ซิงเกิล GCKUIStyle
คือจุดแรกเข้าของ API สำหรับการตั้งค่าสไตล์ทั้งหมด โดยมีพร็อพเพอร์ตี้ castViews
ซึ่งเป็นรากของลำดับชั้นของรูปแบบดังที่แสดงด้านล่าง แผนภาพนี้เป็นอีกวิธีในการดูมุมมองและกลุ่มเดียวกันกับที่แสดงในตารางก่อนหน้า
คุณสามารถใช้รูปแบบกับวิดเจ็ตแต่ละรายการหรือกับกลุ่มวิดเจ็ตก็ได้ ลำดับชั้นของสไตล์มีกลุ่มวิดเจ็ต 3 กลุ่ม ได้แก่ CastView, deviceControl และ mediaControl รูปสี่เหลี่ยมผืนผ้าของแต่ละกลุ่มล้อมรอบวิดเจ็ต การนำลักษณะหนึ่งไปใช้กับกลุ่มจะเป็นการนำไปใช้กับวิดเจ็ตทั้งหมดในกลุ่มนั้น
ตัวอย่างเช่น กลุ่ม castViews
ช่วยให้คุณใช้สไตล์กับวิดเจ็ตทั้งหมด และกลุ่ม deviceControl
ช่วยให้คุณใช้สไตล์กับวิดเจ็ตควบคุมอุปกรณ์ทั้ง 3 ชิ้นได้ วิดเจ็ต instructions
ไม่ได้อยู่ในกลุ่มใดเลย
castViews | ||||||||||
deviceControl | mediaControl | |||||||||
วิธีการ |
อุปกรณ์ ตัวเลือก |
หน้าจอที่ไม่มีอุปกรณ์ |
การเชื่อมต่อ ตัวควบคุม |
มินิ ตัวควบคุม |
ขยาย ตัวควบคุม |
แทร็ก ตัวเลือก |
||||
การนำทาง / แถบเครื่องมือ |
||||||||||
เชิงอรรถ: ชื่อวิดเจ็ตในแผนภาพนี้ซึ่งแสดง 2 บรรทัดควรเขียนเป็นโค้ดเป็นคำเดียว บรรทัดเดียว และไม่มีเว้นวรรค ตัวอย่างเช่น device Chooser
ควรเขียนว่า deviceChooser
วางเมาส์เหนือรูปภาพเพื่อขยาย