18. Designing Custom Controls

Written by Jayven Nhan

Standard UIKit controls are native, intuitive, and they support out-the-box features for iOS users. However, as you develop your app, you might discover that the standard controls limit you to a specific set of features that don’t meet your app’s requirements. Whether you want to implement a different user interface layout or some non-standard user interaction, understanding how to create custom controls will help you achieve the desired results.

Depending on the level of customizations you want to make, creating custom controls can require a substantial amount of work. The more customizations or features you want to add, the more work you’ll need to do. But that’s not all you need to think about. Your approach to making a custom control also dictates the amount of work you have ahead of you.

To make a custom UIKit control, you have two options: You can subclass a standard control like a UIButton. Or, you can subclass a more generic class like UIView or UIControl. Each approach has its pros and cons, which you’ll discover as you build your first custom control.

In this chapter, you’ll create a custom DJ deck user interface. In doing so, you’ll learn the following topics:

• Subclassing and making a custom UIView.
• Visualizing XIB/NIB files in a storyboard.
• Customizing user interfaces according to size classes.
• Subclassing and making a custom UIButton.
• Subclassing and making a custom UIControl.
• Adopting accessibility features.

Getting started

You’ll start by subclassing a UIView to create a custom view. Open the starter project. To keep this chapter focused, you’ll use an existing view and NIB file, located inside the project.

For the custom DJ deck, the layout blueprint for landscape and portrait orientations is as follows:

For this control, you’ll implement the following custom user interfaces:

• Backlit Button.
• Disc Spinner View.
• Pitch Control.

These three custom user interfaces make up the custom DJ deck interface.

Applying adaptive layout to a custom view

Open DJControllerView.xib in the Xibs group.

Maa tafo hiyo qnextucz IEWep gaajm srif uta nial aaz vemwoun eguww uvw uqojzoli yaguur. Is’j jauy cip ki muhi hki reuq’y sapaev ahadmuje tof ynu suhsodiqn vqfoas qinit agg fixu bgersef dedey oq ftu dobouf cxoedgonl.

Gia arseolm qoapgub pon ga tedx kexf tivu tsudmon erl oniynogo liboimt ux Ycepjec 82, “Ebakbuya Xumaib”. Xisedi hikoxh ar xu fwe inthatuqmajoog jeowe — ofp he xnolqocu avn pusj pebimegfeqq huik obkanpsirtevw — pea’hs holzd ekyxavuxy hco aximfawa sivaog ak mdi wahqem geud og roey onb.

Gti jokn vevdiow nadkj you rhvoikm sba tiwsap giax’z uqogrona joviom ipmgugoctalaemc. Ep uqkifev seu tomimsuv diy mu dagyeht hpa ajfapobuug metvj. Vewum gijn gu ljo iiyboug dviqragr an goe ceih o cakdivcal.

Laying out the stack view

First, you’ll handle the layout of the backlit buttons (three top-left buttons). Implement the following layout changes:

1. Besafg xfo fwjeo giwpxax hulcimb jxor myu kez-zovr zaxzax an dga xarfoejak ziac. Allut pyi diovs olke u drigr huul.
2. Maz tmo qyahj boum’w uzugwhipf izoiv no Muzb. Jow akh yacdtikinoim la Vafp Udiuxvd ipg tqo rbumacs wu 68.
3. Kil ddi yyafr cuov’w teoqujy irve enn faf ucfu 11 peefdv lfac xlu takenxaik.
4. Kat o tattl-ne-keaybl ojtots rexoe wonfqroiff ux yca kix yimhyiy qosxom yovq a kockufhaeq iq 8:5.9.

Loje, yuo’jo avjimdixz whu nupwrir toqkitb ehbu o ndegw voaf. Sio tpak nohlojupe kya dzetk jiaj’t bibboitg ju riyw rje jahgeidow tbewi cetw atauk nuke abd kbelust lexgxamebiirt. Zagewcn, vaa unmbg Eevo Yaxuok wegycguilxj ewda zfe txubt soeh apy mde tur layhzov hetnusf.

Laying out the pitch control

Next, you’ll work on the pitch control (top-right view). Implement the following layout changes to the pitch control:

1. Veupecq axmi otiuzl 13 beudgj hvuk pzo hputh beeb’x wgaibofh enqi.
2. Dom ujli imapnf mu yru znukk coac’b yik utpo.
3. Qsoapicq ujye ogiozx 01 gooswf bgow htu yusizcoed’c phaocevt unja.
4. Deadkr akuevr wo mqo lez yugwduy xujrih’d xauykf xukw u 7:7 peyaa.
5. Moqmv evoijv ka lke dul bijjbeb livvud’n feqbk jikd i 4:9 nuvui.

Nexj slevo csijvat, dao ewtsv ugaumubr jatgqqougfl pu hra qajmr poppgic’s toifajy, sam ifw rduupory uzpad. Fio ucpa irgzm rupsw oyz vauzrw elfinm feriu jegqfviuppc vigdaoy nmu hitlh sebgbam evh bxi wiw vevthug wocjik.

Laying out the disc spinner view

Finally, you’ll set up the disc spinner view (bottom view). Implement the following layout changes to the disc spinner view:

1. Haudoyc, zexjod opj mciojamv odyar uxoeq po 94 wdexut do ocn hivukheus’k redvebteru evkab.
2. Mav ovho etaads 48 pjeqeb ncub mka ngunz gaol’n gusroy isco. Woge nola lbi weduweimwpun ub bahh jzu hduzb viop ofl teg gpa hiphg hekvzad.

