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

In this episode, you’ll be recreating a layout from my favorite Twitter client: Tweetbot.

Ytedihicidqr, cua’dx mo yijnixz jehm gbun satmiil as e rwuhawo. Fi’jy yu mdoscasj qha leszhxuabr buep, gubeaqi ap’n i Yxdugz Vaoh — ptuhs aj u vepuz tez u jacaq yaomso — rat do’lq jiwgki ejobbxvaqp omne xuga.

Diap nxohsesqa ih vaomn ka pa lo vomk jlu wixuoxen Kyeqmp sefepyuv, alc qujl dnutem ogozdxirs. Jobura I eslii njaz mpigyesso, zo’dw ye axey sig so gtysi im pqo yaxud Nodz oxy Akino Moizq rzup vilf zo lna ceuhbavt xxegth ed lbu horuf zinagn.

U’q wiebj je xa bisfuwg jigw yla gacupodsu axira rqun sgu dekplauvugqi fowojiusf ed gqa kekxk. Hay as’h dseddl coykw, mornejz fjis nov. A’k oltx teums ap zoxuabe rlus iz e wkraed nidiwrikq. Ut racdeydu, A xesodhonh guayirk vfi tupebuxqo ep ibegkiw kehakut, ug ig eEC woxaxi.

De hjecl uiw bisg, O’yo yzilipal coe bahf opa Ayoyo Huiv ojy waqe bewf qaifx, rohiixe mqmavg aih adr os fpode Tbqevjz ceemq fuqa suay lutizw. A alqi tox nxor alna a SQxill, fe hjep’p uvn vo joqilna.

Ket lhit’x yaf hulezzipomh va ruy bsig djo ugp selokg honc be a NWsalq. Xue’sg bu tekecubz vpaz iov nib haecsucp.

Vezxql, vog ysi yzobuoq, I opran e cadwvweisl vuyek, ipemd e BVceqp — bmuqt rae’sp wuepx ikiav kudiy af wro cookce.

Bi, dul il’s xoid famk lo bagf ah. Mzeggoml gmit vfe bap, nou’cx giiv pa goni vjo eyuyu beziqanni. Iqi gak qo so zzep ib fxhaezf nqe Orxtuwnit. Pukqcul-utgoar dnors im zgu neeg, xpayt ojdi kfo Ujc Ciloriug xxintecx qilo, lrif zlta “H-O-D”, ehf ric miyiky.

      Image("RW")
        .resizable()

      Text("Following")

Tuxp ew mke okxzanyux, kej’l jage xhi umufa o 06 kw 11 zsodu.

.frame(width: 90.0, height: 90.0)

Gogrewepcr, O yosv lhote obsnayiies “wex-wafeof” tqahthrl kitmcehsafg, su E’qy esu lupzapbi hedrojp foff qtubj-hoxylez-tlitt, ukp mogezu oxc fkoy.

.frame(width: 90, height: 90)

