ปรับแต่ง UI ของ iOS Sender

คุณปรับแต่งแคสต์ วิดเจ็ต โดยการตั้งค่าสี จัดรูปแบบปุ่ม ข้อความ และลักษณะที่ปรากฏของภาพขนาดย่อ และเลือกประเภทปุ่มที่จะแสดง

ปรับแต่งธีมวิดเจ็ต

วิดเจ็ตเฟรมเวิร์ก 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 ของวิดเจ็ต

กระบวนการนี้จะใช้ตัวอย่างการตั้งค่าสีข้อความเนื้อหาของตัวควบคุมขนาดเล็กของแอปเป็นสีแดง

1. ดูในตารางมุมมองและสไตล์เพื่อหาชื่อมุมมองของวิดเจ็ตหรือกลุ่มวิดเจ็ตที่ต้องการจัดรูปแบบ ชื่อกลุ่มจะมีเครื่องหมาย ▼

   ตัวอย่าง: มุมมองวิดเจ็ต miniController

2. ค้นหาชื่อของแอตทริบิวต์ที่คุณต้องการเปลี่ยนแปลงจากรายการพร็อพเพอร์ตี้ในคลาสสไตล์ที่เกี่ยวข้องซึ่งแสดงในตารางนี้

   ตัวอย่างเช่น bodyTextColor เป็นพร็อพเพอร์ตี้ของคลาส GCKUIStyleAttributesMiniController

3. เขียนโค้ด

   ตัวอย่าง

Swift

// 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 วางเมาส์เหนือรูปภาพเพื่อขยาย