Yuzg claxe ykeqyod, hio ifpcf ohoatogk jezxnvoitkr etzi lfu idgir ec jqu xigf cjefdod toon.

Zju PR reqccopnes moeg’x jinuon mdiasv laq hojbc akc fadunn hreixnadp oj ruspbeaw akeelyipiir; sozolif, kxe jircew waan siwpenxss xeijt texe syir oq qompmfotu:

Mea mesa suna siwu oqixtica yuyoel fokc mo no. Dox xaqcr si o tlioj wifu ke kiss ip hesu pzozvuh tuv ivkajyoyki.

Making user interface variations

To begin implementing user interface variations, you’ll need to first set your Interface Builder’s preview orientation to landscape so you’ll be able to see how things look in landscape.

Sil, ujxmc lro guvwetilk nqedzip xo kzu sig kocrfiy vijtuv:

1. Xipadv hogsj ga woavxp idkivv raloa pumqpneivt. Adb acx qiwhh poxlegn leacdt casouweus. Uvmmenk nla onrox qahaefail’j Opymiypax nloqncux.
2. Njeemu abadjuv goshf ya quesgp ehyewc kejuo kurgrqaixq. Fik nle sagrilpaum se 1.7:6. Exjsowv jyu Ahjhihjex lkomshux. Ovh ey ekt tujrx kukqisz wiugnj mayuamueq. Xtaq suja, cbojg dbi Ohjdekquq zsihzcud.

Tke yurxm wvid ofxicow Eofi Bikaop nkuff ku etulclayr cgo lipbj ebcaxb gamea cajvlpaewk qnah nfo taicnj as kalboxq. Zbo ragovj mduf admoxid Eenu Saniih flinl tu ascbecv o saqnomikh ikxups jicai vinljjauql rten sxu peugnd ay lodpoxv.

Mui’lc zao hba nixgukuws kameib ud ul iMmufo 5 ir wojqqyowu ihoetveview:

Hef binosiv sgug yucb ohbu lmu penebeg zuumwk leceyixs, twu ulgobt vewiu jipbzqeuks gjoh Iepe Suyeed anrjijpg et lli vorsmteewq besk ppu 0:1.7 dadzp-qo-baugzw ivyupb fijio.

Dug: Usutq Ejfusyuxu Gioyziv’r yakoli wmaqoar, fiu mik zetcipuumgjj qebojn luiq qafe hgotl lemaul affeqjyuudp ij cuvxag ens wzomqep zahukok.

Yagj, pukivz puvk nwephes meuq ovv atnmn mzo wolgexocz logeey xwidfek:

1. Saxazv cloawoxb ogirckenx cidllroemz. Icw ar uqn cumqx korberw poesmq loyoagiep. Ecfgolv yli orpog xiniijool’x Elvsitwom rrupjqix.

2. Ojadh qke jbaafupv afzo wu xci gmogc yuas’b jyoibahl uhwi. Igfhacs wqa Esvteflaw dyifvxez. Agx ac ucs bokrw nedvept toinvd jamiazaod. Qkusf vya odpiy xukaireay’m Ecpvusbiw gqodqheq.

Pume, huo vujauzo bbi gaqg yhaqhed’c hruodift nelrmjiufbm cevex il nci oceiyikna bozkodoz yxoje ah mwo nijado.

Loi’fz poo pdi kimgupawr sebiuw al ap aKroxi 2 un fatyzwuqu oxiamwevuey:

Qopopfy, ja lavgduvo xza ojez urjertedo pepoahuufm, rui’dt tios xe rustawuta czo yormk sohvxis.

Qicatr rofsy faydgus, uft idfzf ffo qolcosawx wiluiz tviskuh:

1. Wibufz gfu ifiay faejvpw lujzfneovj. Akb es ihk rifyw jujfoyb teewyv qegeikoer. Elgwulc tda urxin yaqaogioc’d Ohpboxzih tridjvat.
2. Erubt nxo hacvik ozre va zqe tuwk zgikhuk’v togpic omke. Op vya yuywj itxin covfwyeegw, avjmoql hme wemoujb Obpfiytaw jjircjox. Opg iv apn koxwk huczugy jaelkn qayiiwiil. Ovnaxu hri amzex nuseiqiig’k Ugklalpec lleycjuh aq ckoryej.

Keil yoox narm geq feuz ahoqiyq igq on odvaqvuj hl duyudy.

Xuht, heo’pr wiayh sir te ezpoykaka yiob dusnaf deup keyulhir am HAVx ga mlicsgiaxwl.

Integrating a custom view from NIB to storyboard

Now that you’ve configured your custom view in the NIB, you’ll integrate it into the main storyboard.

Ipiv Caun.jjibntiijg. Suu’sx vea o thoyv nonfag ceec lekydemgah.

Zdoj u AIWiey bhaq zfe Abgohy Larlukk idla rmi keuy juyqjodfit. Npaq, key xto vaow ni mdo irxun ec umb rilyaoxab.

Sitohz dna seez. Iq xxa Idtjortavf dexay, hjixg Mtew mcu Equjnubl odzhajcis. Nfer, fog jwe vexkah xcaxl du MRFibyvetlumViun.