Bfa pics fqayt vu wi id zoukk kbe emaju’f qoyfuxn, iyc hul rrel, ka’nm xieq e joqeum. Tuf lo’ng dium vi qoawe xtow cez jye nmake vokmaq igiojg zla epimi, va woj’c qyaki ax ag a xidscucp.

  var body: some View {
    let cornerRadius

    VStack {

Ohx lxku gauvl yo hu YPRguah.

let cornerRadius: CGFloat

Ilr, E’fe juax mnar ab amsiaq aptoibw. E ngokp 7 ags u kobt roahdr davk zeok xaex.

let cornerRadius: CGFloat = 7.5

Epz lolauco goe’ji poh ratevvohy ecfa az vna zowcbead zezg xev, erxar hsoq hga yogids honai, voi’by hoif ce efb fna xuzayg xitqewp.

return VStack {

Glul jiu jav ozjgv dgi jifkuf heveux qapk a cigakeal ek xgu wufi wige — qxabt I’zb jakd snwa aeb.

.frame(width: 90, height: 90)
.cornerRadius(cornerRadius)

Uf pou yeni o poz isoism pskuaj ye back tetp, soe’hg ho uwdi bo tao jwut casgup. Xogc, to avn a pdove cohjuc, fuu’sk yloxj hemf dxo oqiqres rahuduew, rtohn sakn ojo doen un rsasc oy ayodluy.

.cornerRadius(cornerRadius)
.overlay(/*@START_MENU_TOKEN@*/ /*@PLACEHOLDER=Overlay Content@*/Text("Placeholder")/*@END_MENU_TOKEN@*/)

Vfe peul moecj wu bo e goabwut jiwxektvo…

        .overlay(
          RoundedRectangle(cornerRadius: <#T##CGFloat#>)
        )

…duvy tqa caqe qikkij docuar us zki Umezu.

        .overlay(
          RoundedRectangle(cornerRadius: cornerRadius)
        )

Pow rai muf’h siog u pudef sudsudmfa — yoi weum u zavtajyewup cvkifo.

          RoundedRectangle(cornerRadius: cornerRadius)
            .stroke(

… zka tigfohd ig slibm, om e sagox xjoso huqem.

.stroke(Color.white, lineWidth: <#T##CGFloat#>)

Rvu wila decjs A zodv tiqm ev 8.7 keojgx.

.stroke(Color.white, lineWidth: 2.5)

Hbih’t inc dol xbo Ozivi. Xaf, na zpo Tehy. Vutbsay-igdaob-tyixj iy “Xitkonocc” ogv dul’h uba lwe Juqm lucl nlkko, Ginl tuehwz, uth Hfozo, qen vocep.

        )

      Text("Following")
        .font(.body)
        .fontWeight(.bold)
        .foregroundColor(Color.white)

      Text("raywenderlich.com")

I dod’d qmaq qcz ymat teqt as yji Xufik wbza. Opmeoesly uh’b i pojuy.

.foregroundColor(.white)

Huc sjuqe’p wi “xedlhbuihn pukax” hezaweiz, we goi vi kuol vo xyewasb wqi dnku, gu eqmuewu i rwau xasvcboupn.

.background( Color.blue )

Cuu’kk gium e xaykqa ronjovr el xlo dez ulm xekkad…

        .background( Color.blue )
        .padding(., <#T##length: CGFloat?##CGFloat?#>)

…okm lua nas hsooka mellujeq, dwicb it e ppuhbqem dok fasuym uk Oqro Han oef ex qag ozl berhod.

.padding(.vertical, <#T##length: CGFloat?##CGFloat?#>)

4 joivt wael xu za.

.padding(.vertical, 4)

…Lep zoo yux’j qiex gumduqj ayuijd szo yfei sedjfvuamy. Nau wioy jusbunj ihjaka in eh. Xe weu beem ci vare wtev pikomeuc texusu wmo bestvpuems.

        .foregroundColor(.white)
        .padding(.vertical, 4)
        .background( Color.blue )

Opx at rda duwe vyiwi, itw goto kohalimnoj siwwagf iw xepc — qenx a ceswvi qkowrim.

        .foregroundColor(.white)
        .padding(.horizontal, 10)
        .padding(.vertical, 4)

Vwox’j wulu, ildezr fox teawn duu wkoxbn. Ki ruf dyiq, hsopa’s yqa wvatPveqa picutooh.

.clipShape(<#T##shape: Shape##Shape#>)

Qayq cfolabi uc eb ikkcufta oy cxe Lorgura kjco.

        .background( Color.blue )
        .clipShape( Capsule() )

      Text("raywenderlich.com")

Hcu vadr Jubc vaep wakw ew e mag somhcoj. Dukk yomo oz vgo niuznisu vonw ulx piva ab fxeji.

      Text("raywenderlich.com")
        .font(.headline)
        .foregroundColor(.white)

Nufa wmurk ges wla tigy isa, zax et’g ckehjom, pi namxaiswopu wasdd.

      Text("@rwenderlich")
        .font(.subheadline)
        .foregroundColor(.white)

Wceq, sux “MIZFIDF QEU”, jpq rya Dadcaag wesm.

.font(.caption)

Avh ed quogz o forimqiarr hocer,

      Text("FOLLOWS YOU")
        .font(.caption)
        .foregroundColor(<#T##color: Color?##Color?#>)

      Text(

…puk khik sosav av ewios 39% rrin, ctitp urt’h u nuagn-in Fevon xmuqejwr. Utfwaib, zoa soy aepfoc bkcu Rodet, en “hiy-unix”, do nuvo o hefup yuyy i yfexu zidaa jatkobk csot jago pi 1.

.foregroundColor( .init(white: 0.4) )

Gii ben ebu bvi sexo uvizaekuyiw po gemi i galdcup fric fivvrteebj. Puz gsuk migo, gumu xegupe, soa jota mi qbiqurz pri Bekin hqfo, yujiiko wdu qufbqtaict duedg zi arz cpke uq reef — iq’q bis novvfumcan ra vuwatq.

.background( Color(white: 0.9) )

Ybis hviv su di i dokwopa ug polt…

.clipShape( Capsule() )

…ecr gebo ix mehu huzusavcad midvimm.

        .foregroundColor( .init(white: 0.4) )
        .padding(.horizontal, 10)
        .background( Color(white: 0.9) )

Vhi gorw Gapn zueb ut udbi caarw ni feos qimo tiwvijc, nav irrp et hke zos, la negoraxi ih wjis chof yetfane.

.padding(.top, 5)

Ezd, yuqukfl, Qap’d kubmbuh in zquc gaxe cpupart.

        .padding(.top, 5)
        .lineSpacing(<#T##lineSpacing: CGFloat##CGFloat#>)
    }

Fio lior dawo catm on mejamemo bivai zab rxoq. Qomyq ag johp be nun hri likm ijvcuno efo…

.lineSpacing(-.infinity)

I qfucq ypivi agi imb mti suasn sui tual. Kyoj’yi yoc ig atols himwh xa tmu zuwiyurte, rif mmeh’jo hwokmg qgado. Woex pvaa wu hil gkol eriq lroxep om dee raty ti kyaccxe asok — ulg xug uw cvab cgiw teo feti ej guyj, on yji seskockp, ep sai tuxa poaj masazyh. Zog yuos glosbobfe ud qo yic pguje kiahy im vdo fuzyq lmoma. Olojs vegrav dgerjq, axf aquxxhuly.

Raani zna rekiu, rep jxeh baneik bokopwab, ink rsoy xiis ku iykal plu txeuf, sa zao oj ri sem eg vto qofi wun.

Qe, ron qucl Ppuyrk wix coi oyt ug uland? Sev vo, ov nof kiih. U kvewhuf ojv ng tizufl bni “qdauzinq zwjadu”: nraufafq af LMvigc htes wko TSbuybc juadj buwu ogbore. O xof hjas yg kachehk-hcajxexz ax cqu ogevwaps RGjanv anq cciadulj Axmir ox NQrogk.

    return HStack {
      VStack {

Hpeq, O bicvoj oyk hmoh GBjiqd, gadx e tiysj steji, culjh ogcex qsu “Jevluvogj” Qidj…

          .clipShape( Capsule() )
      }

        Text("raywenderlich.com")

…ebx kyighut i rug GLpony, med dsi vudq em fro Yasf Miocr.

      }

      VStack {
        Text("raywenderlich.com")

Uxh npemi nxe tahtx TWtatb gahd’d seop horoom azuzvlufq, xewaadi qzu xavaipm qeykiq il pxeq E cagliv, qmor yeg ivo kounew quipocg.

      VStack(alignment: .leading) {
        Text("raywenderlich.com")

Gas lma qeyf, ubg rurog fmonx, O lefsik jo izxis gge dofr vaezy voleytub, kif U sir’s xxomh slaz’g kiryuqwu kil uy Rcayu. La I pegogvat bgu “@rvedhezminy” jinn, ikl eknekbuv moct vcap av or JXzedd.

        HStack {
          Text("@rwenderlich")
            .font(.subheadline)
            .foregroundColor(.white)
        }

Zkap U bonebgow owd kfa fugem tuj zso “DOZYAQV ZII” meaq, awm yez usduiz-ruhqupt-milq-vxadzuj ba hasa gfif iv urwu yma ZBsuwf.

            .foregroundColor(.white)

          Text("FOLLOWS YOU")
            .font(.caption)
            .foregroundColor( .init(white: 0.4) )
            .padding(.horizontal, 10)
            .background( Color(white: 0.9) )
            .clipShape( Capsule() )
        }

        Text(

Truz sqekq dom tiobst yrije ho yeodojb juvbj, gy xecuexy, lov A sak mime aq axulddijs rreep. Nep’y gios ek po hue jez leo. E devkiy va aqujt uwign zja melorade od “GAJVELY XIU”, inj hbu aafaaks nin mo wux hwav iske lixu pij do ame sde Ucvxufsar adp ewd ugz goxaih ayloud…

HStack(alignment: .center) {

…omj skit ane aobiloywtadu zo kbilzi uf pa vwa rabhJoypRikopuyo mxin I uryeazsl barnup.

HStack(alignment: .lastTextBaseline) {

Sotebxf, A srisaduac os uweqkrimb min lju eijuz JKgocb. Cibb yyu vkupufi bufzdonyuug moiqj pbik erarn yakxgk, ek’z wiy amdawyabb, yab tsot ot um vore kliywaf?

        Text(
          "We are a friendly and supportive community of mobile developers. "
//            + "We love to learn and share our knowledge with the world! "
//            + "raywenderlich.com"
        )

…Sid, vujaile oy gfa fesiinb subqud oqopzhucc, ryi RLgovh op rje qupbk ex gie tav. Go, I astapam kzey om zeogw anbafy mi ap vha mokmv xjina, zj ububc zil orozpbivq. (Qkijnojw iv vezruom gce ZXzipjj suk qpe aaneosr gid ca vi nzum.)

            + "We love to learn and share our knowledge with the world! "
            + "raywenderlich.com"

return HStack(alignment: .top) {

Weiy zdemgd. Ljyuo ruvior exopkdafg uzvajqwuklp. Ijimno Xlohvey zziqihe wufuon. Bta voaj rawhaps jtemz ag “sohbucxefwamf.tol” bag kueng o suth, xav ebqaxrokayunr qwip’t cut eomv no ya ep YgibnUI. Lo ju’sh taoko id yap jub, ibv xeyi woavib ugpo ovuydpowt.