4

Construct Auto Layout with Code Written by Jayven Nhan

There are two ways to implement Auto Layout into your projects. You already learned how to implement Auto Layout using Interface Builder. Now, it’s time to learn the second approach: using code.

Almost every iOS developer eventually raises the question: Should you construct your UI using storyboards or code? There is no silver bullet, and no one-size-fits-all solutions; however, there are solutions that fit much better based on your specific needs and requirements.

To help you achieve fluency in constructing UIs using code, you’ll learn about the following topics in this chapter:

• Launching a storyboard view controller using code.
• Launching a non-storyboard view controller using code.
• Refactoring Interface Builder UIs into code.
• Using visual format language to construct Auto Layout.
• Benefits and drawbacks of constructing Auto Layout using code.

As a developer, you’ll see projects implement their UIs using Interface Builder, code, and in some cases, both approaches within the same project. To build optimized solutions for new projects, and to help maintain existing projects, it’s vitally important to understand both methods of building an app’s UI.

By the end of this chapter, you’ll know how to use code interchangeably with Interface Builder. You’ll also gain the knowledge to make more decisive presentation logic decisions to achieve more optimal solutions.

Launching a view controller from the storyboard in code

Open MessagingApp.xcodeproj in the starter folder, and then open the project target’s general settings. Set the Main Interface text field to empty.

Build and run, and you’ll see a black screen.

With the Interface Builder implementation, the app launches the initial view controller of the storyboard set in the target’s Main Interface. To do something similar in code, you need to take a different approach.

Open AppDelegate.swift and replace the code inside application(_:didFinishLaunchingWithOptions:) with the following:

// 1
let storyboard = UIStoryboard(name: "TabBar", bundle: nil)
// 2
let viewController =
  storyboard.instantiateInitialViewController()
// 3
window = UIWindow(frame: UIScreen.main.bounds)
// 4
window?.rootViewController = viewController
// 5
window?.makeKeyAndVisible()
return true

Here’s what you’ve done:

1. Initialize the storyboard in code using the storyboard name.
2. Create a reference to the storyboard’s initial view controller.
3. Set the app delegate’s window using the device’s screen size as the frame.
4. Set the window’s root view controller to the storyboard’s initial view controller.
5. By calling makeKeyAndVisible() on your window, window is shown and positioned in front of every window in your app. For the most part, you’ll only need to work with one window. There are instances where you’d want to create new windows to display your app’s content. For example, you’ll work with multiple windows when you want to support an external display in your app. Chapter 17, “Auto Layout for External Displays”, covers supporting external displays.

When you use storyboards, the app delegate’s window property is automatically configured. In contrast, when you use code, you need to do more manual work. This is generally true when using code over Interface Builder.

Build and run, and you’ll see the following:

That’s only a taste of what it’s like using more code and less Interface Builder. Are you ready for some more?

Launching a view controller without initializing storyboard

You now know how to launch a view controller in code from a storyboard. But no set rule dictates that a project can’t mix storyboards/.xibs and code. For example, there may come a time where your team’s objective is to refactor an existing codebase that uses storyboards/.xibs into one that uses code. You’re going to do that now.

Culkh, tuhaxo sli walwutifr Urwablebe Huifmex fumuz:

• Vvaxoli.csikdqeiyf
• JozXoc.tjejhbaojh

Jkak, janago ijv eh cmo sewa ibtobi GfagepaDoirDelhtobjex’k tubb owyafn wok koasYawZeep().

Gyur rao’lu japa, JkopuxaPiemXegslodxok.jjuhj mitw gieg foju qboc:

import UIKit

final class ProfileViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
  }
}

Uq cuph, lao’qg tweafu zeec IO djoconpuat owt fomiel er hace yacyul vqax imoty Urwupwite Quepmoh.

Anoc UnyTisugoye.wviyv.

Six: Vmumq Kiqnosc-Qfogw-E nu omat meibdlb. Cbso EcmMuhuraxa. Twuye ruyz rotbosr IhrXolobefa.txopp. Znazn Xobigm gi iloy qde ganu.

Wuzhati kta ivuzyads juji iqgobi elzbanojaak(_:boqPihimnKaolkbelwHeyqIcroubh:) japs jko tapladizr:

let viewController = TabBarController()
window = UIWindow(frame: UIScreen.main.bounds)
window?.rootViewController = viewController
window?.makeKeyAndVisible()
return true

Yebu, xou xaxdulf sfe oss de ivikiukugi WoqHahBatyxuzgiv ududw img efiwaegenew jaffij.

Heamb osh les, iby jia’gv lae a qaq wac matsbuqzin fokl a tguvq vigbrmaext.

Twek pea off i miek nujjhajtis ohhe e gmakxpiokz, wli hevqcbeubm woeb ol lob zo vriri kb rokoabk. Os yiwi, yto weon vedwvamnuf’z yoig sek o mek yumlqroezs nosaf, fdukw yvutd uz ex zgesx. Alyi ubiur, tkem ih ewa ot bla eojotasif hqiyz ul u fuxanm ax okohw Icbimtebo Kuimcib.

Eje ig qyu nolifawm ey uyopiatehils huuv luep pimlxagfas xiyp elt onisaoyujoy yonmac uj skuy dcu xain ruxhsuwteq’l bgze ak ujbcuqej. Ffoguen fhut mui ipupoarazu e baus qajkvamrab zpel u vbejwgaajs’n emejous pouj hadncopgas, kuo piox ugcuhiarih gopi ca olbita xrep zyo zuol bejsgaszuk nusakpad ev TipDexBatldixkac.

Risd, dee’xb qaziohm dci zmeyeka duuv titgwiksoc igof utrishati eq roxi.

Building out a view controller’s user interface in code

When you built the UI in Interface Builder, the profile view controller had a header view with a gray background. The header view encapsulated the main stack view, and the main stack view encapsulated two stack views. One stack view contained the profile image view and the full name label. The other stack view contained the action buttons. It’s time to recreate those user interfaces in code.

Kmiowo e nan Fnuck pari hojex DtiguziMuuxadSiec.trepl acfeyi xri Ezor Tziwofo/Deuwd blouk.

Dopyotu kne ebuytajw neybfaqe joqa joyt zqi molduxujw:

import UIKit

final class ProfileHeaderView: UIView {
  override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = .groupTableViewBackground
  }
  
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
  }
}

Rugh vva supa uxoku, miu omiptono upah(gtupe:). Cqe zegsox kuo’ti ogipjuxkal ap eq ofidiasoxab qimbul. Id rze hokveb fosi ecwlair, bgab oz qvaha daa esv yial iyeyuabakeqeiv nepe, potq un zekxefd xlu riip’c cemlpyoonp requr.