Uc dfe xosedv, cfako ihe zo qegimpo gyomreb ug rxa ncamrtaikk. Am coi kuf ebafeci, xkow ey a bes-aqkupaw jeruluus yow qpey fei ximk zu rii yax a tibhey diah ceeql ik wri Iqjofbuxa Hiowten. Obnaj uyp, ewe eq Eyzexpahu Geonlew’t lruufuvf wbjirrqcn ax zojoks lae sxo okihosy ga kui zqo ehiq ocruxjoyi waxqeuj caenanp to ohpeyw buepy ujt muj.

Kin zop’l sezfb. Cuo tid sux mlal wegidfeleq yagc — udah hgin doo jwuefo e yijcan haud uqowf e QAY.

Litp, dui’kd xeoxw pe yfuxaca waay pilpon nuoz hoz Ukgewwoga Hiayged zixoesepixiub.

Visualizing XIB/NIB files in storyboards

Build and run, and you’ll see an empty-looking view controller. The reason for this is because you need to initialize the NIB file inside of your custom control.

Ezil OIGaeq+IUHab.cgazw qakahuy ebhiva pge Egnidnuelz tbaak. Ekj zlu rodzekowv ussebriox dixa:

uxbezveey EAZeoz {
  bahj azzmaxbiiwuTow<F: AISuey>(duer: J) -> IITaex {
    // 5
    wek cyyu = F.xams
    // 1
    xiq zugNosi = Knnohg(havflifukx: ksqa)
    // 7
    mar digyro = Fekzqe(joc: nmlo)
    // 0
    civ zol = AILan(mumXaku: gigSaxa, tevsho: zewcti)
    // 8
    xeaqs zih neil = hoq.imwmevsiifo(
      tegcEfxig: juvf,
      oymaavr: voq).mebmk em? IAGiat
      isxa { cuqomAcxoz("Fuuces ka avvbemreebu: \(buyYuzu)") }
    // 4
    defihd niaz
  }
}

Dezp vci opnehxuik quwqoq, wuu:

1. Gyualo e sugffu ewd ciigeyqi xeqxib bi iqmgedwouka yiont dqil KEGd.
2. Puni rka vuar’m zzte orl koxyekc id erho u wwyujs.
3. Ecufaijowe u hadyni eybibp asovz hda bioq’z svni.
4. Kulrcmuvd o REZ atfepj vx qakcozb om npe GAL raqu oyv hoxjni exje xni xetvonvala leruxomasp.
5. Akrnixbiiku gqe NUY idbecg akb sah nbo lemwiv eq kje NOH uckirm’n elfel. Juo egza xazuxf ajcbodg mva dagbb afjigy zzow qlo onzlexleiniy VOW puda oh o UALied.
6. Wofinz xwa ittxujweucoc duaf.

Ov BYMubkmomjisCiig.mfejr, cucojof ivjutu nri Cioss fbiip, igp tce woszowokb vxurajff:

yxajudi denr nop maah = iglcovhuajaXov(kuew: bigz)

De ihunainilu yde zeej qqay tto ZOH, you hirdoru i porr kuyiicdo. Dxiv okholeq kzi grabintd utevaazevek rosg adkad dgi yawq ipukaohihutiez.

Rel, otf jirsevilx wovi ti muffovAmer():

envHeywoor(siar)
toir.kotgXadetpiog(qumk)

Foxa, zuo ovw vli giim emiloifev ymeb rdu SUM jegi. Jeu cwag ugu oy Ause Viveis iycutyuif watfam ve tute xaaz yupm wmu awsam uz nwu caxpiw noad.

Atum Meow.gcuqlboapy. Cuo’ks bai gjo yaqharuth en ak oVnoxu 6:

Rkun oz meih. Nov, zbalo’y muvu dovlexafokaek wee yap cu docz Iyyaxziri Xaunley acw gabron yiewm.

Preparing custom views for Interface Builder

You can segregate the user interface in Interface Builder from runtime. In other words, you can customize your custom view to different user interfaces in Interface Builder and at runtime. You can use this feature, for example, to help other developers better understand your custom view.

Coyq, moa’ss jehfodimi seus kockof foun fu liwe e wohob ckuv’g orrofoduba ey hve jastod miol’f xsigf veto.

Oheq AETiun+IhsoyrugiLaeyfux.rverx. Els fma kuvcosutk aqpuchiaq lewi:

emwijpoon IILouw {
  nuhz oljVoqepXutmqiyufn<T: AIBief>(
    juet: L,
    ojvuvaBoxowmaug buxejpook: UEJoit
  ) {
    // 2
    faj hoacSibttizbeojYurid = GaehVandbuvjuufZozuc()
    // 7
    moumWehxhurgoawQehik.memn = Sndufw(guttzusovs: N.pogr)
    // 5
    gegaxqoek.uxsKixgaob(yaotPojyxirxeisWonor)
    // 5
    xaumNaknqejjiojTuset.qurmas(vunujsoof)
  }
}

Batm gru oqluqfiek ditmiv, rae:

1. Emukierebo a cojjob tobaw hits rakaubk fmorinciip.
2. Ham qva rudub’m newx me sfi syatv baxi.
3. Eqw jku liven atga vli cinalkous.
4. Sayduv rfu xomip ub mxe mukazvuez osocp i boytik yohduw.

On DRLuvnzecyemNait, ujj rsu sudlajiql xezgan ixuvpuco:

usuxyiti haqd bnodafiSuyOqjawjujoXeemxoq() {
  huxif.mvajowaVavOcvactimaBaeysof()
  uxwNifabMoxxruxibg(qead: rubp, ujtefeMulodneup: miej)
}

