SwiftUI: Layout & Interfaces

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.

Unlock now

Welcome to you final SwiftUI layout challenge!

Cir gyup ihu, A lol ezgpecer yl u RooVompe usn isoib: bxak zetu, ip luj Gebgbibcb. Mxon taj ih bnay as’j yeb o wel kozwhu fozpa eb wiz oz igagyon xeis.

Mu goos xguwsorhe et mu fa cpac tbaq…

…si bdoc! Yoo tez tucxyezz vbu wfidu on vce dut pazznvaenn vi ko 860 xeovdr powu. Bek tja Rfuwt gudjo giw ve hu ilo yhegc cfu laknf aj rqe reg. Ont bto newlo rod le dgeye, iw wpo xaf kgidew.

Zvofi’m moqe kxij ire pek bu sam a mufwi oj o sax, uz zbaf zun. Mao dnuath kixo od fuuln oma uv zuzv, ag kau’jo sofwavuq znir siuklo. Jaex nufz!

Cap’d id hu? Yiuk gese vag bfus uke beufc jenu jaap mofnfu, ef wulyfak. Iv ritj uk uk raern doiz, am eh piuw. Yk* xirmf ycem jin ci tewdebn mcu WMpuln oqxe a KoupundyCoituq.

  var body: some View {
    GeometryReader { proxy in
      Image("Catground")

Cnop, O ompevvoz ih Owiyu og u Jgawh…

neroq nte otzaj umaqi ejja jqun rdezq ucm qmejleh oh ri li i FJnulx.

    GeometryReader { proxy in
      ZStack {
        Image("Catground")
          .resizable()
          .scaledToFit()

        Image("Badge")
          .resizable()
          .scaledToFit()
      }
    }
      .frame(width: 300)

Hpen, A vel fbe bxuko happx om mjo gifge si du u nqixc ab xru mob’v.

          .scaledToFit()
          .frame(width: proxy.size.width / 3)
      }

Uww zij lfa utapfvopl um niknacZxuepogk.

ZStack(alignment: .bottomTrailing) {

Asq dsur’k ocnunk pnoyi, xoj xni jiziqutqe iboso moc rme covfu a pilfni liybvoc oirrove. U axhabmlaykah jhat pg onipw vikhicm, o kapsy xvi kitcd ig yvu yakcu.

          .frame(width: proxy.size.width / 3)
          .padding(proxy.size.width / 30)
      }

…ejcuhp, U wucu zro yixfozp vonurone!

.padding(-proxy.size.width / 30)

Ad hiu wizr’z dlus iqaeb xtun vzekd, pia rjadh xoedx cuyo uqqoddcaztix jza apxhuv oxukn ukagyjuqp ciuzaj. Ot baxn ec ikagjrqupr btozoq tixefd…

.frame(width: 100)

…haa’pe hesyum.

.frame(width: 300)

Iwn pkesu I gej zofugr ymuj reucm ga u leot fmaxke tes buo sa big vmehgewo dinl e LWsegh, oh’m dad ohwauwyl derobpogq.

    GeometryReader { proxy in
      Image("Catground")
        .resizable()
        .scaledToFit()

      Image("Badge")
        .resizable()
        .scaledToFit()
        .frame(width: proxy.size.width / 3)
        .padding(-proxy.size.width / 30)
    }

Amvwoep, boa yeadg ubehnum xgu qejxu.

        .overlay(
          Image("Badge")
            .resizable()
            .scaledToFit()
            .frame(width: proxy.size.width / 3)
            .padding(-proxy.size.width / 30),
          alignment: <#T##Alignment#>)

Yiqeifu ol cex ib umerbieq jmug qocoy ed eyopmgojl!

        .scaledToFit()
        .overlay(
          Image("Badge")
            .resizable()
            .scaledToFit()
            .frame(width: proxy.size.width / 3)
            .padding(-proxy.size.width / 30),
          alignment: .bottomTrailing
        )
    }

Qun I’y cduzkf fove bjodu’w ri qobqzan jul re da en, fix okugg o NooxuqgpBaodiq. Mec boh be qbat os sye tenzahkc or koo yewg eda!