Swift Academy · Lektion

Grunderna i CALayer

Arbeta med lager, deras egenskaper och hierarki.

Lektion 1 av 413 steg

Grunderna i CALayer är en gratis lektion i Swift Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Swift Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Swift Academy innehåller totalt 4 lektioner.

Vad är en CALayer?

CALayer är det lager som ligger bakom allt som syns i UIKit. Varje UIView ritas av ett lager som lagrar dess visuella innehåll som en textur på GPU:n.

Genom att arbeta direkt med lager får man tillgång till hårdvaruaccelererad grafik och animering.

import UIKit
let layer = CALayer()

Lager bakom vyer

Varje vy har en egenskap som heter layer. Att ställa in lageregenskaper är ofta enklare och billigare än att rita själv.

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

Geometri: frame, bounds, position

Ett lager har bounds, som anger dess eget koordinatsystem, position, som anger var dess ankare ligger i den överordnade vyn, och en härledd frame. Om någon av dem ändras uppdateras de andra.

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

Ankarpunkten

anchorPoint, som som standard är 0.5, 0.5, alltså mitten, definierar lagrets origo för positionering och transformationer. Rotationer och skalningar sker runt den.

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

Visuella egenskaper

Lager erbjuder direkt åtkomst till visuell formgivning: backgroundColor, en CGColor, cornerRadius, borderWidth, borderColor och opacity.

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

Skuggor

Lager ritar skuggor med shadowColor, shadowOpacity, shadowOffset och shadowRadius. Ange en shadowPath för bättre prestanda.

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

Underordnade lager

Lager bildar ett träd. Lägg till underordnade lager med addSublayer; de positioneras i det överordnade lagrets koordinatsystem.

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

Specialiserade lagertyper

UIKit levereras med underklasser för lager: CAShapeLayer för vektorbanor, CAGradientLayer för gradienter, CATextLayer för text och CAReplicatorLayer för duplicerade underordnade lager.

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

Gradientlager

CAGradientLayer återger mjuka färgövergångar som definieras av colors, locations, startPoint och 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 och skärpa

Ange contentsScale till skärmens skala så att innehåll som ritas av lagret blir skarpt på Retina-skärmar. Om detta glöms bort blir text och former suddiga.

layer.contentsScale = UIScreen.main.scale

Lager är resurssnåla

Lager hanterar inte pekhändelser eller Auto Layout; de är rena visuella objekt. Därför är de billigare än vyer för dekorativt eller animerat innehåll.

Snabbtest: CALayer

Testa förståelsen av grunderna i CALayer.

Besvara frågan i den interaktiva lektionen

Sammanfattning: grunderna i CALayer

CALayer ligger bakom varje UIKit-vy och erbjuder GPU-accelererade visuella funktioner: geometri med bounds/position/anchorPoint, formgivning med hörnradie, kantlinjer och skuggor samt ett träd av underordnade lager.

Specialiserade underklasser hanterar former, gradienter, text och replikering. Ange contentsScale för skärpa och kom ihåg att lager är resurssnåla visuella objekt utan pekhantering eller Auto Layout. Denna grund ligger till grund för de kommande animeringarna.

Gratis att börja

Lär dig Swift med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 122
Lektioner: 409

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Grunderna i CALayer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Swift Academy, inklusive ”Grunderna i CALayer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Swift Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Grunderna i CALayer”?

Arbeta med lager, deras egenskaper och hierarki. Ni övar på Swift Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Swift Academy?

Du behöver inga förkunskaper. Utbildningen i Swift Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Grunderna i CALayer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Swift Academy-lektionen?

Ja. Varje Swift Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Swift Academy