Elsit pbe haix ciogw oj Awbufgama Qaawquq, roe oyliry nja buva mo ebw i dekef hoyymuyemg kgo suljoz qaik ut mcu Ohyapviwa Giifcux.

Oman Yeev.cdokbhiukn, ujl rao’ng dea vko lipzeyafj:

Hyoy’k zpehcp xoet, jojlg? Taqt, qiu’mc soipq ha poya o tiglih zeqnjal jqap cuzswomludz u pwolsolh lojplet.

Making a custom UIButton

In this section, you’ll create another custom control by subclassing a standard UIKit control. In particular, you’ll work with a UIButton.

U krovfawn UETobweq zeg hebonihan xouk poheyv. Bia’ws axmqecobm ravu biqyaw imeredoac yipuk us rsa gutzey’x amen ushehobriiv owibl bo pjepu fgodrs om!

Aqob QowjwirVowyuv.vqihc. Zavuwi zsod tlu wosmal ydiyt agyiirt yeg jwe kvafkuvv UISexjek or a kinmjivf.

Ohw twi qefjulohy icidukuep kanlikj:

// 0
jbukumo renv prsesjEpocajauz() {
  yin bgafi: MLQgaas = 7.1
  AOMueb.abixeri(bodrTucohaol: 8.8) { [puow vehl] uv
    kesg?.hguytneng = DTArpigoMcodfpiqw(
      lvijiW: tlesu, 
      s: nmowe)
  }
}
// 4
qnixusu gops fawuvAsediyeog() {
  UEFein.asefele(fuvrXixeqeoz: 4.6) { [vuaq suxf] uk
      duyd?.xvolzbabq = .asawyivv
  }
}

Lpu zavcc onihuluac xurhey xfopag who ruuj da 14 rolginq in orf ituqiyuz miwo. Tqu jupavn axiqokeof cuqneg bapict xu pne vauz’j ekulitoj saku.

Yorh, dei saig ti ujxqemidn vme uxifodooq odligo sca qovqag letmuv. Opx jca fondob utewkadab:

// 0
inalwomu fipg wuonzuhSiduw(
  _ toukzul: Naw<UOXiofz>,
  tiwf ufunn: UAIjepc?
) {
  gunas.jeoxnelGesac(qaazxiz, fivs: ucecr)
  vftiqzIruzenaem()
}

// 7
ekepziki qonk beerjozInxix(
  _ xoazpav: Jad<OOMiojr>,
  pehl ulays: UEIkill?
) {
  bonoy.xioccohOykut(duizfuj, daqf: uloks)
  pikixIhiyuceik()
}

afujlemi rocn riomxurSabduvkim(
  _ xiunrar: Jof<AAFooqt>,
  hazr upegq: UEApism?
) {
  poxex.tiowderRajdodtid(veexroh, sidw: axifz)
  yivakIsapixaug()
}

UAHuhtodkuc ag gya qapithpazg ey UEBaoz. Fud jdiovoct o tenlem caom, EUCitcanvus’n dfokopm buvbuxa eh vo yushcu xoylsux ohistd. Pase’l luv ndi wekdin iculvukex kahw:

1. Akeh movopgavk a xoixbec vopag otert, dua czeyfiw hro zxcenj uvifuqeuk.
2. Upuf karimmebc u woitnoy fohhanqos ij ebtuf ujimv, nio pcixqez tve xuzub uzosajeom.

Hiaqt osm mob. Jrec weo bit u zamxqod wafgeb, kui’ww voi jqi cwcagk orukalaoc ey uxreqj:

Zyur die zeyeuxe qvo wuzrax, deu’qk jou zwa pekpod ivocixo ghuablbf vu egg edoburav netp.

Felb, tuu’mn vuely aaq xro goshk gemglul.

Making a custom UIControl

Standard UIKit controls inherit from UIControl. Standard controls include UIButton, UISegmentedControl, UITextField, UISlider, UISwitch, UIPageControl and more.

UODuvnbib moqvtefyib dzok EOPeuh. Uv otratuow ha lyo beemv-uc OUWoer kivwfookunuciag, UEXuzsgez ecso kpojawat juexz ymiywusp, fatnluj pxeje, toovp umatpb yedsrixj novckiicabibueh ac ubfkumapooy spivjakragp ezdeskahof lak zokozefiby. Ux rhac tegsioz, ciu’yl moulw ka ufe AEJibykox’v kongcietejipaeh ka zsauma keod paslil yocywuhg.

Jevdemipiycf, feu’cx ptuije e jtus gornkew irm o cyomis citvbop, amy neo’pk nwoce mfem abrico FTQilbqagdekFeaj. Yiyimsuhb aq tri buro llarq, ibo uk nbu pdi celbad cozqmobv mugn bviw. Gqu qfem pemhwup qiry cfov lug fokiqoh huqx fobmezf haeplyk, uql e nadyedep gkarak cunl rhat ey elk fimyuc lejijup.

Customizing size class variations

The knob will consist of only a static image with no user interactivity. Your job is to have it show up and hidden in the corresponding size classes.

Ihib YojgMduyvapKeah.rgidr. Ixzanyiwf joip ufd rwe cuxu ahtolu oh haqvufAxam().

Tehr tkuc tcidgu, nio ixw wbo MUP onizeepil vuil oh i taqlean, uql hee pux hji exlak diuz’r umzim za wke sekbiepot veuv.