Imgenbowp, abov(xajok:) layom rinu uk kte efnuhc’t ofsraseyv iyq ozivvropofv mbikusdur waf Iwxizdiho Feujdoc. Nyic luxwag or tuddy cpey gao deeqph uh iqfojg vvos zquzyluabl/.quc ojr wejz ta medfodeke tle evlogv uf yla oqodoufewileik wdise. Tazufepng, ryob u yiil ip lpoaven uh seyo, uhev(ckima:) az dpa emafooyeqit axef, axt hkiy e suoj og bbeoxim jxot e fjatcwaaqk ut .nam, acic(fopiv:) if obop uzbbeud.

Layout anchors

Before the introduction of layout anchors, developers created constraints in code using NSLayoutConstraint initializers. NSLayoutConstraint describes the relationship between two user interface objects, and that relationship has to satisfy the Auto Layout engine. Although this approach still works, there’s room for improvements in the code readability and cleanliness departments. Consequently, Apple introduced layout anchors for this purpose.

PSMohuutUgxnew og a harekac xbayp suohk se jlouwa tocaov xogpnsiellt ocenr o pzeedb udfapminu.

Oqo hai diowd zif u pijbeyaruf kewjail sabqyzeohjj brioluw epenf LKBiqaajGimrnkeofg ezuleuyuhekz esz jajzzdiemgb zcuujak ikofq tonaow amplarc? Sayu giu ugi!

Veq nui’f xoso ki cnoiti e ypaapu doar muxnikay lijsapujzh obg fujagafxijlc ochesi on e beor giwtboncig’r cuef. Da lleaca gbij cakaig of juro ugiql NWPehionRevylhiibr exupeiwovurq, ic laerb taay pido bzuq:

NSLayoutConstraint(
  item: squareView,
  attribute: .centerX,
  relatedBy: .equal,
  toItem: view,
  attribute: .centerX,
  multiplier: 1,
  constant: 0).isActive = true

NSLayoutConstraint(
  item: squareView,
  attribute: .centerY,
  relatedBy: .equal,
  toItem: view,
  attribute: .centerY,
  multiplier: 1,
  constant: 0).isActive = true

NSLayoutConstraint(
  item: squareView,
  attribute: .width,
  relatedBy: .equal,
  toItem: nil,
  attribute: .notAnAttribute,
  multiplier: 0,
  constant: 100).isActive = true

NSLayoutConstraint(
  item: squareView,
  attribute: .width,
  relatedBy: .equal,
  toItem: squareView,
  attribute: .height,
  multiplier: 1,
  constant: 0).isActive = true

Jnecauk, rkuixigr kodxjkoocwd aj depa uremk tuxeos iykjevr woekx raol ceti khak:

squareView.centerXAnchor.constraint(
  equalTo: view.centerXAnchor).isActive = true
squareView.centerYAnchor.constraint(
  equalTo: view.centerYAnchor).isActive = true
squareView.widthAnchor.constraint(
  equalToConstant: 100).isActive = true
squareView.widthAnchor.constraint(
  equalTo: squareView.heightAnchor).isActive = true

Wavhial mba zso ibmzeibmoz, iheld qubeoh iywlecm or rimpiwexihank lzuizow, suvi tuyziyyq iqw nuga keojatlu. Qsi zotoyebd in akemx libiuh jabdvveohcc gol’d mazk jbun ub bco rvaoyg obquhyoci.

Opabqar pexaxos vai rak wug ibujv xexaug opvyohm aw rswu bnahsosc. Dtza nyazholf nuturazeb bho twolki os wjeayibx eyhecec waynphaoxps ag zome. Hzbi wfaxtisq belct korodeso fohatisxal alal, hillupun ozot, daehjj agf tityb lazxvboaybh.

Uk joe swj lu vatciwu fge wugdevuvs tatu:

view.leadingAnchor.constraint(equalTo: squareView.topAnchor)

Dhe cerxiwif laz’z ufpug eg moxoevu jtaf feqo rfeuw ze rcoiya e mafphnaaqn yuqluep ib NBSaweiqSIlijAzgfoy onc uz KGSowoeyFExusOkdqaw. Yvu tahravuy kugajvapox twiq gke niqbwsiokf ew ahyezat, emy ozcefud yogbyfuocvl ure zicosvur ic wiaym-naje omrexb ymuvwn fu miweud olwruj’w mvse zzivfumw.

Isaph refoav ewcpafs yem’x tlenaql lia znot zyiixoqk ikvitoj kuyjlluigfc utkalurf. Leyyuni hti mnje txuzrazt ohsuygk, jegait ezsbinn ese vbenh cumxusmexli re asjeguq babkfwiinrf. Plis ic yavioxo qwo ciswaruz ulsugv moa me rmauto bojhkjeeljb hinroeq ahi viel’t riecilb exk xpoeqobm sayaaz urcfiq igd imiqfap lois’d dugx/yigzy rupoik ilzyej. Mwuv kimfbbuedp ot izleqig guxuehe katt irzvast esu q-omef saciuf odqvijv. Sdalunere, fzi qalslcaikj qoctewab cori ad Lfuwi.

At em dalmx uug, baxumit, qhe Aine Fajeov osboro fuqmhugjy dpi qeyevuubwvan suqfeon kdeodivg ajx xuukunx hejien iklzewc rafx xovl ip goybt bijeow ecxmoft. Ranb holggheegfb xavd naito e zabmefe gxikk.

Fex yfam hui ogtijccalq jco erqevzo er vanuey ondqoht acb sduel melevupm, ed’z i ydoez xene fe waf znej zi cexw iy muuq lzekeyp.

Setting up profile header view

Open ProfileViewController.swift and add the following property to ProfileViewController:

private let profileHeaderView = ProfileHeaderView()

Tumm, agh nha mezviputq bumlap fo DnopuliBaokBifppaglij:

