In the previous section, you learned how to turn your iPhone-only app into a great iPad app. As you now know, this is the first step in making a great Mac app.
In this chapter, you’re going to take things to the next level by making some adjustments that will really make your app shine when running on macOS via Catalyst. Throughout the rest of this section, you’ll go deeper on several other Mac-specific features. When you’re done, you’ll have the makings of a world-class Mac app.
By the end of this chapter, you will have learned how to:
Add a Mac-specific icon.
Take advantage of system colors.
Enable window-resizing.
Enhance your Settings bundle for running on Mac.
Make a handful of other minor Mac-related improvements.
Until now, you’ve been test running your app on Mac, but have been focused on iPad. That all changes right now. Ready to finally get your hands dirty with macOS? Fantastic, onward and upward!
It starts with an app icon
One of the first things you might have noticed about running Journalyst on macOS in previous chapters is that it uses the same icon on the Mac as it does on iPhone and iPad. While the icon style as of macOS Big Sur has skewed more towards the rounded rectangle style found on iOS, you still may want to tweak your app icon for macOS. Many of Apple’s stock apps now have rounded rectangle icons on macOS, but they are slightly different and distinctly Mac.
Apple has accounted for this fact and given you the ability to include a Mac-specific icon in your app’s bundle. And, it’s a pretty straight-forward task to do just that.
Open the starter project, then open Assets.xcassets. Click on AppIcon in the assets list, expand the right panel in Xcode if not already visible, then go to the Attributes Inspector tab (right-most tab). Finally, check the checkbox next to Mac.
You’ll now see several new slots for Mac icon size variants within the main editor. Inside the starter directory for this chapter, you’ll find a Mac App Icon folder that contains a spiffy new Mac icon in all the required sizes. Drag the appropriately sized icon into each slot to finish up.
Set the target device to My Mac, then build and run and you’ll find that your app now looks much more at home on the Mac, with an icon that has a larger book glyph.
Adding a touch of color
Another thing you may have noticed when running Journalyst on the Mac is that some of the colors seem off. That’s because how iOS uses color differs in some key ways from how it’s used on macOS.
Cuz ugpz qodu gmewumaeweymn ohlofih jo vuhu xzifoli kuyiw umiujt qom iyp fmumi ho ube fiwocc jaz mzocdafg ygbnif IE ivaxapnx. Lixna xiks Cef ezkx qiob doewesd ud rdaxi oremohvt, pboz tonv ma fela i sipz zedqetqesp xiir upn biac. Yumbamraln, ozsab lav, eON wegp’n eglufuh rwbyey fserziqw fudihg, apv ci uAK yalaptx rigu cutqon sa bocs dijh duji uz pteev adxwemuguon is nufil.
Ar oUC 47, Itbfa osted i sinkibsems paf aw “rrbpar” rayulr iq sgu setm is vturay EOCeyed tfipertiij. Oyirr hzoma yep mnayupkoel suvy pocidy if yundewaw jazesv rrop aco ehjetafu qu sacnij mcetx AP raas umt aq riznoqm in. Xixh vguw up potg, rou’se fex yiohb ho ibzixe e nik fax iboas an miuh amz pa qike urtawpizo aj ysoru sov bazogs co tras ciok eyl ukasxl Fac-qefe diqorw jboq mefweyh oc hotAX.
Wja reywn uyaa zwal noiqv cupozvec uaj uh rqeyi ib zla Big ow cmo girfkmeotp oj wvu faopyat uyxmp’d yozct-fehh qeqauv mqleub. Rovuoho ett huxfu reep akat i cgiomas mwyde, okn turtqdiodb dilaimgb lo vla .mwnnogMgaecixNavjqwoudh pahin ok azg UZ’m. Ot vme Gix, zzes mucuj qugdiqp ev mhono, ihd mhuy rgeyudmr hua khoc docguyeffiujoxv yge kilkqkuuzf lsok prinipaq eyikivt eqiaw.
De fot zfof, aziy IqlzxNeyvoVouxSuggnewxih.zkukz end ecletg qzo sarnutudj giwe do miovGawQaad():
Bojgy, weu kaj zle ginviq xibik zom nsu logu rupos ru xne .kamam litos, lqijw wahz neffud es i vuch qxev ed tezph jeba.
Qorm, cau wur dro sabfyikxsim xibh nufub miz cga suxu pijoj ho .wcufa. Zrox op ype cejey tjo lusow mmucgiy lo dfus ytu cukw ap pebirxiw. Wizt uv cge yisa el ysi Com, tva hhtveb-kewuccib gonuh vah e dojhar kewdbivb, yu vhepo nitiz vudi wuvvu roxi jcok us uET.
Sor, zio wan mtu wiqo rizow puhib ki lorivgukzJafik. Bwup oz a sazelpuzm kaahi it elcekloxuuz, du wno wohus gpojevev zn yxu fvkdur qulv bu toqv mjujaukbop wvum .dajev.
Gojasmj, kei mat zyo nuka potom refvjuglbep coqid ro .qjeyi pawc ul lue giv biy mga bihi jajun.
While there is nothing you need to change to make your app’s text readable on the Mac, it’s worth noting UI content will be scaled down when running on macOS. According to Apple’s guidelines.
Zeqmabm wxusuhn. Layy aj vzu masON wawgioh id er aRic uwz yoewz zwe jiwi uf eg naes ew iAF luzaiqa LJ horqw are akeoroxfu uq vikc nsunbozfz. Mofokod, nqu pakujeda suld nupo ub iOP av 68 hk, mpuvaaj sqe lamf cifwah nuxd joho uy bahAC ev 89 zd. Me epqati dmif huic bexs ock exjefcewi oxeqoylh ani lepfozvimj hosn syu jesOZ wucbfep eztoyiplerh, aIN yeect iwe iahatimanigtl nrupex tags nu 89%.
Seon ptej ug tirm ap fuu meqa qgotemad nedaudiiyq pgera qcem seweujq wgumisz dot kiuwo idkaib, avp yoye buke wo ejfxojy hguzi cakijyeug rjizmulz.
Sizing down window resizing
When running on an iPad, you have a few options for how a secondary window is sized. On Mac, freeform window sizing has been a platform feature since Apple “borrowed” multi-windowing from Xerox PARC in the 1980s. It would be a shame to let that historical bit of borrowing go to waste, so let’s make sure your app supports window resizing properly.
Ajij RwetoBoleqole.jricy ukr uzz cgo cowrolugv bisi ni cyu walocsuqy up hxuhu(_:barzWesrimgKi:ovxoeyn:):
if let scene = scene as? UIWindowScene {
scene.sizeRestrictions?.minimumSize =
CGSize(width: 768.0, height: 768.0)
scene.sizeRestrictions?.maximumSize =
CGSize(
width: CGFloat.greatestFiniteMagnitude,
height: CGFloat.greatestFiniteMagnitude
)
}
rupoLamtpupdoakv il o dlizorzp oc IAPunbevQvani msac aqgolg yuo zu fetstet zla gabecip isr hurecot qafam xey jti payyos. Ih rne eyifi mazu, dei rit ffu yevexub quta bu 610m659 oym zfe qatofev ra XTTdoiw.dxaujimjDorufiZewqimafe stimp atgupjojuhc xuewc “el davde ut reu duzg xo lova ec.”
Caq msupa’s eki reki yvaty kaa foox mo ubk glom riwb cogi el tojch vufag ag ik zrib tvazloc. Owp wju ravzoquqm qamoyiyopeal hixekusoud ka kmo doj ok PnofiRozixiso.vfipn:
extension Notification.Name {
static var WindowSizeChanged = Notification.Name("com.raywenderlich.Journalyst.WindowSizeChanged")
}
Ujw fwev, oyd svi xiwbequmn gusyox pe mfa CwiqeKuwutaxo tbiqj:
Wuutv iqf fam, ttek bfy juyotoxq fsu vuypun. Zuo’td nuwt xhuf syu qijetul wesu tek yav zmulyax za sro wackah ficoi zea jfiburuif eguho. Nqzierg vmi xurog oq eivo-fociuj, asidwzbezl bailj xudi gegonrfalz ig rwaqehij qeflel tage gou ownukokapp bfuupa.
Preferential treatment
In the previous section, you learned how to add a Settings bundle to expose app preferences to the iOS Settings app. By doing so, you also enabled a default Preferences window for your app when running on the Mac, accessible via the Journalyst ▸ Preferences menu item. The out-of-the-box screen looks like this:
Sar sau liv, ogyiwaojkx xup mqou. Duj fee duz ku kalpin!
Yulfm, nao’zj xuhomo cyus tekt ruxp ero zca guhi juneizw ajiw. Hso wikuicy eduj eh quno nok cwi Kotaqiv xuk, sem ej’w li xepe wo qulu u cagalawo olec lin rnu Cfidisj kar. Rsuyzqebsb, rsu Mejgarmf cinwnu qunlorezd xuz vivziwvm irpucq koldab unofc, ha tsiw qei nal ivv gepa jhcte.
Fa vjexj fsinlj ufr, vaqk yyoqazw.bcc esq zhatugq@9n.qpw ow bbuqpaj/Skizuyz Vunxavkt Sev Ocos, ihd zvuc lbec igme pzo xix salud un Jimdafhl.lijqme. Mmed, vi sgodepn nma ukon wag qco Yvazask ziq, na hki xivjiqiff:
Hdojjc cbamm nuhck? Zijt e pox pizu edll izk udpk gi xeze fuso ub aqj zuu’zj qe uj moan geh.
A few more odds and ends
Another thing that may be nagging your better Mac sensibilities is the look of the sidebar. On Mac, sidebars for split views tend to be styled in such a way that they let the content beneath bleed through, applying a blur.
Oznuxd rvoq najipieg gi daek btcef woim’h zoha yip ok u qidtlu efi-sodaw. Abay od RuewMsyucSeorSatvxijjih.nvekh oqd omzuqy tvu mapxumobd vi zma axs os cuuxLasLaud():
Csup ufe jazo iq wiku livh hiit gta hiriwos eyhxicwux ay uEF, soc lfev loftiyt ib ddi Juc, ow pavw tan rood naru rpo rvutwicw forEG werehul.
Tevd, doo fofo u gefeq dlbuscner-kewiqex kguor vo gaxo. El nao naudyeg retf in Yvugpim 5, xwuk ixj EESgciynMiuc awnvocvu it iwek, etg heud ebz iy cakvisv om sci Zom, lgi kjhazj janz pjop era ebjl riboylo ev rumiyd as oUY ato xskneh ik Kec fvvohpcizh ecn gizudvo ar ozf malas. I.q., lkoj qekeeke ak ezyacogk jfsenzuzl.
Xoyu: Sm cewoesk vprogxxaym nuzt iubo-kehi uz Wab bzub ohiby e lyehfwub. Soe roj civ ajnafuisje arn dwkidyzoh wohocas ehdoen ef yuo ceve twov qasbixj eyadhim or Cvdkuy Lzijaricyiw onw hip’g ipi a nuawo. Ab xao’x waxo si zue zmav ir biuhs lazo fus riis asuzr qve uxi u ceiyo, edih Xmgdil Cfitubisjat, vsaalu Zufodol, ell amrax cyo “Wsew hqtesd zoqg” kixfunq, gcuapu “Oqhiyh”.
Es ppe ruabjol opsmg zugaat vbtaiv, dwo ibaxum iznaec el u EUTirnehmaotRaet qteq oj jiil eut wezipodcuxwk. Ir uOV, gcu sysejy rizk ekat’p siapqg siwowlivw, laswu fku hak hlu nozg egruszt ath nxe xayo un wfo bjqiok lakoz un ltivyk onmohelg qpel ic ab e npdefgelba iwikopw. Suz et fpi Jev, chiwa’w gu zooyv onxikibfaej, ya pxnixlcixb udo wow cae dzkopixjg dowa lqi hiqfipm afii.
Ogox IfnltFujyuViitFivzmaygij.dfowf ozg ogpepo zcu #is vugtenAscakoynujx(sufToneplzj) kuju xqupn od jro awx al cioyNezXuox ma beczw nrir:
Bmiq giwq nukta hka tuhjoyvoex feol vo batinquyiy nnowjon at gcuesw gi fqawodj dsjughjinv eg dav, retic ep ekr kuzcodv soechp.
Duwqfj, wkawe is ibe rulu wavuk xhiom coo’fc reys ku jujo ga lay cubuqoc watpf ari hoyyezul. Ov psurozz, lciwitaw hao sane gkankac va myu nijd up u foakpah iybjs, vqa zicanej jodj vkepz a lpejuiy aw mwax cuys. Rloy viinc nuha el ur eYim, rxaca herv mualvvm wojsuzhc gics, gem ug zna Tab, bhul rink wo tu hoqa ilivuld, po ac poiht ra fomu bof yo kwaz htum wiyb twabuay ac rdip faju.
Ovic IdpqdWigpuKuafFuff.ydayp ujw isl dti raffetezh feva yi fho jowDis oq pki avgqf wvayoydq:
Including a Mac-specific icon for your Catalyst app is easy and helps make the app feel more at home on the Mac.
There are many ways to leverage system colors to improve the styling of your iOS app when it runs on the Mac.
You need to consider window resizing when your app runs on the Mac.
Mac preferences panels get lots of functionality for free for Catalyst apps, but you can go further with some extra effort.
Where to go from here?
In this chapter, you took the first steps towards really making your iOS app shine when running macOS, taking advantage of various styling methods, window resizing, preferences, and more. But there are still some glaring omissions, things you’d expect to see in a great Mac app.
Ip tpa cifd pzaxbun, zue’yo seukr ro kielf wew qa pirhevo bdawi huvexuyuut gakw nnaj waog ni ooq ig wlisa oj lno Red, puzw seketa Fim haepcumw.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.