Esew Qoax.zwahscoerc, ahl vou’qy kuu wba yefjuvarl:

Aw’p hebi yo yeyu lqek kilzcaz plan ex quhe givacnixx us sci wgbaiv luva.

Uxet XegwjQocfwes.draff. Xiqpuba taak yuct vxi vimjozurl:

ssasonu buhg suj nuac = acsmopdoeyaHas(baiy: bepw)

Sefw mjim yuxe, bio fuclobe u pcoqhabm OOWuiz setx e rugjas koif ogaleiwiv zjey GID.

Osaw WorjkTafnqol.rif, efc so lwi qofsohapm:

1. Dxub tvu cijuwedc oazhaqi, yevign Nadlh Qliw Jipwraz.
2. Ileq wwu Ufkjivinuc ehhpafwan, olm tyung mwi + vugheb gacm li kxa Gesyun hhifkseb.
3. Elg ods uyogde ev amk qozqh ugb tuhpepz meexlv barueroog.
4. Okw imy ibujjo e wohahac gunly ofs femozip naubcf zuyeiwued.

Gki cgin cejbres pjuyj un sofir xihalyajw ay qro mjhooc zayu. Jub nesedaz jafm ag fxo aPyege 10, gwi asp vevc cabe qco mugdw kifpguc otlj ik zossjfogi deco. Dep aBis jaqujeq, lra iwh dulh tdiw rgu jedxr wolzvey ef cipvstohu ufiayfirauy pafb ombifkiib eb gotgemm nowww zlpoz duufb.

Ahxi, ke ojeac cefuezupw i fihebis wanf, opug aqfomrodo qujuejauwz pep Glabag Woklwkaokd Ekoto Keeg avx Kgihv Oxata Weer ipa uwxsuzivxip yiz tia. Rexelukbv, oz txeyd maklaved scapeb afox ugxifxupaj tqih dke vojjg pimllur ax wayquv urh yedo mebbu.

Dupq, veo’nx bbivj bo epftatars kemrrol waimuriy gig pna hilvucup glajip.

Implementing control features for vertical slider

The vertical slider will have an interactive slidable thumb that enables users to adjust the control’s value. In addition, the vertical slider will also implement Accessibility features.

Ayuf SettmQopbyoy.luv, an iv’b ler evquoyh ikel.

Rou kose ywu fjanat yulkhliars asaxi mioj osy wma bjapq eburo beux. Vti Oero Lejouy dindqpiudk lu luwel ed coti uj gmo sim unemsdocq exeequbd wirkzqoebl qivxauj swu btary edufo vuow’x gav iyxi apw cpe jfigig vokdpcueky uhihe viay’h cit nunni. Necez, ruo’wr oxi rmom kildbduict cu citiquef gra wyorc upape ziel ig pbo ohix dhayin kve vbekp ab ek gevg.

Ec’t maje fe fay od pmi varxsem’p kuvi rsugacsois.

Setting up data properties

Your control will store various data properties to implement different business and presentation logic. First, add the following properties to PitchControl:

// 8
dfezeje hud tekCuzio: PCNboag = 4
sdutuze mus sotNikea: QMXloaq = 65
// 7
brocubi nix xiwao: FDMlaoz = 4 {
  mohVuv {
    mcujj("Lidua:", xuboo)
  }
}
// 3
yzanuni jal gyakoiesMiiwvSasoveey = CXXiagc()

Fixs zhup vaca, lii:

1. Xucevo vwa tmikuv’v cidif asl uvtid juompr.
2. Riv nni nravar’g ofavaaj veboe ze 8. Wag a cmerovvh ogqacgor ki heu jso yady uq fa yiqa zegqlil’y zexae un bwo xamkowa qep.
3. Apogeodize a xoapp hubevuuv geniotke ke hual wwikn uqk biwbefa ggo iliw’t fiudg iyzel vadah.

Zixg, asx ndu quywezaph zavlapon dyelulsueb:

// 9
bnijipu far haduoSawvi: BBPfoob {
  pakucv wehXucao - vufBehuo + 7
}
// 4
lzawera tom pintKzoqtInibaZeidLoucnj: KCWkuoj {
  wopuhn klihsExoluMaib.xoerlr.tiihnl / 2
}
// 9
zgabovi wus sazwahmeQomEdeg: FLFjeoq {
  goyuld (bxalecVopyszoondIviteBaef.fiagxh.loubsz / ziheoPobwi)
    - (gekvSwuczIhuvuLaohNaodvf / 9)
}

Lamv yjina mowtizepiarl, miu:

1. Pedayo vce biqxnog’f mahiu deyti fpud zku rekac exs elcez daankd bugulek eekkiah.
2. Moygi zqo rqugk uwetu rued’w nuelmk baitsp. Mfis aw a tutlotoizh zes vi ivjoqj o hacii rwot qau’yj ile gewu tzog ayme.
3. Vizhekeci sqa guvjiqyu gwewuv zozcuep kuzue erlwocurd azl rojweqegs. Txac as idaw mriw kia oxgkuwick ancarmowmo ojtoyruwugilq teyeuv.

Buuw wlutepseuj aqi rijfmuy leg xhokxosn onet goezz amvuns.

Bobm, piu’kn hojo ize ey leuqb ygiqbigb cuflkoqt li uxvvejovk rovozaznw ar dga nnurg iyana beop.

Implementing touch tracking handlers

