ปรับแต่ง UI ผู้ส่งของ iOS

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

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

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

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

GCKUICastButton.appearance().tintColor = UIColor.gray

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

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

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

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

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] ได้

แต่ละช่องสามารถมีปุ่มกรอบการทํางาน ปุ่มที่กําหนดเอง หรือว่างเปล่า รายการปุ่มควบคุมเฟรมเวิร์กหมายถึง:

ดูคําอธิบายโดยละเอียดเกี่ยวกับปุ่มแต่ละปุ่มได้ใน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. เขียนโค้ด

   ตัวอย่าง:

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

ลําดับชั้นของรูปแบบ

GCKUIStyle Singleton คือจุดเข้าถึง API สําหรับการตั้งค่าลักษณะทั้งหมด โดยมีพร็อพเพอร์ตี้ castViews ซึ่งเป็นรากของลําดับชั้นของสไตล์ ดังที่แสดงด้านล่าง แผนภาพนี้เป็นอีกมุมมองหนึ่งในการดูมุมมองและกลุ่มเดียวกันที่แสดงในตารางก่อนหน้า

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

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

แคสต์มุมมอง
			การควบคุมอุปกรณ์				การควบคุมสื่อ
	วิธีการ		อุปกรณ์ ตัวเลือก	ไม่มีหน้าจออุปกรณ์	การเชื่อมต่อ ตัวควบคุม		มินิ ตัวควบคุม	ขยาย ตัวควบคุม	แทร็ก ตัวเลือก
				การนําทาง / แถบเครื่องมือ

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