Swift Academy · บทเรียน

พื้นฐาน CALayer

ทำงานกับเลเยอร์ คุณสมบัติ และลำดับชั้นของเลเยอร์

บทเรียน 1 จาก 413 ขั้นตอน

พื้นฐาน CALayer เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

CALayer คืออะไร

CALayer คือพื้นที่จัดเก็บเบื้องหลังทุกสิ่งที่คุณเห็นใน UIKit UIView แต่ละรายการถูกวาดโดย layer ซึ่งเก็บเนื้อหาภาพไว้เป็นเท็กซ์เจอร์บน GPU

การทำงานกับ layer โดยตรงช่วยให้เข้าถึงกราฟิกและภาพเคลื่อนไหวที่เร่งด้วยฮาร์ดแวร์ได้

import UIKit
let layer = CALayer()

layer เบื้องหลังมุมมอง

มุมมองทุกตัวมีคุณสมบัติ layer การตั้งค่าคุณสมบัติของ layer มักง่ายและประหยัดกว่าการวาดเอง

view.layer.cornerRadius = 12
view.layer.masksToBounds = true

เรขาคณิต: frame, bounds, position

layer มี bounds ซึ่งเป็นระบบพิกัดของตัวเอง มี position ซึ่งระบุตำแหน่งที่จุดยึดอยู่ใน parent และมี frame ที่คำนวณต่อมา การแก้ไขค่าใดค่าหนึ่งจะอัปเดตค่าอื่น ๆ ตามไปด้วย

let layer = CALayer()
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.position = CGPoint(x: 150, y: 150)

จุดยึด

anchorPoint ซึ่งมีค่าเริ่มต้นเป็น 0.5, 0.5 หรือจุดกึ่งกลาง จะกำหนดจุดกำเนิดของ layer สำหรับการกำหนดตำแหน่งและการแปลงรูป การหมุนและการปรับขนาดจะหมุนรอบจุดนี้

layer.anchorPoint = CGPoint(x: 0, y: 0) // top-left pivot

คุณสมบัติด้านภาพ

layer เปิดให้กำหนดรูปแบบภาพได้โดยตรง ได้แก่ backgroundColor ซึ่งเป็น CGColor, cornerRadius, borderWidth, borderColor และ opacity

layer.backgroundColor = UIColor.systemBlue.cgColor
layer.cornerRadius = 8
layer.borderWidth = 2
layer.borderColor = UIColor.white.cgColor

เงา

layer วาดเงาด้วย shadowColor, shadowOpacity, shadowOffset และ shadowRadius ให้กำหนด shadowPath เพื่อเพิ่มประสิทธิภาพ

layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize(width: 0, height: 4)
layer.shadowRadius = 6

เลเยอร์ย่อย

layer เรียงกันเป็นโครงสร้างต้นไม้ เพิ่ม child ด้วย addSublayer โดย child จะถูกวางในระบบพิกัดของ parent

let parent = CALayer()
let child = CALayer()
child.frame = CGRect(x: 10, y: 10, width: 40, height: 40)
parent.addSublayer(child)

ชนิดของ layer เฉพาะทาง

UIKit มีคลาสย่อยของ layer ให้ใช้งาน ได้แก่ CAShapeLayer สำหรับเส้นทางเวกเตอร์ CAGradientLayer สำหรับการไล่ระดับสี CATextLayer สำหรับข้อความ และ CAReplicatorLayer สำหรับ child ที่ทำซ้ำ

let shape = CAShapeLayer()
shape.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 50, height: 50)).cgPath
shape.fillColor = UIColor.systemRed.cgColor

เลเยอร์ไล่ระดับสี

CAGradientLayer แสดงการผสมสีอย่างราบรื่น ซึ่งกำหนดด้วย colors, locations, startPoint และ endPoint

let gradient = CAGradientLayer()
gradient.colors = [UIColor.systemBlue.cgColor, UIColor.systemPurple.cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)

contentsScale และความคมชัด

กำหนด contentsScale ให้เท่ากับมาตราส่วนของหน้าจอ เพื่อให้เนื้อหาที่วาดโดย layer คมชัดบนจอภาพ Retina หากลืมกำหนด ข้อความและรูปร่างจะพร่ามัว

layer.contentsScale = UIScreen.main.scale

layer มีน้ำหนักเบา

layer ไม่จัดการเหตุการณ์สัมผัสหรือการจัดวางอัตโนมัติ แต่เป็นวัตถุด้านภาพล้วน ๆ จึงมีต้นทุนต่ำกว่ามุมมองเมื่อใช้กับเนื้อหาสำหรับตกแต่งหรือภาพเคลื่อนไหว

ตรวจสอบสั้น ๆ: CALayer

ทดสอบความเข้าใจเกี่ยวกับพื้นฐานของ CALayer

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: พื้นฐานของ CALayer

CALayer เป็นเบื้องหลังของมุมมอง UIKit ทุกตัว และมีภาพที่เร่งด้วย GPU ให้ใช้งาน ทั้งเรขาคณิตของ bounds/position/anchorPoint การกำหนดรูปแบบ เช่น รัศมีมุม เส้นขอบ และเงา รวมถึงโครงสร้างต้นไม้ของเลเยอร์ย่อย

คลาสย่อยเฉพาะทางจัดการรูปร่าง การไล่ระดับสี ข้อความ และการทำซ้ำ กำหนด contentsScale เพื่อให้ภาพคมชัด และจำไว้ว่า layer เป็นวัตถุด้านภาพที่มีน้ำหนักเบา โดยไม่มีการรับสัมผัสหรือการจัดวางอัตโนมัติ พื้นฐานนี้จะนำไปสู่ภาพเคลื่อนไหวในบทถัดไป

เริ่มต้นได้ฟรี

เรียนรู้ Swift ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 122
บทเรียน: 409

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “พื้นฐาน CALayer” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐาน CALayer” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน CALayer”

ทำงานกับเลเยอร์ คุณสมบัติ และลำดับชั้นของเลเยอร์ คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐาน CALayer” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Swift Academy