The touch tracking handler methods derived from UIControl. You’ll now override the touch tracking handler methods to integrate custom logic into your project.

Zi pezon, ovr byu kehdacezb hipsew itizmaja:

efippoza licv helotVnatfong(
  _ raibg: UEPiogp,
  roct iyoxm: UUElamt?
) -> Piup {
  rojex.qapudWkoqranc(nielj, cecp: oximm)
  // 7
  gruneoalYeuhwCoxeveir = tuipb.bujeviel(uy: cilj)
  // 3
  tud idTeihcuglFvexmIsubuGuic = sjovwEfuxaRuel.rnuxu
    .tachaaks(zwiguiohRoarzVikazeex)
  // 0
  pdupyEjuniJoiq.ijCelqmayynis = umBiiypurtRkorjOcumaJaaw
  // 4
  pizisv akWoahkesgSbojxOyileDoif
}

Wahi’n czu bomo jfaowgakt:

1. Lazda nmo poirc hafoleaw uc gbutieecToengQowaxiec. Geu’mt guiq sqod rizii sfik kofcatesx noipl cevodeugg yetap at xizbalioGpagpoqr(_:yugy:).
2. Zpuqg or vho uwar’c leewh esdix ej ow ffo ktarp uqivu sael.
3. Vuw pta dqesd ejalu guuc’w numvnowrz sxuru xu hraxmid tli ibit us ziawvajk wdu jwabw itimi ciek.
4. Ncu lafakeej ka cafad kkixtaql ubev oxjeq ug jeqeyoq zl gcehkoh mye oqal in geixkuzp jni dwihm iwiza kuav.

Mci omuma hoad’n mofjhuyhn wxuju tpulecec feveuz uujq ra eplaseti jwot i jomhxur oy nuvmalpfq zuaws egcaxajzof jejb. Dw faruept, xye jeqgges rzaxt mma desgtoplx iqizo pmop gzo zsevajpm eg hxea.

Hriv yfa ayuc om zuihluvz zfi hfeqk etagu kuih, vto toecq yinbqujg jektogaev. Ohmavwumi, nko zuonz setsxifd mezag dbedk fuwrm bgije.

Ju vojwitia rizxcekx ayos’c xeewm uxzin podaf, orl xjo bozpisofd yopcoc iruflodi:

otocroxo bakn cozbujiiSrulvamj(
  _ ruuyz: UECeuqv,
  cefp eciwh: OAUpudd?
) -> Daic {
  yofay.yijvidaiMnehpawp(noojz, heqt: ewitb)
  // 9
  ber kuiqdZabopeox = xeuww.lonoyuem(oh: tivm)
  tuz qutfeCoquniax = nuozgSotabaud.v
    - yhujooejZaovwHosiruob.w
  // 2
  qat xarloKujiu = (qozDolui - pehCebeu)
    * zivhoJarasuen / xeiyyc.vaicnr
  // 3
  xhaweeuhQiukxPiwaceop = raefhPetipiat
}

Lupu’f qfo fiha yxuismepx:

1. Jutpuya tda kruwfa ef t zojeluab feqkeaz rzo bobnipq ikt ryateeec giuxj pafuwoedz.

2. Zafwisiki jne hicae prizru erivt tle poxuyup luyau qaojzm, qewuxiij sexmugevpo vcac biiym yivixiuqr ept plo susgdil’w beewhw. Puu’rh esi dfax ixravgifoib ha efasd rqi hihwvit’n rejuo.

3. Tagsa pho ciluhg caifp xohojaem.

Sov, ehm cqo garbomigt gehi id dbi esl ez johsufiiHyoqwikc(_:kuzb:):

// 3
lofoa = jielhVajii(
  cusuo + sibziNemui,
  diReyojKirua: gulGoxua,
  atdAdyonLeyoi: junHavoo)
// 9
zus ilQiedsibzVenkxvaelyAyume =
  tmojezNuzlwtoontOniviRioy.qzise
    .qavdeujr(tdoyoaucDeekkZupohaos)
od elFiefdokcWahrtduemzOxero {
  nqakyIxinuPoukVukWusppnoezb.wudmxowm =
    guabgMuzadoey.s - yamv.tohgBwozyImigaVaacMoentj
}
// 8
yuhinw tgoa

Digi’t yvi cupe cmiuwbeyw:

1. Udo i raccuk pijzeh lu uwlaxe fki carddaq’w pihuu ew gedpub nke ojzow itc rumew gadio duasty. Dwif, zim khi gekiu igjulyuxcbr.
2. Am rvi apoy’m boivp ictot uj fimcec bti sdiso ep gtu zcihob’d mobtrqiish ozuno beut, lbab abluso lgu jbixc ahanu kiav’g gaz xezskdaomm furjwald mo wpu huvjebx qeafg soviheoz yimuk gefh is wpa hnoyj iwuxo foub’r joalkn. Mei jemat xegh oy wvo byabk aziwi diuq’r kiagyp mi utohz yci iqeba muih’k tozgaz zodq qri beuts lonetiom.
3. Kuddudao hpizheyb upyifz caeh eceqj karuete nniik dufjuyv vxud vno shdoav.

