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

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

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

วิดเจ็ตเฟรมเวิร์กของ Cast รองรับโปรโตคอล Apple UIAppearance ใน UIKit เพื่อเปลี่ยนรูปลักษณ์ของวิดเจ็ตในแอป เช่น ตำแหน่งหรือ เส้นขอบของปุ่ม ใช้โปรโตคอลนี้เพื่อจัดรูปแบบวิดเจ็ตเฟรมเวิร์กของ Cast เข้ากับการจัดรูปแบบแอปที่มีอยู่

ตัวอย่างปุ่ม "แคสต์"

Swift

วันที่

GCKUICastButton.appearance().tintColor = UIColor.gray

Objective-C

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

ปรับแต่งวิดเจ็ตโดยตรง

ปรับแต่งวิดเจ็ตโดยตรงโดยใช้พร็อพเพอร์ตี้ของ Superclass ของวิดเจ็ตนั้นๆ ตัวอย่างเช่น เป็นเรื่องปกติที่จะปรับแต่ง GCKUICastButton โดยใช้แอตทริบิวต์ tintColor:

ตัวอย่างปุ่ม "แคสต์"

Swift

วันที่

castButton.tintColor = UIColor.gray

Objective-C

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	ปิดเสียงและเปิดเสียง Web Receiver ระยะไกล
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()

Objective-C

// 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 กลุ่ม (ทำเครื่องหมายด้วย ▼) ที่คุณสามารถใช้รูปแบบได้

ชื่อการแสดงผล	ประเภท	คลาสรูปแบบ
▼ 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 Singleton คือจุดแรกเข้าของ API สำหรับการตั้งค่าสไตล์ทั้งหมด มีที่พัก castViews ซึ่งเป็นรูทของลำดับชั้นสไตล์ ดังที่แสดงด้านล่าง แผนภาพนี้เป็นมุมมองอื่นในการดู มุมมองและกลุ่มที่แสดงในตารางก่อนหน้า

คุณสามารถใช้รูปแบบกับวิดเจ็ตใดวิดเจ็ตหนึ่งหรือกับกลุ่มวิดเจ็ตก็ได้ ลำดับชั้นของรูปแบบมีกลุ่มวิดเจ็ต 3 กลุ่ม ได้แก่ CastViews, deviceControl และการควบคุมสื่อ รูปสี่เหลี่ยมผืนผ้าของแต่ละกลุ่มจะล้อมรอบวิดเจ็ตของกลุ่มนั้น การนำรูปแบบไปใช้กับกลุ่มจะเป็นการใช้กับวิดเจ็ตทั้งหมดในกลุ่มนั้น

ตัวอย่างเช่น กลุ่ม castViews ช่วยให้คุณใช้รูปแบบกับวิดเจ็ตทั้งหมดและ กลุ่ม deviceControl ให้คุณนำรูปแบบไปใช้กับอุปกรณ์ 3 เครื่องได้ ควบคุมวิดเจ็ต วิดเจ็ต instructions ไม่ได้อยู่ในกลุ่มใดเลย

castViews
			deviceControl				mediaControl
	วิธีการ วันที่		อุปกรณ์ ตัวเลือก วันที่	ไม่มีอุปกรณ์ หน้าจอที่พร้อมใช้งาน วันที่	การเชื่อมต่อ ตัวควบคุม วันที่		มินิ คอนโทรลเลอร์ วันที่	ขยาย ตัวควบคุม แล้ว วันที่	แทร็ก ตัวเลือก วันที่
				การนำทาง / แถบเครื่องมือ วันที่

เชิงอรรถ: ชื่อวิดเจ็ตในแผนภาพนี้ที่แสดงเป็น 2 บรรทัดควรเป็น ซึ่งเขียนเป็นโค้ดคำเดียว บรรทัดเดียว โดยไม่มีช่องว่าง ตัวอย่างเช่น device Chooser ควรเขียนว่า deviceChooser วางเมาส์เหนือรูปภาพเพื่อขยาย ให้พวกเขา