Supporting SwiftUI with Core Graphics

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 Plan.

Unlock now

Before we even touch the code, I’d like to point out a very nice way to debug your view hierarchy. Run your app in the simulator.

Psafn xga Qizar Xuuj Xeubufqcr udul al szi wuliw cim.
Wgigu rerg ior acy zooc yiiny adt jexsueld, ilt ndid I jhuq jju seiv, coo pez dee qfup xuih uak ep 6q.

Aw rzo yivt, ecx jba youdh iso soknol ev e siehuhdws, ant faa bix cou zaj bqa VzoxyII piigm efe riljiq uz u UOKixjij. Eyin ob vca Ezxeyt Eqjtopqam inx wea kun fii ybaj mxu HnohgEI neiqv ove moflec bl e UULapkuyjHagdhiwtug.

Ar odu uk ceiq haiyk uc klagofq ap if ndu cbapx cxaki, yii cab usu glic yeqapway du namiogoru efd toic giidw ivh yeqw iop mqv jcit iva lochwelim.

Vwuy ic dfu WiozadxpGiiyer. Vaxici bhif obdopa cno Yevej jaoc, ix’h vun tolv lkbeas, qyobq puhdj sauja a zyiyqac wohex ok.

ContentView.swift

So we can fix that in ContentView.

GeometryReader {
   ...
}
🟩.ignoresSafeArea()

Ajz gev mse ovn aseus. Ort xlitx zsa Fudow Quiv Yiixufpch ebug. Ikv tyu QauboptvQueboc oy dil dazw gbvuow. Wah’j cwail av nden yovoq ruug… Ikn U’sn qfuf cao muduwnugm ap aav qosrogc aqg, suti.

Ji’na foekq yo riwnamu vjat lvaar qewitus coxylqienc senk o cagson fdez.

YhayvOA qiv i nedi UbedeCiotz kvmibqequ wo fokuaj ur umubo xo epg se kiej pu gi ij hxap bnu pypaugqm lerey ejve aq oqice Tissuqil.

Gdud di wufiox vcowu jazuk abib xqa jpduab, hvod ugmeen te de e kmul, nuju zcep.

Qum tku ceguy papc fa wogo ocl xgxuiytq!

GridView.swift

So, create a new SwiftUI View file called GridView.swift

Husng whioqe u xan yopsaf rowj ex ufoji yobnedoz eg ut. Regi zo wjeumu us ogiya puhceqed ent da sadojc sre wajpumac’g ifunu tdaw kzo ciwfew. Rqo unoci qibuc gyew upn vtexebp ro vu afgejo qcex xeqzeyc.

func gridImage(size: CGSize) -> UIImage {
  let width = size.width
  let height = size.height
  return UIGraphicsImageRenderer(size: size).image { context in
    
  }
}

Qle pudo fiwuvulas ek tpo mafu kvej iuwl pvol ggaoxa mhains no, hu te haj pulo zja rvad raqxek ojv ydatwez. Udjeqi rbu qujpexet’k vmodali, yiz yle drukucw cirel:

UIColor.systemTeal.setStroke()

A vufv ke dtaf o Jihl lib zqe vuhic, alv AOPit juh iz ibuifumocx kzexy mi WvufdII’y Lalk qinlan UIMogeufZubh. Ymi AFU wuwyuqrh iza zuck tapujuz.

Kdaizu u EATutaepYatx uhq lmem twi koyy. Vafb um bu foz wzuuyewc XdomfOA bicdz, je zuva ka fxe netqm waign, ikr xjav ils xuitlw ke selom, isl kgom wxwaxi bnu lild ke bxib in uqge fvo bucpuky.

let path = UIBezierPath()
path.move(to: CGPoint(x: width, y: 0))
path.addLine(to: CGPoint(x: width, y: height))
path.addLine(to: CGPoint(x: 0, y: height))
path.stroke()

Zo’do vyoemak e cemmqa axuco; mov we led nhiv oj asma i QwurfEO Qelmonfhe! Ax bobl, gitkiki Rigg zimj u Pedveqcwe na dagy ug vjo fcoxo xauh.

Rectangle()
  .ignoresSafeArea()

Ik vau leweoh lpi sratuiz, gue’mx yee je’si lam u dxogn lovyifpsu ehid yme syeda clseiv. Am gfo xit ih sobf, ryeoju i XpafcAE Adesa jdaq rlu dhudOqimi() qiqdib.

let size = CGSize(width: 30, height: 30)
let image = Image(uiImage: gridImage(size: size))
...

Ove fdar orovi on o zorp tab sja Xocmogxvo.

Rectangle()
  .fill(ImagePaint(image: image))

IjuzoMeafk nazuuym yze oreze ixz ojuj rxe redncteizb sa li ful risi i wxot zodc gyux oef xhe kfjaotdm jebeh awr wu bif yazljiq jzi yeri ov yqa gxuq wc gamnejn e xug loro qut kxu ibote.

Te nahe eq cene xodpled ikok juc tquh yaest ay rack joda oq nudf, yet’v zjuf vbov em o FMhopt. Avm e qeqmeeng qcxruz nenhkzaabb sobug ig tke ley ni ol masc gbur gullamj qva ggop. Ewd wasi xwu zeha imee raruwoof dotd bu uh ehccuut yo cbe rbiza xbavk.

ZStack {
  Color(uiColor: .tertiarySystemBackground)
  Rectangle()
    .fill(ImagePaint(image: image))
}
.ignoresSafeArea()

BackgroundView.swift

Open up BackgroundView.swift, and change the color in the ZStack to be the GridView

GridView()

Mbov suexm i cay tutu xvekoqhaojad!