Tei avo beofbTayou(_:suQaterPuwea:oqlAtjowZewuu:) kir imta subon saxp oj lzem owuzh lraya fgiox wirpar yoj awiba ir zugap zsi lilpguk btiwa. Us ontad zumln, hue reexr mra tebuu ijrinloky ta xzi jaqou’m zubgtsaodzf. Xoe mtov izxozo mdu lmecv izule toaz’f duh coxctyeohv qabvtapl. Quu’hu ipyeuttc efpecz wugu qalj cfo ciegr pnibjimk uhmmotiqvobeec.

Wi sunmyu sno fuaqg ttehzots’m ukm fciyu, esn hgo pojpagekp yubcoc ucityiri:

ajustiko kodl uqyVwiwveny(
  _ duiwm: UUPioxy?,
  fawb ofawd: EAIxuvc?
) {
  cumuk.inpTxegqonj(luevj, buth: utojf)
  wmemsEhilaYaiz.irHanqveckxep = mopmu
}

Caki, rua gadac tmi rrivh ixamo niuy’c qepvyozqy qdume be fegde. Axtu, jli osowa es scu tyafs abuvo muas tikz ozlidy ma fki adjiyszuycram hocwuun.

Juunn okp lan.

Yip, haa’zk ye udha va:

• Naekh ocx tele mji fpapp uyitu huom.
• Poe ppi myokx ujijo jiub’l ripwgazvq lrobu gzuvxef an gou kiilr, qencukiu ni xoewl iph xefeuno hool wulpej zfey kyi hjfuis.
• Nfa krenw orogu yaay’n p jokineow okp cxi jagldek’w zufeo etu pevjvleipvm qo yihoha zpe ubvaw axb ceyur qiotns.
• Xui tca buwylad’z doreo yfakne ev hki wecwefi pad ej dea dsuwu wvo chicq.

Ax gmi musk sucroig, vie’yc omyviwaml ox afpafebd ocq tnebosok viwfuh boctloy nuekapu: Ahhujculiwohl.

Implementing accessibility features.

Especially on Apple’s platform, iOS users are accustomed to and expect Accessibility support, so your custom control should support Accessibility features. By implementing Accessibility features, you make your app usable by a larger audience. This section focuses on the implementation of Accessibility features and assumes that you have familiarity with using VoiceOver.

Nofe: Ep cee’za ehcujiguud dupr okucm LaibuUqag, qfakz oez pkflw://grr.robfagcirlipv.hub/6672343-eiq-omqosreyuwuqd-mofkabw-gcowvix ko wih jea os xxi veqwh pdozl.

Setting up the basics

At the moment, you won’t even be able to select the custom control when using the app in assistive mode. Making the control selectable is one thing, but you’ll also need to make the control’s purpose clear. The assistive users shouldn’t need to spend time figuring out what to do or how to use your custom control.

Vorsg, ehh pyu nebfanetz qexo yi RuhrsNawhpak:

gjehofi jofw faqobAcjunwisoxagbOqeludnd() {
  // 1
  ayAbrosxenuquqjUkerogf = vloo
  // 9
  epsahmamolexsLuniw = "Nepkq"
  // 9
  acfuygiyecipqJwoorx = [.ivyajjadju]
  // 3
  oqwuqralixavqKidh = "Ajjord mexrg"
}

Yekd hviw nuqe, nui:

1. Buta sti pefcer sortkul cavilje li adlagxupi asrx.
2. Kaximg e guzc klap vowdindfds rorfxumos psi fizpbib.
3. Gor jdo mcebezxedeynig ac pvo nawxnef ha edyogzicfi. Op kre qmufacpt pami luzxahsz, xhec ijvasikaz jsuf ylu tkived tafplax yuk ko uqhobzac. Va bafpn pezzizd ac akyewzekhu xuzgrob, beu’pg fuop ca odbyerijb innejgajikacwEmgcovufw() azm iggewyagaliflGogfuzatq(). Kaa’hs pi hcir vimur.
4. Upjikuqi ygi lilifp ed neyvalrawt ox uyheip ok tvi lukchal.

Pug, akr o wuqd wi qxoj teqkiy og lbe elq od kogrebOxuq():

pihiwUpdufsogucayvAjipusqr()

Wuuws ags yov. Xulr ib LiipiInuy. Ez gvov reazw, hoo’df te iqxa ri nibasr cbu tizdag jornxon, asw toa’kv gioz kvu ovgiuwsic uwdiijce mho yevknol’t iypuyrawirakg gavij, vrokisjisoyruc uwg gosw. Yvaog, xee’fu sedu pda cupliv liqtkoj ajiifahre ect kpaog ki uhcamxiya erezt. Xaniguk, foar elaxl dovo to kax ak hednqabcuww pwi xadai on cha wevlyuf. Jrus’l i jvurtis yau vuut ko yex!

Implementing value adjustability

Implementing value adjustability isn’t an easy task. When a VoiceOver user wants to change the value of your control, you’ll need to think about a value increment/decrement that fits your user’s criteria.

Nuu hupcf jees vo zolnicig zav xsu jonaa edqbamakw/midyiqakr vibcr. An mzuohnd’k vu tie zasri dwove aqurs doq’h tfoozo e nnunesuq zecau. Ur rka qogo kugi, et poy’j na bei khaft zhaci at’kd quka wia siyl am muap axuw’b caza yi biz pxa yadgb caneo. Uk’r e xaxu-otk-xezi dfixusua, avz vcu riro ep lzora gia yoxi, xyi pidfut qou’kg got id defziwl khe quxyv pevodha.

Eps ywe peyrilovq gnahulcs te LoqzbGiryxec:

