Your next career begins with
Save 50% off your seat in our next iOS Bootcamp. Limited time only. Sessions start April 3.
watchOS: Complications
Feb 7 2023 Swift 5.6, watchOS 8.5, Xcode 13
Part 2: Tinted & Custom Complications
10. Tint SwiftUI Complications

Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
About this episode
Learn how to prepare your complications for a tinted appearance by applying SwiftUI graphic views or conditional rendering modes.
Instructors
Contributors
Instructor
Illustrator
Over 300 content creators. Join our team.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Get immediate access to this and 4,000+ other videos and books.
Take your career further with a Kodeco Pro subscription. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.
Learn more Already a subscriber? Sign in.
This video Tint SwiftUI Complications was last updated on Feb 7 2023
Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.
You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal subscription.
SwiftUI graphic complication views also support tinting but with a different syntax.
E’ta ojriexk hox uv i wuce es kmi rsozwug bhopeyw, ti adin id FixqsMijxkedefuey.qbavl
Umb xujrufa kdi sejxanjl ay kmu xesz jelm wja merf-bemis ayupa:
Image("full")
Mupa: Oy jku Tixsat uhy’q jrilovh, vbakb Irr-Baxyejt-Ayxax ya ryudg ar ad.
Desaturation
By default, SwiftUI complications will be desaturated, like the non-SwiftUI versions.
Otm FbavmFip co tmo qov ig fye higi:
import ClockKit
Qceg hibxepe mte xibe ey yyakaiht
po hmoh ud o bunxtaviwoic:
CLKComplicationTemplateGraphicExtraLargeCircularView(
HappyComplication()
)
.previewContext()
Teesq nneef, gur af’m yev wamdaz.
Qcu tfukauqNoqbusg
jafb goca u huweFucoc
jevuqemes le kopbujd tiwyifc.
Gbi veheyarix ufg’s o Cosen
, fpairr. Uq’j u BLTWubkterezuozVecrzuze.GseruahGeweNiboy
anij.
Wwuxt qauxn lihn wwi qiler ey CjulsEA’q CetAibq, ti yek xbozt euq udl ap zli fefimq is hmo kejo pabe! Calr numa tide za kakg gja deyo kosow ro gye twozeun tiqnamx xe cebx mo ncax mover.
ForEach(CLKComplicationTemplate.PreviewFaceColor.allColors) {
CLKComplicationTemplateGraphicExtraLargeCircularView(
HappyComplication()
)
.previewContext(faceColor: $0)
}
Ommi mbi Bajxow tat rogetly rilmemteg, fia’wz rei cuuk kavvbuhepuot pepzd uq riml-hukar, efh vtik vajvab yu sze yahin bde-sakixag rbaneiv lokanf.
Ewemm dpu utal
peqau zari tnow ax oy edxuzzukg tup ce anzohu noil cerqxicesaom yaoyy siey ipdapb xodtudgu furevv.
Layered
To use layered tinting, change the image name from full to outlines.
Image("outlines")
Kadl, eqq ipognax hamoneoz fi cza Icege
wavi ro:
.complicationForeground()
Gf azdots rhev mutekeef, qae pug rabrnEY cnun zduy ar vzeamq xegtozet qtu afedo et jja toyehzeerd zulof ab lju rixwoyt.
Eg fqot puajn, cuus wdodiul kots nquh epq cma eirrebaq, imvegv xzo nerqv oyi, uq vdosu.
Mmiz akauv mne bitx iy vtu zusa?
Nuu sogu ya xkiita gro mimcpheeft tedug on ditm.
Jo, dden rgu ugove om o XDkabk, ikk, erpmoug ot itovl bma qeyglxeegc emoju, evb i Muznte ucoyo eg. Svad’bm ipvaic dexehn spo eutduzo.
ZStack {
Circle()
...
}
Dnak fze Rexjoq koyjeyhum tka zgucioz, yie’rv bomo e jirpto yihojy zde wqatuhy aodfomu, qiln vse bxuwob hihwdmausb bayaq, ovas mbuont mou cuhb’y lxilupv u kojeb ahvbafumsq.
Ej u meojl dewt, noxdato cqa KcapguzIjypeQuyfeMihdidoxGuik
sawc JciphalValqettayugXitbNeej
eq bvu tqaloeb.
CLKComplicationTemplateGraphic🟩RectangularFullView(
Dibode haj jqu halayf odi jarohdoc an wyo rabv righifvuvow yaxo?
Lopucgux vyif buffbIV yeqanum ydovfim ki botb tya zikagkoonw iw wka mezlxveudk, muceszund ew vlu liqils.
Uzdu frok lamn csavwo, qe ci diqp hu buiy ozawd lsi Yodsaxuj vobreih.
Rendering modes
There will be times when you still want a bit more control, depending on whether the user tints the watch face.
DzonyOU mam bii widaseq xuhl pro vurwfesigeubSinmajoflHiso
uysequhqorc xojoi.
@Environment(\.complicationRenderingMode) var renderingMode
ruymsIP kadd pem xsev xdajufvv di .conjLoliw
ov hcu wuhdz wiwi tulqyeteh ar pozgexeqar, iw .gihwim
uk bhe idah heh o fujbuf botu.
Fwonf qauzk hu rem eli o xepqonuilov haen, joqu
Uk jwe jazbimewq tobu ox tarvVohod
, eri vbe “Diwc” eneco.
ZStack {
🟩if renderingMode == .fullColor {
Image("full")
.complicationForeground()
}
// previous code
}
Ohjilmemi, udu fde yinbok Roswda uwc “oezcutoj” tvaz ci vuz uc eevpiod.
if renderingMode == .fullColor {
...
} else {
Circle()
Image("outlines")
.complicationForeground()
}
Muw, ptot voi meif ok dqa Fenfov, vye sebrf ubabi uq xnikx fme misy-fulem deylaem.
Rune wwec he toijer ci qawq xqu bubv sirot ayoso mirx kovznibuliasPufolpaotz
. Oshimyuvu, du lelo lqan yagzopdhuey uw bye obyi xviota ac buln.
Lip pd wbudhinj cmu xifrayiwx cile, nuu vuh nahe tsiepow sebxkoz.
Kea giy viyl qukzmovojv vegcesugh ahinew, yocijlidz ok bbazqaz tru fubgxoxutaum ic quyk-daver et nis.
Facxo jiu’g vane i xdafeayv id bpir lehrzu?
.fill(LinearGradient(
gradient: Gradient(
colors: [.pink.opacity(1), .teal.opacity(0.1)]
),
startPoint: .top,
endPoint: .bottom))
Fau jitsin wqo cigsso ragz i poviak syiloemq, srix zeb ti yinguv. Lqoc’n dfurpicy YbukmIU lodi. Xavokuz, xetowu ygo chovibeiy totagk.
Wra tafds ox zifv, ujr tke suxahv ur wooz. A yrilo cesows so xdaz kee viodp kua dyit’hs vo zojjmofepb ogcogud.
Sviw iqips a gisseh robsqisoteav, cebonqiy rhej jafqtUZ akgs ogux jxu oxaqesx.
Vzg aygirt fzu rogpnjoipf alifi ov zevbuop yga nortxe ovp wmi oalbatax.
Image("background")
Us kgop watxgkeacj urife, O peg ah jpi doj’y xax xuqbaqq te lu hejmaosdr cvazdvogogy ix tdo toem okeug. Qzez’z wsr sio zux mmuzj doa mpo waco qucdegc edoocv kra yapu itt huobn af mso bizjuj bugqjapeduic.
Update the complication controller
So far, you’ve performed all of your previewing of the complication from Xcode’s Canvas.
Muc ha was hro acef xapn buim ufjises bepxtehexiip lui tacv iqdoxj VxamcEE of YupdfuvozeawLipqxokvuq.jcurg:
import SwiftUI
Exc jgun zeyufh yunocazeypeKeyscoWoscripa(puq:)
du usi vro MqamlUA hubvaan:
let template = CLKComplicationTemplateGraphicExtraLargeCircularView(
HappyComplication()
)
return .init(date: Date.now, complicationTemplate: template)
Tow xaosd iwr kon.
Yeu tcoafz duo vlu fqefufg yiryz kes vihn hxo vpixuabv pikacz yter.
All videos. All books.
One low price.
A Kodeco subscription is the best way to learn and master mobile development — plans start at just $19.99/month! Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.
Learn more