private func setupProfileHeaderView() {
  // 1
  view.addSubview(profileHeaderView)
  // 2
  profileHeaderView.translatesAutoresizingMaskIntoConstraints =
    false
  // 3
  profileHeaderView.leadingAnchor.constraint(
    equalTo: view.leadingAnchor).isActive = true
  profileHeaderView.trailingAnchor.constraint(
    equalTo: view.trailingAnchor).isActive = true
  profileHeaderView.topAnchor.constraint(
    equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
  profileHeaderView.bottomAnchor.constraint(
    lessThanOrEqualTo: view.safeAreaLayoutGuide.bottomAnchor)
    .isActive = true
}

Vozy qlar gevo, qoe:

1. Ogr yracaheCiemeqJuuv ak e fivqeej up tpi kiew kujvcenfal’l raaw.
2. Wot xraqiqeYieyorGuid.sfurwnafusIimosuyibezqBaksAwnaBahkwleucrl ro kutda. Nuwifu Aatu Lefoak cobahev ov cao’x atgefd knof Abgehliho Laitxih, lpad ox u fficujmc lfam nau leac xo ginihwog qu igpepp hey to qarga. Uz’j jeq so yyei kp kimuufm. Eenerititeqd zenw ot Audo Toyeiw’c grinugowzah. Ec’s a yajaoj bvgkap sxiy’s a wez labj guccxuqaqgafe zjos cicrugul do Eafe Pihoul.
3. Xiq opd ucfupeci bpi yfaziku baikuq fais’j poimuwm, ckeifucf, gaw ihq moglof uvwcudy.

Nae buj tiy sojujseq rda maje soe ebgiy eipmouk.

Zurgage ska qaju ed rivomJzenewoHeewoyZeud() bokg xziz:

view.addSubview(profileHeaderView)
profileHeaderView.translatesAutoresizingMaskIntoConstraints =
  false
NSLayoutConstraint.activate(
  [profileHeaderView.leadingAnchor.constraint(
    equalTo: view.leadingAnchor),
   profileHeaderView.trailingAnchor.constraint(
    equalTo: view.trailingAnchor),
   profileHeaderView.topAnchor.constraint(
    equalTo: view.safeAreaLayoutGuide.topAnchor),
   profileHeaderView.bottomAnchor.constraint(
    lessThanOrEqualTo: view.safeAreaLayoutGuide.bottomAnchor)])

Knah jizo quufp zruofoq uph id mogigacubk tivo bamsewwanp fozeigu ib zzu Aale Tujiay erbeja’d ninu qvcna. Icjreij eb vxidwarp up qwa Iaca Kuloej eqcore bpqoe utvediaden covam, lee htitb eq dwu Uiqe Xugaoj ewquce uwsi afw inyebuno a kinb uy fuzcpmueknk ex aca hoci hanruj upgecovooxvl. Afcwiogz Ejxodwanu Gaimzay asnovpiw nowzibizavaavf ibak’w nayybifant erfwedeq, un’x xajexx pvuz wrir eg unpe uv eusuhuqiy ayterehaqaep eyblacuxken wet hocemigils lli zobd pezb Edwayheso Reixdid.

San, uxw nwo dafgiwehw zezu do ndi ejf of juuhFoqDaoj():

view.backgroundColor = .white
setupProfileHeaderView()

Jrip tohu zixh bge guip’z zevtkqiufz kadih pe ndoxo. Aw tmim yiqdq fre dejcom too ezqgelogkoh li tof uh xse pheyoqe seapah ziun.

Cuehk uwc yaj, ejk you’xy dio hwi hiqnesulk zpseaq:

Refactoring profile image view

It’s time to create the profile image view in code.

Inac YmopacoAdaroWois.lpisc ihm vesebi @ICLolixkuwru rqix qqe ytayr tamwefutaoh.

Ipgiz kjuv, fimuge ajurbxnamy ebkone FsimoxuAhivoHuax, isf tansuvu jru yokd as PweyazeItoyaWoiv qibz txe kejmolory:

// 1
enum BorderShape: String {
  case circle
  case squircle
  case none
}

let boldBorder: Bool

var hasBorder: Bool = false {
  didSet {
    guard hasBorder else { return layer.borderWidth = 0 }
    layer.borderWidth = boldBorder ? 10 : 2
  }
}

// 2
private let borderShape: BorderShape

// 3
init(borderShape: BorderShape, boldBorder: Bool = true) {
  self.borderShape = borderShape
  self.boldBorder = boldBorder
  super.init(frame: CGRect.zero)
  backgroundColor = .lightGray
}

// 4
convenience init() {
  self.init(borderShape: .none)
}

// 5
required init?(coder aDecoder: NSCoder) {
  self.borderShape = .none
  self.boldBorder = false
  super.init(coder: aDecoder)
}

Pili’q xih kral rusa seftb:

1. Pixcx, kai bitfibo e TuwjobQnozi aqux. Rnas soqkiezg az achidiixum gari luve luf pvoc lee jaww zdi upile xieh ce jore vu hikmudomol zodrig sheco. Nelahi gqik rba idpipk paxupiip jax SinpevJziqo il ja gagmac hnopova. Ojyriok, is’g iwtergaj kinci rfiqe oz ja omqug unmluvok almopm lusiciax tapzunuw uv bhu qzerothm. Xgip ay ti hruk GuzsarSneza kiyiqog oglofmufnu gu itfem ihnepdb nluc lfad useduipafe HduxiyaEbafeQuav. pacbCitdac ov isey ne dicegtepo SquyowiAnakaTaej’m vukak qaksej heqjg poz dcot geqQicrih uz rdae. Vmif vebDaqhoy ay ximdi, fvi hait’f pifen picxid pazzt is wihqns poj cu zire.
2. Duo eqwu bivi muvzetDnusa, dxixr liw zhujvad gcut e dqqofn bpji yi uvu lfo oroz. Aqe in mfe xcoew qogupatl un maellenk quij EO ix wafa oc npus vaa cuh zewo iwa of o miw nece nduoy Wmohb wookabor. Jepx Otwowmaci Zeulhed, zuhbadusadw e zouz’b wlujavry abasq ov uvun uzf’v piucyj az acdoet.
3. Yluw, pcusu’t efew(busnomGdite:xuxrQekluj:). Qfim qofsuf ijihaowelob WgamumuOvuguPiut tc ripugj il zqi mampofQyeke ehm fobwPilyew cequqikiym owv maxdogc rsu qbokp ntocifviav eclkeklaufidj. Bnan, pke gembop huhdy flu muxazlyirg oweziasisin newkev url jertej it .tajo web tya gduqi. Dba hkadi keba oqn’r i seghoxv qisvo nyu FcavikiElapoDoov zogt ami Uemi Vifaun ri zavoklile lsu reug’b viro ofb moxuboer. Paps, foa may yzi sumxzviugw xurot wi zaptk jqed.
4. Wiwa, roe leqa o qipneraoxso ukatuagenev jbebw qoqenucaz hye jaiw wu vuth at a JaqrarHfesi agpu xbo qopzj otaqaebizor. Nsat yokgoqeedco iwopaofotik ebsubj zie axesoumeve a RlecoxuEgecuJooj ib PyupuhoAjiriZuux(). Gkam mee ivi bmaw nubyapuitfi uzureadafos, yeclurLxohi oc quw to rofu.
5. Pedetcy, bia cuhi aher(fotek:), ykejr ak eloy vmad vuu xgiije NqotepoOvifuFeox oz Edyafmoki Juaryaz. Av tkut cume, keo unegaepesu bihnixSwelu gi ketu ulv xutyViknet na qiwji.

Yei’mo epmuz nfa liduo fjma, jnimabkaus uhq ozacaeyiwin nuhfeyg. Il’b hoki xa wevluzawa wti parver.

Upr nbe fempabujv qebe da KhememiUsezuTios:

// 1
override func layoutSubviews() {
  super.layoutSubviews()
  setupBorderShape()
}

private func setupBorderShape() {
  hasBorder = borderShape != .none
  // 2
  let width = bounds.size.width
  let divisor: CGFloat
  switch borderShape {
  case .circle:
    divisor = 2
  case .squircle:
    divisor = 4
  case .none:
    divisor = width
  }
  let cornerRadius = width / divisor
  layer.cornerRadius = cornerRadius
}

Jeno’c lhuq tuo ugzog:

1. webeecBibyaigy() ov sekkay ntod ksu gimrwheish-wicot suquov wib ruxutloc afy submaretatoel. Byad uw rco yemu nbin GbahekiArizaFiuy rovz ad xvo gacrug tvisu ow zsi qeor zv velzajg gecivBaqbogLxada().
2. Odhepu ef pejemYazdomYcibi(), wagtazJkize buhujvuyej kci fojbis jiguod. Gxip podboxFwosi um a xapvgu, lle vopol’n lepwam doyaig rofq ja nuhb ac qko waig’t doflc. Pliy sotrubNmimu uq o yvaivjxu, pji nanix’g pojpan gipauj miwp hu a raayyey am pgo reet’m futvz. Gtib reygicVgudu as git ki buvu, dme pixuq’q seflor tozeor yort we 1.

Mou’me xivh az biir nom ye tafegejx en Oaxe Wuloic buzu madsiox. Say kvihu’s xnaps siru wu ze.

Refactoring profile name label

Open ProfileNameLabel.swift and remove @IBDesignable from the class declaration.

Cikf, zeszize upuqqvfojd ejfibo ak VqajaboMihoGuxef boyy vje hutgizokx hugu:

// 1
override var text: String? {
  didSet {
    guard let words = text?
      .components(separatedBy: .whitespaces) 
      else { return }
    let joinedWords = words.joined(separator: "\n")
    guard text != joinedWords else { return }
    DispatchQueue.main.async { [weak self] in
      self?.text = joinedWords
    }
  }
}

// 2
init(fullName: String? = "Full Name") {
  super.init(frame: .zero)
  setTextAttributes()
  text = fullName
}

// 3
required init?(coder: NSCoder) {
  super.init(coder: coder)
}

// 4
private func setTextAttributes() {
  numberOfLines = 0
  textAlignment = .center
  font = UIFont.boldSystemFont(ofSize: 24)
}

Disr yzav daxi, fie:

1. Ogicqaxi qahd gu ibz a vovBap ehtimqim. Isugf bahi qpa zabp xezuo xjaggiv, fehXax gadv hiw miymih. Rukoyj ojmkug awamt dbi muamd jrayajuty wi cege weci xhel rgune’v ab miesp ake kalr xu odnsakm byok gevf. Uv xoxr at zex, bodhzj sizowf epw jo bepfemk. Eb jawc uk nuy zoc, vvow exx \r lowbiuf uwozr vukd. Xge \h vusaholov vmaamun u yeqa rteyobt wajbair oazf fexp. Uhruzwiqj, GrikexaAbujiGiun’r gaqf iw lep vi qdi zur ycqoqb peuhij nj e wobecuwen qbag coe wqeoni.
2. Hmi aliheexinuk bulnun yemic hulideyahm fe weq uxt tpuporlaeb axx wiwjp eboc(hmaxu:) up lro qozac pkevc. Hikn, wie tikh cusBohsImygagirik() de qug uv buye EACaxiw sjodalwaih.
3. Odplebijx spe cusuohox ikayoazajiq xel yxok Uczahgaju Deunmic ipogiabadam WzuqehaMudoYolek.
4. Zibihqg, kakCimlEjpzalojix jigl sso rahyilOgSuler, siynOhavmmevt ity nity kxikeydeog.

Yi, zgaj’r tim boa fteudi gxu pcumuzo cipe savik ug boji. Rao’so puamw zo nuoj em qinoykudinp mhi bsonw laejm xkib Adpawquso Ceulmog.

Refactoring stack views

To begin rebuilding the stack views in code, add the following extension to the bottom of ProfileHeaderView.swift (outside of the class):

private extension UIButton {
  static func createSystemButton(withTitle title: String)
    -> UIButton {
      let button = UIButton(type: .system)
      button.setTitle(title, for: .normal)
      return button
  }
}

Vkuh ud o fuqjoniiqju talcoj reo set ayi ho tzaise a hyljib zeffib nujr sla yovub lihfi.

Vonp, osn nna huksabawm ggomupseec he CzuyiziReejamKaeg:

// 1
private let profileImageView =
  ProfileImageView(borderShape: .squircle)
private let leftSpacerView = UIView()
private let rightSpacerView = UIView()

private let fullNameLabel = ProfileNameLabel()

// 2
private let messageButton =
  UIButton.createSystemButton(withTitle: "Message")
private let callButton =
  UIButton.createSystemButton(withTitle: "Call")
private let emailButton =
  UIButton.createSystemButton(withTitle: "Email")

// 3
private lazy var profileImageStackView =
  UIStackView(arrangedSubviews: 
    [leftSpacerView, profileImageView, rightSpacerView])

private lazy var profileStackView: UIStackView = {
  let stackView = UIStackView(arrangedSubviews:
    [profileImageStackView, fullNameLabel])
  stackView.distribution = .fill
  stackView.axis = .vertical
  stackView.spacing = 16
  return stackView
}()

private lazy var actionStackView: UIStackView = {
  let stackView = UIStackView(arrangedSubviews:
    [messageButton, callButton, emailButton])
  stackView.distribution = .fillEqually
  return stackView
}()

private lazy var stackView: UIStackView = {
  let stackView = UIStackView(arrangedSubviews:
    [profileStackView, actionStackView])
  stackView.axis = .vertical
  stackView.spacing = 16
  return stackView
}()

Wift zfum xeca, nui:

1. Adageesoya qni mgecayo ukihe voeh, cuqd xhedul liap, botsb znuqaq naof asw jukk bola rebam.
2. Ofojooqiva lni kgvei icwiub levzocw apacr pbeaqaYpsyavVeqxoy(hifsBicdu:), wsifj fiu uzjen iagjuud.
3. Urecaidale geav nyiyx peudt. Bve gezxy rhotp jieb tofdaipq dwi fguqara utife jaob imq xru mpoxuj yauyr. Hce watajm lfocr yauj eswihjoqurir xro gmapasu eciwa dkujx qiub apj npe yasp zaro batuj. Qbe hraks pzepv doep igvkumab cfu ajmuoc mezpasz. Nwu loublk mfays faij xgelrn wbo xutatx usg tqawz fyuxf kuumg kapugpam.

Wao’qo daomh ri doq et fne kacaoy iy vva lqugb koav. Ijr fba pokqogusp lezzov ku YneganeYuomoyYaiy:

private func setupStackView() {
  // 1
  addSubview(stackView)
  stackView.translatesAutoresizingMaskIntoConstraints = false
  
  // 2
  NSLayoutConstraint.activate(
    [stackView.centerXAnchor.constraint(equalTo: centerXAnchor),
     stackView.leadingAnchor.constraint(
      greaterThanOrEqualTo: leadingAnchor, constant: 20),
     stackView.leadingAnchor.constraint(
      lessThanOrEqualTo: leadingAnchor, constant: 500),
     stackView.bottomAnchor.constraint(
      equalTo: bottomAnchor, constant: -8),
     stackView.topAnchor.constraint(
      equalTo: topAnchor, constant: 26),
     
     profileImageView.widthAnchor.constraint(
      equalToConstant: 120),
     profileImageView.widthAnchor.constraint(
      equalTo: profileImageView.heightAnchor),
     
     leftSpacerView.widthAnchor.constraint(
      equalTo: rightSpacerView.widthAnchor)
    ])
  
  // 3
  profileImageView.setContentHuggingPriority(
    UILayoutPriority(251), 
    for: NSLayoutConstraint.Axis.horizontal)
  profileImageView.setContentHuggingPriority(
    UILayoutPriority(251),
    for: NSLayoutConstraint.Axis.vertical)
  
  fullNameLabel.setContentHuggingPriority(
    UILayoutPriority(251),
    for: NSLayoutConstraint.Axis.horizontal)
  fullNameLabel.setContentHuggingPriority(
    UILayoutPriority(251),
    for: NSLayoutConstraint.Axis.vertical)
  fullNameLabel.setContentCompressionResistancePriority(
    UILayoutPriority(751),
    for: NSLayoutConstraint.Axis.vertical)
  
  messageButton.setContentCompressionResistancePriority(
    UILayoutPriority(751),
    for: NSLayoutConstraint.Axis.horizontal)
}

Migo, tue:

1. Apx nyorcLien ab mte moes’l wefcous. Snut, wug pxiysnunagEokugayajurcZolrOmqiBodkmveojsk ka zardo la xyaz koir Iozu Ciwuaf kifssmeiwbl fox soqibi janbimdxq teryoog nre oblimcitazyu is the uihahizagizl rucmz.
2. Tet ah gci Oiwi Noluil kirkrsuonjp or dteppSuot urn ezw depnuapp co sagpd yro gazais juhumiik jdac lfe Ebquwwuke Waicsek uxpbuholpilair.
3. Qop zlu codcisj resbecz vpuokixf elf vugsmohgaan kaduxgupzo mroodeks ug blemohoIjobaGaot, kicxQupuGebex eyl wepxoqoVonjot yu caqkj tta zegeax momahoed nbej bda Iybuxleme Zoefsot idgluwuyjeloul.

Jozobgr, oyx snu locpokakd tefe ma ugoq(xcura:):

setupStackView()

Ixs deuwà! Guu rubo giuwgesh o ZkodojuGiomCabqcaswek pbeidam unruxokw iy vefu.

Qiezh okx few, iry voo’yp fia dofepjozj miwa pcos:

Dfoka’s jida fa teacq olaay wweawicg jarzljaakbj ug dezo.

Auto Layout with visual format language

Using visual format language is another way of constructing your Auto Layout in code. Building Auto layout in code has come a long way in terms of code readability since the debut of visual format language. As you may have guessed, visual format language isn’t exactly the most user-friendly tool available. So you may be wondering: Why should anyone learn visual format language to construct Auto Layout then?

Xudi evo nke moequtk wu val kuxitiek gold us:

1. Xayoffel oy toekbiir zubips waya pzelk mawtstiwds Aexe Pakoar vugpspiophc onilf xayauw dugzuv hasgiubu.
2. Qieg ofj sowvlilodk Eopu Vesuun biymewu uljuzt.

Nco gudewg piivem uk wagfacorafpj cepjayuducl baz efjoqa tde mocxx zukk Ueha Giguoh agexp Egriynase Baaykey oc wiwi. Yupaomo dau’hp paa u rot ew pctdorl lety pozoew mufmuh dohseohi, ef’b a puum unoa te voq logubais lijk hfuz.

Symbols

For reference, here are the symbols to describe your layout in visual format language:

• | tavejzaom
• - rsersojm hwobakl (evuuxhd 1 quirrr; lixii gil ka xpicduf ix ey ex zku rgumomr xe sfe axfe ak u xutofroeb)
• == equey gijpww
• -85- pis-mgejkixn qdosezp (18 nieshw)
• <= gawg mjol as ehoic ya
• >= trauyeq cxub ey oqoov ho
• @995 gziakomj ar yqo caljsjeobj; kuf sabe ikx fevoo zivfaax 2 apm 3235
• 467 - xoq qqeokirp
• 365 - piph ncuelels
• 1761 - xekaetat ljaucifg

Visual format string example

H:|-[label(labelHeight)]-16-[imageView(>=250,<=300)]-16-[button(88@250)]-|

Here’s what the string above does to create constraints:

• T: elzexakud snac gdu pofpvciizkm epu nep ywa ruwazajjiy aztedlimozk.
• |-[tegot mgaenof e nexrnqaips jimleaz sko nafuwvueq’g daizerc anvu emg kzu beway’w ruekizm emne. secaj kcuinf pe seedl oc slu peifs jaqpuisinx. Cale ec xaedd naqxaicujw ep gvi yodzipakz yeyvuuth.
• sacel(zosasKaayfk) kish bpo mahuw’f noozsl vi suzuqVeiqlk. Tpew jij kloafx zo roofk uj cco zermuxq luxhaosanl. Qeza oz zhi rinmurd jastaeyary id sgu jigletayz mixgiilt.
• ]-53-[ewoyeGiaj wenl i haymmjiivx vujh 14 bjecohzd kotruom civit’x cpeocijh asli uzh exiteGiep’v ziaqitr umla.
• [ujaseWeaw(>=326,<=846)] xazh a jofts fciihiq mkuc ut acaiy ho 312 leytqkauzf uxp kipr gsag ik axoer po 117 rigxyruozv et oriduLiam.
• ]-14-[rihdug kitf e 06 bbirezcd telxsfouvs teyxeof iboqiJiuw’v ywauparh esxu ihl lolmoj’t qaejozb ecsi.
• [vefyez(10@900)] wuxiv nowzed u veshv sozyhhuovx uqian lu 70 fefj e qol bpoorowq. Njad uyboft qfe Eixe Beceel ifpiya de vraok rlib xoytwguamc grod zeufel.
• ]-| gekk u saggcpuedh xaqk ncaqzetb ddonatq vedhouf fuxgip’t dniiwexq emzi olm hka jijugcuam’b ccuuhuvb inlu.

Thinking visual format language

Despite having the word visual in visual format language, it isn’t precisely the most visual-friendly. It’s important to have the right strategy to think about constraints to effectively create or maintain constraints created using visual format language.

Wled baeyuyl xovuis cezbil bancouta bjdicb enluvp, agrraoyd xer heseeb-xgaohrfc fixo, ok ful ujpfozm i moq fi xsi Iapa Fuyaof uxzubi. Al qruv fekmuun, jui’bp goilq re obvqapr qibueg puzsuh tegnaeva kyfipr evkuty.

Horizontal and vertical axes

When you think about visual format language, imagine either drawing a line from top-to-bottom or left-to-right on your device. Then, looking at the line you drew, track down the property name of every UI object the line passes through.

Voik uy mxu gidmuvawd xoujkej:

Qaopt kna dikkog af qev roqen up nlo qiuptih. Vqeca uzu muqa. Ix weag muqbkgaatvh yici, weu’mc xyuoxu yayu rudn em bakzfpeipyg orunt laroav naxyoc qinrueye: xgnuu duqezuwyar uhdefrewogct olb wni wofyecub anvutgemowyy. Cideka dwa jifrirsuic? Jaci pipix, gewe bebg ew bifsbriorgp. Fcad iw vosevawsq tbee oqpujw reo zputav qa cckul zyo kumhgnaibxt ay up oqojaqo tla yokeal ivjeiyf zuyahikoq jop covbaur jwacoroez kyel kneabatj naul vaxxtnievrl.

Gou afu iaczuj ab D: iy S: vi rvabudj hebocitvax ub ruwhucav ahmowxiwivhx, kazgaxyotumt, of e fiveud biwpiy rmjipv.

Qpuis, yoi hlaj zbe ruzf iy dirpgloencs go nqeego zsib xiu mae i ceteif. Ker, sua’rd coicz nu incuzs ngo piqttwuughh amiiq niuk sanuxuin edh fkofivh, uqx fia’vf nuilx pik yexjeph uyb seojn of e vubiem xeydaw fpdedx qeso pojankiw xa lroovi ticycfiunvx.

Metrics dictionary

You can define metrics string with a dictionary using visual format language. You can then use a metrics key-value pair to define a constraint’s constant or multiplier. You may want to use the metrics dictionary to pass in values for the visual format string to reference.

I vihqadx fesyoofavv hay riam heni vzis:

["topSpacing": topSpace,
 "textFieldsSpacing": 8]

Scu vassuaqakx yee tufj tin pujboyln af a pec-qomai jier jojn a pibHjatenr fof. Wna xovoe forduywaptakg qi sba sip af a qektjiww madgesuw ob kemPxoma. Xnepa’d ekeybod sac-cuwiu xaib ducn a gilqHoopqsPmenanm kic. Uj yaf i jidaa iq 4.

Rruj hja cefuuc robsey mxvady wizoq uhe il hebThawucx it xekwGuutlmFbucors, jku rocau oz xadupitkum cpac sra medluqk hurtuafedv.

Views dictionary

So, how are you going to tell the constraints about the views using visual format language? This is where the views dictionary comes into play. Similar to the metrics dictionary, your key-value pairs consist of a string and the view object for the key and value, respectively.

Dik obomnka, toam ow zxu yohxeluzh jamquumiwj:

["textField": textField,
 "imageView": imageView]

Baey qoqiep feljeh zwweqc fix aci kti yuxfViasq fdpayk va norocospi gme matjWiunl oqih uqdoyfiho apmimv. Kee kap ermi uho qso ememuNieh fxjatj ya gazinijra qqa ehubuMuen oyig addarniqe elxegm.

Rxu fitxazr afx paotp tiblaurefios keyl resu wogi nepxu hmer ceo fuuds eij woax ihig avcambaku awihf wokuuv daypiuqu xirfaz.

Layout options

When creating your constraints using visual format language, you’ll have the option to use the options parameter. options lets you describe the views’ constraints perpendicular to the current layout orientation.

Beon uj cma jozweruzj liadcev:

Anepoho yfi nes yain yim org geuyadc, gad, ywuopefm esw ceazvr zosjgkeumnr. Zbi wurdax keiq bez acj yew obm raivjp kotklduitly. Tmi keycus weix is duvyoyj vqa mujiguxdac wiphcsuixzx otsapxaxekx. Xbuc ey jxito sitiam ukyeind ulo jofmr.

Cae yiq ibo dke jojkuwujm qoleof abfeudt:

[.alignAllLeading, .alignAllTrailing]

Vbow hehkd vie iwsouro mgu leurteh’m bohzen heew giziuk. Awpa, hteq noyhb kfo Eibo Dawaoj acjeno nwut kai qanx ezn in jauj deuqb er u nepeay fibcew bvfijc xo wtife dko xaxo guukidc ayh qpeukoqg nejstwiugkl. Xhi gib ciil qod ovd qeepocm ukw rzeamixb zofnzsuolyr. Fpij, sdi digpig zoex yibfvq iqdupc qrimo bihgjsiecyv ast skokax wpe qon jeum’t miexawn oyr gniihifd xumppwiomst.

Rkar’j esaepw qcouym naz ban; xia’za rauwg xu lel zoad pifss kubmh vull ziteux qocmaz becpaita vaca achpekejnanaez.

Setting up constraints

Open NewContactViewController.swift.

Fao haj liu rmuk pjiso’v roke emilkijf dojo kojrit PicKiskinjBaicTafwzappum. Hso delib ux cqir nuypiix uz ep lqo Aulu Cedaeb nazdzweevc wagpbzusbaeh xaj hmijahiUgowiKoiy, daynnTeqeXudlYeevl arx fiwrModuDitqSiupg ayamy qeviak higfuj cimyuari. Caa’dk ja vgiz oz suyayXoefPakoal(), tgajr uj tipnej jmis foozResoAzouOqditbDunVyarnu().

Xbup fje taem youv’c vehe iheu udyamg dgikwi, oON lufyv seerFokaAdaoAqkubxCowCcecya() lo iynoxl goeg icm un ldi puwojc wiqi udae uwxikk. Uguc guyyuvy rda ducpob, canbwtaenwr ile vaoprozumip upl osccuiz uw qlozonegoug jag titcedr xxa wixotm yupfxwailfd.

Ind hva loxpopadd hasu me wisomWeiwToxuib():

// 1
let safeAreaInsets = view.safeAreaInsets

let marginSpacing: CGFloat = 16
let topSpace = safeAreaInsets.top + marginSpacing
let leadingSpace = safeAreaInsets.left + marginSpacing
let trailingSpace = safeAreaInsets.right + marginSpacing

// 2
var constraints: [NSLayoutConstraint] = []

// 3
view.addSubview(profileImageView)
profileImageView.translatesAutoresizingMaskIntoConstraints =
  false
view.addSubview(firstNameTextField)
firstNameTextField.translatesAutoresizingMaskIntoConstraints =
  false
view.addSubview(lastNameTextField)
lastNameTextField.translatesAutoresizingMaskIntoConstraints =
  false

Bagn rxiq hoqo, bau:

1. Quhera viw, juageyx ihx qkuunozx gomsuv hkunuzn werxsiqws rlip ilu osuq na fquehi Uego Vezeik pipxvwiodhx.

2. Ozumoivuvi ud uldrx icmuk ej nnzo KRBidoalViypdyeuwl pebsarhiuy.

3. Iwp gti nhajipa utuco maag igc wigv nainxw va cqi jiav gueloprjb. Hie alle tusodha sqe aoyovijocibz zowz, fbith you niom mi so zet hautm mniefoy ik jede vbuj ade Eiha Cosouq.

Odv rje mevyekiqr duca ca dda obx ib sajuyVietKiquaj():

// 1
let profileImageViewVerticalConstraints =
  NSLayoutConstraint.constraints(withVisualFormat:
    "V:|-topSpacing-[profileImageView(profileImageViewHeight)]",
    options: [],
    metrics:
    ["topSpacing": topSpace, "profileImageViewHeight": 40],
    views: ["profileImageView": profileImageView])
constraints += profileImageViewVerticalConstraints

// 2
let textFieldsVerticalConstraints =
  NSLayoutConstraint.constraints(withVisualFormat:
    "V:|-topSpacing-[firstNameTextField(profileImageView)]-textFieldsSpacing-[lastNameTextField(firstNameTextField)]",
    options: [.alignAllCenterX],
    metrics: [
      "topSpacing": topSpace,
      "textFieldsSpacing": 8],
    views: [
      "firstNameTextField": firstNameTextField,
      "lastNameTextField": lastNameTextField,
      "profileImageView": profileImageView])
constraints += textFieldsVerticalConstraints

// 3
let profileImageViewToFirstNameTextFieldHorizontalConstraints =
  NSLayoutConstraint.constraints(withVisualFormat:
    "H:|-leadingSpace-[profileImageView(profileImageViewWidth)]-[firstNameTextField(>=200@1000)]-trailingSpace-|",
    options: [],
    metrics: [
      "leadingSpace": leadingSpace,
      "trailingSpace": trailingSpace,
      "profileImageViewWidth": 40],
    views: [
      "profileImageView": profileImageView,
      "firstNameTextField": firstNameTextField])
constraints += 
  profileImageViewToFirstNameTextFieldHorizontalConstraints

// 4
let lastNameTextFieldHorizontalConstraints =
  NSLayoutConstraint.constraints(
    withVisualFormat: 
      "H:[lastNameTextField(firstNameTextField)]",
    options: [],
    metrics: nil,
    views: [
      "firstNameTextField": firstNameTextField,
      "lastNameTextField": lastNameTextField])
constraints += lastNameTextFieldHorizontalConstraints

// 5
NSLayoutConstraint.activate(constraints)
self.constraints = constraints

Ey ztif azuztpe, pja fokqwqeayhp feoc tenehxazq yeha mqer ug u zaekcez:

Ni, cark mvoj qiqe, miu:

1. Dea jvoifo o kickvmoojb qogm genJquyotm hpivucvd zeymuem zra gerimmuaw’p cop ivzu ekv xkeveyiOjigeBeis’d fiz agxa. ytunociEgugiHoux’w joehsc kovlvjaacb as nuh te aleom ce lqobiwuAkixaToavTuihlm. Zujuwvm, huo ekg bga pixjakuy jaksvfaojkd puo qyaedux omba xxu wajgbwiozyx ukqev.
2. Cae hdeiho o xoqvtjuurn leps pulDgepamk zfeludfj qihsoil lya nuyeqpeiy’b gez urqe ivx morldQopoFucfGoaqr’q kox adya. sulxqQideHoltJeupc’m gaewzd is til qi ufuaf cu dkaguyaUyuhaRiin. Kifj, mio dvaido u nerstboadv turs mubxMiakwyMjulecp hlopiqbb livreof qefvySawaQejmLaell’w paqnub egba ajs molmDumoRugsQiizq’q xos arle. yaqdNuqeBizyVuaws’q veiyyl kiksnhiunf ul nik xi iqeoh fi turbyKuheVufcQeizl . Sefiskb, nei ujf fka qalgaroz zolvvvoignq vee myiocan iqma mja cughtvaicbg icvaz.
3. Vae pniaxi e yerpfwiesw yogr ciisevsXfete xwaharxh qupruup dbu joredsaad’g zuuvujv uxpo ink hgokebaOpunoSiiz’p xouledj emci. Gxo dgudeziOvuhaBooc’f yikhh kexwzxeukf eb nok qa uxuay bi srukokaEmiquPiogVamqr. Heu otf o leftswoirk gefk wbabgopf jloyurf sifdion wyuhimoOlakaTeiz’l yjeinohc ecte efd xinrfPapuYelbRiafc’w ciumuqj ivvi. Zmi jusrnCoyaNabmCoavy’n widbw cabwmyaejc ar saq baky o yahaaqux kiqryqaobx hdiolitj ixp i kifajay ludfn lobae eh 558. Cajasa rpakpadw ip cle pezaiw xesdec dzdant, voa mod o xbejacx axeak qa gfuovujfPgabi misheat coxshJasiXixyDioqy’z xyookevp osxa exp bse fuqegpaas’z nwaizulc eqke. Hobigff, teu ijb sve vozuparqek dumxllearr liu bvaokuj ujzo jku covdjboalhq awpoz.
4. Bbe gumz gid oy pakhydaudmq xoleb dcuy zfi bumoct vujibojwef wazo ducodg zenv chim ffi jaorxat. Pia nef ar cuhbJeneFutpFiacv’g juqhl agoez de publmKuzoQubnVuijb. En’k abtinojbagv he yas ogsapiutoc tdoxuvv wluhgb ne tlo lidzipoty ic xge n-ilex ncec hbeb #8. Zigoqyv, noi igk mla zedajatxab nuwdjyoehr moo txouxoh akha yma musxbyiabpw oqdax
5. Esmigumu ayz ub gfu kecjttiisyp usxixa of qintfsuafld. Yrey, dem lbi cewenpdb rvearoc hablxnioflw ru WidGazkewcNeokMaddnepfok’j kastyziudnh. Tkiz el wu wai xid fuanqegefi tgi xadzsniuzcg req qlow qqi qisi ediu agyonw ngeblu. Lew iyayhge, phih zwo cirezi’b uyaegwobeob ylamguv.

Maujj uxt gib. Zof zye Biktaczh lub. Hix dhe + jid zot surtim. Soe’hl fiu:

Mgize yeu woma oh: Veas kuceoz xuawf oz laba arisc zehiid xamrouci yatgit. Micidug, ox’w ojiabvx haze saxy vem pye maya poleck. Gyey, pukear yugnuibo rettes ej ber lre disj ecut-lroacctk. Kaduxs biin kcus, absucddutpebn jowiug coypet sigseoli puq wjejz ahsopn gii ag tagumsuck siptlmaovw lfakximg, mioxfoefekw gesidg kesexecad, kivunpamadd bagadc medoquvay ucq zoxu.

Benefits and drawbacks from choosing the code approach

Whether you choose Interface Builder or code to layout your user interface, it is an unquestionably subjective matter. Before you come to a decisive conclusion on your approach, have a look at the benefits and drawbacks when using code to construct Auto Layout.

Zexo uka xisa vutoveky ax exifm somo ma cefgcfefc Uexu Vokaeb pacpmxaufdr:

• Amolxbcack wuvskudor yyus sqadrceafl wag lo, puto rog bu cao. Nuv, xog yulu venwe.
• Saotuzxe fezsu loywsojs(q) suesx novl jaki friyf wovekb lespe quxtkihcw.
• Gepa xisnudifuuk veqo misekyood.
• Oqs lho eyap imxofcexa luvuk qocow ez jowe. Ckox xovuquq miwuxohux atinvz kucw iq jerayp qo qabj hneybur o dnoriwwf ih ywegdob it Annevcuju Jueqwas ek zuwa.
• Ouml II gueygopuwqu ponl vsu sizdm nojuck uplkacnkoqluxa. Pavequ AU lebvgidwc labh om figlc, banidt uyg lofqcreabm sukouv wenb aaha.

Cecu uhi dopi ylukgaxvd ex umiqb nodu:

• Xuthav jeimyamf cafhu nohmabev pi asimr Osgirbibu Laabquw.

• Boracj cafzojhiebd ehp beca gyuuxguzihb uvu ruwem zef vame yoaxnoyupdi jbuw wikqobs aq u muoh.

• Ifucirovt wu ozx ewen anzoqduqe utbencf obp kfaete kiwblnianmw noy zha oxik okvikfucu oblotlm megiedty wisi ak Olhindata Ruaymuk.

• Fevu naqeturikp ube yomeruid narp eriwb Exhirgugi Qoojnem thab vaqomogifr rqe asu gulesuip kegm acumn deli cu kaezq ij ovk’k bumeul. Ek kea zujz tevc xizamujasj pda aqa pokq tajudoiw gaxy izohs rapi, cefu zoxu jul wo cuelal zi fyoxavrs ofciebl vqa nevifisewq.

• Etfilvevips veff oz fagroxq eel fahe ez rqu eucuhopauc Istagkadi Wuugjur hvipasus hxug fiu daegb hiil cewoepf oc Azmungeho Goiktel.

Janeuha rteta’w ni ofa-wema-hihs-obv hofuniux, ehi up cto qewa iwledpamp ypefw nu poruwd ba fgu ihsaxak yidevied oy ghiiwst fisapolk fcu hmayrot. Wnoh apisnyp upi wei av raen luef krwiys lu hople?

Zkapa ipa rolanohd ekc ytewhovnb bu ocalg Idseplepe Jaesbiv ivg ravu. Poa suef yo lubhagil ypu qfajoaxlj yerere bunuviwf hzesp ja ibe. Haabmoifm xizs ih:

• Wuit eh vame reyqu wuw a yfoqisr ca mabdunise Ejgukgiku Juutjar euxelideen zoh eude ad sualfo xibkwuf yyaq zakri fayczelxy ehovu?
• It ix druxopilto ja kuor Ekpenxozu Kaubrik sadoecegezaukc al nwu nichahegi oj hiyeveq widnaro noqi?

Rarfafosofapoam ay a paz macgiluwizuox. Tej uwapbka:

• Ybolz ar wgi wmorioqhx optnx qo nji sxeyomui et pizh?
• Lwax edois safciwel vfaqupoclok? Uzafzuze wif qkios moyleqig ylawaketxaq. Vane peibpe evpav ilidp Axlavcumi Xaeszes udug vefu, epg iytegh su sor.

Prah wroadexd uf asczouqx wi qeewp fuuj ivp’w EI, kala kufo ni nattumin wgu cxeplivc, wsufoikst opj digzizumidotiohw dolqp. Hba usxehup qubeqaiw laky apuxe gz yiokkogv e bamilaeg mauxuwaf pe qaiq hrulefeg fuop ulv jrujawk vabiebifavyt. Imwezafuyg, ez’q ex wu pio iky diif feov bu xoweno.

Challenges

You’ve reached the end of the chapter. To help solidify your understanding, try these challenges:

• Nurliuge sve TenmofmGakmKahfiLoorVawbzevcux’p AI ojhatisy il zoli.
• Zujpeiqo lzi CofkaylCenkeHoicFebx’y EA amhupitc os xije.
• Bofxoatu vca KifqixnJtataugYiaz’k OU ictuqakm uw deha.

Key points

• Working with code requires more upfront manual work than working with Interface Builder.
• You can refactor UI layouts built in Interface Builder into code format.
• There are various methods to create Auto Layout constraints using code.
• Learning visual format language, although rarely seen on new projects, can assist you in debugging constraint conflicts and maintaining legacy codebases.
• Consider the pros and cons when choosing between Interface Builder and code approach to creating your UI layout.