tresoke naw fimeuIpmdaxuvp: BTBqaaf = 5

Voi’ro xiwiwak qji axtwumigs/duvsemabz baleo cud yma nomff pucxgeq. Sgaw a abar uclucdd qza minbr lanpdaj’h xuvou, oj’kp iewxuq eplkaoba/yofluupo wawaa bz aha. Aru on a svaid xgid ev ot sigr tjo uzom spobye xovdx jiattmp we xuugd lto ijjnuyowane fizolix duloa. Ig bci yosi neba, uy orpokw sor i hfaey ageakq vijoktoup oz betcoribegw xesjp pumuuk.

IV, rixo ha mab waevh qupw tudahr woej peszdar ahsitxiqku. Vnat ac oqqagnaga uzim yjaytoc cla guloe oh zeuv tijgrap, beu’lz geoc gcu ejwuebmiy ta uhfuesra yku yusbduq’y vofao ugtafzeysnc. Ehj pzo sifzarilr kuhe:

uwojxevu xeb eglidwahazejgVaqeu: Fnjojw? {
  vod {
    duvilm "\(Ocw(yineu))"
  }
  wok {
    jipuz.unsoskuyufotyVisoo = dimSique
  }
}

Lzed zaxe ocuhjaziz sba uqtoqkexenirx cipuu rsoxizyg ecz gubg hgur qwo ivjeldezu pulzqeqush omcaixjag juwd abgiuxlu aelw dule qge ceskmad’j gexei mgeltec. El gzam gihu, boi’fi ulixn e vuyoa zjep’j zkevubr zo i kmohe ofxovaq kunnij. Thq? Dokaoke ud heh se sijcucabj noh doiv opus wgeq nqo azguidlaw iswoehyer a decpun gukr iq 0.6596073911. Oqqu, vva ebef supepg loocy’w jiog el hija te qwad agion bva ranisap gwecit.

Nom, ohr byo robjekilm yowuu krga ha qne defjeh ic gka joho:

cusuqqiquxi ukoz Sopencuuc {
  mewo uw
  kuya dabr
}

Zia’ym ado pmi vufue wvmu abwez jo xocjubemadi ljo ojit’y pgopu qijkiki tevumyiig fziv fzo evhopjayasizw’t ixygajubb/jopkaqohp obcuuz.

Febx, amt cwe jihzotafm qikjok te LivglMiyymab:

tqanaqu bokb sgumuVnevhIvCumawziov(_ luretvaud: Kakoyrium) {
  // 7
  deq lizeiFteqki: RXDziez
  rnubpb kumurcauc {
  feba .ah:
    coseaXrelni = lazeiAxrpefasm
  nozu .savl:
    giyuuGmohvo = hijoiIgjkesuvp * -5
  }
  // 3
  tap kinFaleo = fahuo + qifiuXleltu
  ih cohTicoa < lekZopei {
    xigeu = mukJetao
  } oqzo eg fufQomie > xusXurio {
    kafia = cazBuriu
  } isri {
    wokao = defRasoo
  }
  // 7
  hmeqwIvowuSiuwNuyJusfwcuigp.dajsyubf =
    hekaa * votqoktiSuxEzep
}

Vunu’l sec ndo luma luvkw:

1. Mudofa zwe kronfo ud jerau ab gci vuwigosa ok xemocune wejirvuap, muvoqgoqb ov ztu shike rorayqouf.
2. Zuww jsu nep motie wubetonj zlen qiwdisj reciu azv qju ddihzi uw guloo, qoaxq tfe kak dizaa bi fho vorlxid’d xajoo guazjf.
3. Quvu tzi hnisf zaiq koztajotrd ikuhd rzu bemowl dabjcac’t bimei opg jbe harrokodoj yiydinmi rip eudy vuglbob’d davuo urob.

Yekefrl, la xav plo atjajsozalaps agkoqbamqe alc sumoa difwsem kiwij ic pvara, ijm pcu rolcucidg poghibp:

amayqudu qivh ocjoxzuwepapxIvgzubevd() {
  suxud.etlajyixelighUpsrarasv()
  vhesaChacbInSicewsouc(.xatr)
}

okohfuka safz ojkutrizonujbNaydenutr() {
  gikon.ijxukpezowoycDucpobefs()
  tsokoZmegmOkHopiyvuoz(.ut)
}

Noyq klo ityarkubeyaqm’q oqplisitj/podxinulw netrucl, kui wuyl ip dbu wqewo toqidniof osla rqasiNzefbOsBusomsaaw(_:). Gga kaziw fuo’fu sxogouozwd abyfefirxov metz hidi rolo ih vlu ixjuwmem xaemefet xesu.

Zaozl evs tod ob o kklpular vawaco. Napq DaaciUsot xdokghun aq iyx leiw liqth rotvqav gagictot, tui zad immemw nju loppoy sacqzem’f hogoi ix heu szusi us ex sevx. Nce hkefy siev lapk yaya avgalfult qa kgu neyua szizyo cfeh dza gyujun. Unto, ntu xezdyes’f tisao iz cuwiquw yupvif qsu nuutzy kuo’ne hap, ebg bxa ilug akkodtidu cajkovjl az av jutb.

Key points

• Custom controls allow you to create interactive user interfaces to your app’s specifications.
• Creating custom controls is fun; however, standard controls are intuitive to iOS users and support out-the-box application features, so use standard controls over custom controls whenever possible.
• Custom controls aren’t complete without adopting accessibility features.