Apple WWDC 2017 - Advanced Touch Bar

hi everyone I'm Donna Tom and I'm a text kid engineer and today my colleagues applicant engineers Jeff Nadeau and Taylor Kelly will be joining me and we're all really excited to talk to you about advanced touch bar concepts now hopefully most of you got a chance to watch or attend the fundamental session earlier today if you're following on at home go watch that now if you're here please stay it's a really great talk I do recommend you go and watch it later if you've got the time in it you've learned about how to create your own ennis touch bars and how to use their input capabilities to enhance the user experience in your app and you can easily adopt touch bar by using just what you learn in that fundamental session but you're probably here because you want something more to give your app that extra edge maybe you'd like to customize the standard bars offered by text controls like the mail apps email autocomplete item or maybe you'd like to add a scrubber to your app so that user can quickly scroll through and select content like the calendar date selector or maybe you'd even like to add your own completely custom control like the system color picker now in this session we're going to show you ways to build all of these things we'll dive deep into techniques and best practices for customizing the standard components as well as building your own custom controls giving you the power and flexibility to build rich experiences for your users so first up is customizing text bars we're going to start by going over the standard items then we'll talk about how to disable the standard items and how to add your own custom items and finally we'll learn about the candidate list item and we'll take a look at how to build an email Auto complete item similar to what you'd see in the mail app so let's get started with the standard items now we built a lot of great functionality into the standard text bars if you're using a textview or a text field guess what these components support and his touch bar right out-of-the-box now on a textview or a text field becomes the first responder in your app it'll automatically get a bar populated with items that are driven by the properties in content or the control so by default here's what you get quick type suggestions which can be expanded and collapsed using that little angle bracket on the left top bar shows what it looks like when it's collapsed and the bottom bar shows what it looks like when it's expanded you'll also get a character picker for all those great emojis and if rich text is enabled you'll get a color picker formatting controls and alignment and list controls and you get all of this for free when you use Anna's text view or in this text field you don't have to write a single line of code but how does all of that actually work well and as textview and Anna's touch bar are very tightly integrated in order to provide all that great functionality since the items in the bar may need to change depending on the contents of the enter text and as text view actually makes itself the delegate of its own aunt and as touch bar instance and if you're using an Una's text field remember that an instance of NS text view serves as the field editor for the currently active text field and so when you place items in the text fields bar that's not the same instance of NS touch bar that contains the standard items the field editors bar will be the one that contains the standard items and while we're on the subject of the field editor remember that the field editor is shared among all text fields in a window so if you make changes to that field editors bar those changes are going to affect all the text fields in the window and this is an important concept to keep in mind when working with text fields so now that we understand a little bit more about how these components work together let's talk about how to disable the standard items it's actually pretty simple all you have to do is set the corresponding property on your text field or your text field and when you set these properties the text field will automatically get notified that it's bar items meet updating so there's nothing else you have to do quick type and the character picker are each controlled by their own property the rest of those standard items are text styling controls and these will be present if rich text is enabled on your text field if it's not then you won't get those items now before you go and disable quicktype and all your text controls please consider your users I know some of you might not like to use the quick type item but I'd like to emphasize that your users might not share your preferences in fact your users can disable quick type suggestions for themselves either through the system system preferences pane as shown here or by customizing their touch bar so please consider leaving quicktype enabled and allowing your users to make this decision for themselves so now that we know how to disable the standard items let's talk about how to add your own custom items so here are a couple examples of items that have been added alongside the standard items in a text bar the bar on the top may look familiar if you've seen the fundamentals talk it has a sale send mail button placed all the way on the left the bottom bar has a select all button placed just to the right of the character picker so how do I go about adding buttons like these to my text bar well you might be tempted to put something like this in viewdidload grab your text fields touch bar append your new button to the default item identifiers and that's it right no please don't do this you're gonna have a bad time guys and why it's because the text view needs to be able to reset its bar items based on the current configuration and so here's what's going to happen you're going to have a bar light that looks something like this after you add your new button which is just as you would expect but if the user disables rich text while your app is running that textview it will get notified and it's going to need to reset its bar items and it's going to do this by removing all the existing items and then just recreating the ones it needs based on the current configuration but remember that the textview is the delegate of its own NS touch bar instance so it's going to recreate these items by calling its own implementation of make item for identifiers and so it'll recreate the quick type item it'll recreate the character picker but it's not going to know how to recreate your custom item and so it just won't get recreated now to avoid this you're going to need an approach that works with the text view and there are a couple of different ways to do that the first approach is to use a higher level responder to provide your custom item and this is a good approach to use when it makes sense for your item to appear in more than one context and our son male bar from earlier is a good example of that so here we have the son mail button and ideally we'd like this button to be present in the bar when the compose mail window is open it doesn't matter which text view or which text field within that window has the first responder we want this button to be present for any of them and so this is a good situation in which to use a higher level responder like a view controller to provide your custom item and here's what that might look like here we have our view controller we're going to override make touch bar well create our custom touch bar item and set its view to the Fen button and then we'll create our touch bar we'll configure it with our custom item and then we'll return it now note the use of the other items proxy here and this is going to nest the bar items from the field editor so that they appear alongside our custom item and that's a basic example of how to use a higher-level responder to provide a custom item along with standard items so now on to the second approach sub classing NS text view now this is a good approach to use when you have an item where it you only want it to appear in the bar when your text view is the first responder and to see what I mean let's take a look at the second example from earlier here we have a select all button that selects all the text in the text field now in this case we only want our button to appear when our text view is first responder because it wouldn't really make a whole lot of sense for a select all button to be there if nobody is editing any text and so this situation is a good one to subclass on its text view and put your button in the same end as touch bar instance as if standard items and so there's two methods you're going to want to override in your text view subclass one is update touch bar item identifier and you'll want to override this method because this is called each time the state of the text news bar needs change and this method is where you'll actually add the text bar to display your custom item to the default item identifier array and the second method to override is the delegate method make item for identifier and you'll want to override this method because this is what the textview uses to actually create its bar items and so this method is where you'll create and your you'll configure your custom item now with both of these approaches you're going to want to make sure that you call the superclass implementation before you do any of the work associated with your custom item and by using this approach you'll ensure that your custom item will be recreated along with the standard items whenever the textview needs to reset its bar and that wraps up the two approaches for adding custom items let's shift gears and learn about the candidate list item the candidate list item is a pretty nifty control for giving your users a list of contextual suggestions to choose from it will refer to these suggestions as candidates and this item is also tightly integrated with anna's textview so every textview has a reference to the candidate list in the bar accessible via the candidate list touch bar item property now once again remember that the candidate list you see with a text field is actually in the bar associated with the window's field editor candidate data generally comes from these three sources in the quick type case the data for the candidates is supplied by an a spell checker but the control can also be configured to show candidates from other sources like the system input method which allows you to type Chinese Japanese Korean or Indic characters using a Latin keyboard but what most of you are probably interested in is the ability to provide your own completely custom candidates and there are two different approaches that you can take to do this the first approach is to use a delegate method the benefit of using this approach is that it's the simplest one since the textview does most of the work so to use this approach you'll implement a delegate method candidates for selected range on your text field or your text view and you'll get the original text control the field editor if applicable and the range of the text which you can then use to determine your candidates so you'll simply return array containing your custom candidates and they'll be displayed in the standard candidate list now since this approach uses a standard list there's nothing else you have to do the textview will do the rest the second approach is to use a higher level responder and the benefit of this approach is that it allows you to use model objects rather than strings for your candidates so this is similar to the higher level responder approach that we looked at a little bit earlier for adding custom items to your bar here you'll use a view controller or some other object to create your own instance of NS candidate list touch for item and provide that instead of using the standard one now this approach is a little bit more complex than the delegation one but again it's really useful if you'd like to use model objects for your candidates instead of strings and we'll go over this approach in greater detail a little bit later but for now let's take a look at implementing a simple version of the email autocomplete item that we've been teasing you with since the beginning of this talk we're going to use the delegation approach for this but we have a slight problem here now since our text field is intended for email addresses it wouldn't really make a whole lot of sense for it to have emojis in it or rich text but if we turn those properties off on the bar look at what happens when we collapse our candidate list you've kind of got this weird empty bar just sitting there and that doesn't really look good so we don't want that to happen and we're gonna prevent that from happening by turning off the collapsing functionality using the using the allows collapsing property and when we set this property that little angle bracket on the Left goes away and you can no longer collapse the list but now we have another problem we set that allows collapsing property on the field editor candidate list item and the field editor is shared among all the text fields in the window and so if we set the allows collapse and property on this field editors candidate list it's going to affect all of these text fields which we might not want and so we're gonna solve this problem by providing our own field editor for our email text field and then that way when we modify its properties we won't affect the shared editor and so to create the custom field editor we'll subclass NS text field cell in our subclass we're going to override field editor for control to you and then we'll create a field editor and return it and that's all there is to it we're not adding any custom behavior we're just providing our own instance of the stock in this text view as to use as the field editor whenever someone wants to edit the contents of our text field and don't forget to set your text field to use your new self subclass either through interface builder or programmatically so now we can implement our text field delegate method here we'll turn off the collapsing behavior of the field editor and return our array of custom candidates and that's a simple implementation of email autocomplete with the candidate list item now earlier we touch on a second more complex approach for returning custom candidates but providing your own candidate list item from a higher level responder now if you need finer grained control over the candidate list item this is the way to go and if you want to use this approach here's what you'll have to do first you want a disabled quick type for your text field review since you're providing your own candidate list there's no need for the standard one second you want to implement the NS touch bar delegate method make item four identifier and this method is where you'll you will create your custom candidate list item and if you're using model objects as your candidates this is also where you're going to map your model objects into string representations that can be displayed in the candidate list item and so to do this you're going to use this block property attributed string for candidate third if you're using the model object candidates you need you're going to need to implement the delegate method and selecting candidate at index and this is where you're going to provide a mapping in the other direction from the user's candidate selection to an instance of your model object and finally you want to update the candidates that are displayed when someone types into your text field or view and so you can do that by overriding control text to change and then calling set candidates to for selected range and string on your custom candidate list item and that wraps up customizing text bars so to recap we covered two approaches for adding custom items in text bars and two approaches for providing custom candidates in the candidate bar I encourage you all to try out customizing your text bars using the approaches that we've recommended today now next I'd like to invite Jeff nadila to talk about in a scrubber a control specially created for Ennis touch bar Jeff alright thank you so as Donna just said and a scrubber is our very first cocoa control that we've designed especially for the touch bar environment and the central theme of this control is taking your apps content and bringing it forward conveniently right at your fingertips now just some examples we've been showing you this nice calendar timeline as an example of NSC Arbor but in fact we use it in several places across the operating system and two more of them are safaris tab picker and also keynotes slide navigator which appears while you're giving a presentation in keynote and just putting these side-by-side you can tell that this control is very versatile it's capable of expressing a wide variety of visual and interactive designs but before we dive into any of the API we should probably answer the question what is an a scrubber it's a collection like control that is all about arranging a list of your apps content and then providing touch gesture based highlighting and selection of that content using both tap and pan gestures and if you use in this collection view before this API is going to feel very familiar however it has been streamlined and adapted for the unique touch bar environment like Ana's collection view and s scrubber has a compositional interface which means that it delegates a lot of its responsibilities to other objects and the best way to see these is to actually pull the control apart and take a look at each piece in turn first we have the control view itself and a scrubber which manages all of the user interaction with the control it also provides a couple of nice cosmetic properties like backgrounds and other and other such things next we also have the selection decoration these are the views which appear to indicate that a specific piece of content is selected we have a dedicated layout object which abstractly defines how the contents of the control are arranged and then of course we've got your content which is provided using a data source protocol now we're gonna look at each of these pieces in turn however we should first look at what we can configure on the control view itself and the first and most important thing is the mode of interaction which is controlled appropriately enough with the mode property and the scrubber has two primary modes of interaction the first called fixed offers a a touch based selection that directly selects and highlights the item underneath your touch the second free is kind of like a free wheel which you can freely scroll the way that you would any other touch driven scroll view once you've chosen between these two modes there's also the continuous property this is a familiar name from several other cocoa controls and we typically use it to mean that a control continuously in response to user interaction is updating its value or sending its action now when continuous is false in an NS scrubber you can see that tapping on an item and panning across highlights an item but the selection stays put until we finish our gesture and we commit a new selection but if we turn it to true we can see the effect in something like Safari where as we pan across tabs there immediately selected as your touch passes over each item this also goes for freestyle scrubbers for example the keynote slide navigator we just looked at we can scroll through here look at what you'll navigate our content and then we can tap items to select them but if we set continuous to true just the active scrolling is going to be fluidly and continuously updating the selection within the content and so this gives us a very stark distinction between continuous being false where selection is a very deliberate thing which might be appropriate if it's kind of a heavyweight action and continuous being true where navigating and selecting for your content is very fast and fluid and maybe ideal for more lightweight interactions once we've decided what we want our how we want to select our items we need to decide what we want that selection to look like and that's controlled with the selection background style and overlay style properties we provide two built-in styles we have the outline overlay style which is that nice bold white outline that you've seen in several of our examples and then we also have a rounded background style which looks great behind text items now if you're particularly observant you may have noticed that the NS square selection style declaration is not a closed enumeration it's actually a class and so you can subclass this and define your own selection Styles if you'd like one other fun cosmetic option for selections is this float selection views property when it's false changing selection looks pretty much like we'd expect the old selection disappears and then the new one appears immediately but if we set this to true we actually get a nice smoothly floating and gliding selection which does it kind of a very cool effect there's one other trick that you may have noticed in several of our examples some of these controls when you scroll flick or pan through them always glide smoothly so that some item always lands neatly in one place in this case the center and that's controlled with the item alignment property now by default this is none which means that we won't do any kind of adjustment on your scroll but if you set it to leading trailing or Center after a scroll event flicking panning momentum anything like that will always adjust it so that some item appears neatly aligned within either the leading trailing or center of the control finally and the scrubber has a couple of nice cosmetic options for the area behind your content including a background color or if you want to draw anything you'd like you can place a view behind your content and we actually provide a named color on NS color called the scrubber texture background color which works great in the background color property to provide this cool textured vertically hashed appearance which you may have noticed in apps like calendar now that seems like a lot of properties but if we pull it all together we can fully configure an NS scrubber and only a couple lines so we create our control and then we assign it a layout a delegate in a datasource we won't dwell on this but I promise we'll look at each of them in turn in just a moment we decide how we want to interact with the control in this case we want one that Scrolls freely but it has a continuous selection as we scroll and then we also want the item alignment to be Center so that after we scroll some item always lands neatly in the middle then we'll choose what we want our selection to look like in this case we're going to apply both of the built-in effects and we'll turn on that nice floating selection so that as the selection changes it floats neatly between the views and then finally we'll apply that cool texture background color and with just these couple of lines of code we've produced the blueprint for exactly Calendar scrubber that we've been looking at this entire time now that we've configured the control the way that we like we need to layout the items and that's done with the NS scrubber layout class this defines the arrangement of all of the content within the control and it does this abstractly using these NS scrubber layout attributes objects which are essentially value types that bundle up and items index and where it should be laid out within the within the coordinate space of its content we provide a couple of built-in layouts that you can just pull off the shelf and use if you'd like to you know just really quickly get started and that includes a flow layout which is comparable to NS controller NS collection view flow layout but if you want to define your own it's really not very hard there's only three key methods that you really need to implement the first scrubber content size defines the entire size of everything in the control and this defines how far we can scroll within all of the content there is layout attributes for items in rectangle which provides a set of all of the attributes for every item that falls within some specific rectangle and that might be the currently visible rectangle or it might be one that the user is about to scroll to and we want to get ready and lay everything out and then finally layered attributes for items at index so we can determine the layout for some specific item if we need to the other half of the layout life cycle is invalidation invalidate layout signals to the control that your layout has changed in some way and it needs to refresh fresh layout information from the ANA scrubber layout now if your layout depends on certain information like the selection highlight or visible rectangle like maybe you want to make the selection be twice as large as every other item you can optionally request that you're automatically invalidated when those things change and this prevents you from having to track that information yourself and manually call invalidate layout finally after your layouts been invalidated before we do any further layout passes we'll call the preparer method on your layout object the base implementation doesn't do anything but this is a great opportunity for your subclass to run some calculations do some measurements and prepare some caches so that subsequent layout calls are really fast and that's all you need to do to put together a layout now that we've configured our control and we want we know how we want to arrange all of our content we need to get our content into the control in the first place content in NS scrubber is represented using simple views subclasses of the NS scrubber item view class and that's comparable to an astable cell view like and his table saw or like in this table and NS collection view and a scrubber provides a reuse queue so that you can efficiently recycle views as they cycle out of the control rather than allocating a brand-new one every time it's requested the datasource protocol for NS scrubber is really super simple there's only two methods that you have to implement the number of items in the entire control and then you just need to be able to prepare a view that represents a specific Ione to aid you in this task we have two built-in and a scrubber item view subclasses we have a text item and all you need to do is provide a string that you'd like to present and we'll present it in a way that is consistent with many similar controls across the operating system and then we also have an image view class which provides aspect to fill presentation of your image and then allows you to specify an alignment beyond that now if neither of these are exactly what you're looking for you can always subclass and a scrubber item view and just do whatever drawing you'd like when you do this you get access to a couple of nice properties you get is selected is highlighted which you can use to alter your drawing based on that state and your drawing will be automatically invalidated when these change so you don't need to observe them yourself and you can also override the apply layout attributes method which allows you to inspect and interpret the attributes which were produced by the layout object and that's how you provide content finally we assume that the user is going to use this this control and so we want to respond to that and that's done using a delegate protocol you can be informed when the selection changes the highlight changes and if the range of visible items in the control changes due to either scrolling or layout you can also be informed when interaction begins ends or is canceled and this might be useful for example to create an undo grouping around a single interaction with the control so as the user is rapidly scrubbing through you can bundle all of chain all of those changes into a single undo grouping and that's all you need to do to put together your own and a scrubber I hope you've you've come up with some great ideas for content in your application that you can surface with this control but weave between the fundamentals talk and this one we spent a lot of time explaining how to use app gets built-in controls and classes to really build up your touch bar experience but if you want to really unleash your creativity and build something truly custom you're gonna want to stay put for the next section where Taylor is going to walk you through doing absolute doing completely custom controls for touch bar so when it comes to building custom controls for the touch bar there are four areas that you want to keep in mind the first is handling the touch events that are coming in second is styling your view so it looks and feels at home in the touch bar third is making sure that's the right size and position amongst all the other controls and finally it's tying everything together by applying a little bit of animation let's get started with event handling now the obvious thing here is that we have direct touches on the Mac and I really want to qualify the difference between direct and indirect touches those of you who are might be iOS developers are already for earlier with this distinction where you have direct touches where you're directly manipulating content on the iPhone or iPad versus the indirect touches on the Siri remote touch surface where you're remotely interacting content that's actually on the TV on the new MacBook Pros we have both of these in a single device we've already had indirect touches on the gesture rich trackpads where you can get access to individual touches on that trackpad now at the touch bar we support having direct touches where you can directly manipulate content on the screen so the existing MS touch class has now been extended to add a touch type to describe whether it is this direct or indirect touch for direct touches you can now get the location of that touch provided some view and providing that view is extremely important because it provides the coordinate space for where that point will be relative to as an example when the user taps down on a slider we want to get the location of that touch relative to the slider as a whole and we can take that offset and simply divide it by the overall width to get our new value it's pretty straightforward now one very important difference with NS touch and UI touch is that while UI touches this long-lived object whose location will update over time and this touch is essentially a value type snapshot of that touch on location at a certain point in time in that gesture and you can use the identity property to tie a sequence of touches together when forming a gesture so as events are coming in through the touch bar each of these events will contain a collection of one or more touches and each of these touches are unique instances so again the way you tie them together is by looking at that identity property so even when the user touches down with multiple fingers we can distinguish which is the one that we're actually tracking by comparing its identity to the one that we're tracking we can make this a little bit more concrete with some code so we want to keep a variable to hold on to that opaque identity object when we first get some touches on our view we go through those pick up the first one and save its identity as the one we're tracking later when additional touches come in we go through the ones that have changed and compare each of their identity to the one we're tracking to find our new touch we can now use that new locate to update any events in our view now where do these events and touches come from well one place are these existing in us responder methods touches began moved ended and canceled which will be called back over the lifecycle of our view we can opt in to receiving them by setting the allowed touch types to include direct or indirect touches but once you link on the CR SDK you'll be automatically opted in to receiving direct touches what a really important method here is touches cancelled well there's not really a notion of canceling Mouse tracking events this is extremely important for the touch bar because it's so context-sensitive as the user switches active applications or Active windows the content in the touch bar will update to reflect that and if the user is interacting with any views at that moment we'll send touches cancel to it so it can clean up any event handling but separate that from the user actually lifting their finger however for the most part you actually don't have to worry about this and you can just use gesture recognizers these have gained all these same methods to four subclasses to implement so they can handle touches as well as the same Upton method with the only difference here being that you're explicitly have to opt in there's no automatic link check and pretty much you can use all the built-in gesture recognizers which now work in the touch bar for instance the color picker simply uses a combination of press and pan recognizers to implement all of its event handling they've had to do no extra work but it's important to remember that even for these you still do have to op them in to receiving direct touches when you do use them in the touch bar now one really interesting context when it comes to event handling are inside press and hold popovers in the fundamental section you heard how you can set the press and hold touch bar of your NS touch bar to have it when the user long presses on that button for it to immediately present some very simple list like UI you can put your own custom views in here and as the user continues that gesture and pans over your view you'll get called two touches began moved and canceled as they exit the view and finally once they lift their finger the touch bar will be dismissed however because of this very unique event handling model gesture recognizers are not supported in this context and so you have to use those NS responder methods however again outside of press and hold popovers it's so much simpler just to use gesture recognizers one very interesting aspect of the touch bar is random Devon modality since the touch bar is this input device akin to a keyboard it should always be responsive just because the user is dragging something around on the screen doesn't mean your keyboard stops working so even where you previously had a modal event tracking loop the touch bar will still be responsive and still be able to su state changes so you might want to go back and actually look at those event tracking loops to make sure they can handle the type of state changes that could occur in addition the touch bar itself is capable of multi-touch so while the users interact at interacting with one control they could begin and end interacting with another and again you want to make sure you can handle those state changes however once you do that you're afforded a lot of really interesting interaction opportunities by combining all the different input devices that exist on this device you can create either really advanced workflows for your users or these kind of delightful experiences that the users might discover by playing around for instance in the customization UI we've added individual pan recognizers to each item so the users can tap down with multiple fingers and reorder multiple items at once similarly the color picker has press and pan recognizers on each individual slider so you could be editing multiple components at once or while you're editing that color you can save it to your favorites all at the same time that's just using multi-touch once you combine in the keyboard or trackpad you can really take things to the next level such as being able to edit the color of your text as you're entering it or editing properties of your cursor as you're moving it around so I really encourage you to think about how you can easily use gesture recognizers to add this event handling support for your app while also assignment handing these simultaneous state changes next let's take a look at styling and appearance and so obviously the styling inside of the touch bar is extremely different from the matte aqua on the main display I'm going to cover a number of these areas but I want to start with something that you might not have even noticed this is something that you can only see by taking your MacBook Pro in two different environments so our standard stock photos look something like this with nice even lighting if you use it in a bright studio environment or maybe even take it outside it might look some closer to this if you're like me you might primarily use it in the dark and it's pretty cool how the blacks on that LED display basically disappear and finally if you get pretty tired as it gets later on the night you might turn on that keyboard backlight and get that nice glow and so while physically the MacBook Pro looks very different in all these environments the touch bar content is actually adjusting as well the bezel colors of the different controls is adjusting to that ambient white brightness and even the glyphs within the controls is reacting to that white point change of the keyboard backlight and so if you're implementing your own custom controls you want to make sure that you can do the same and thankfully is pretty easy by using system colors these are existing named colors that semantically describe how they should be used and once you go to draw with them that's when they'll be dynamically resolved against their current context to determine what color should be drawn with taking into consideration if it's being used in the touch bar versus aqua as well as whether the white point or brightness has changed in addition new and high sierra is this expressive palette of colors that you can use to match system UI and have been specifically designed for the aqua appearance and for the touch bar so one important thing to keep in mind is how you draw with these colors in order to take advantage of all that context sensitivity so if you're using layers to draw your views you might be tempted to in an it with frame viewdidload or an immediate response to event handling immediately update the properties of your layers and you don't want to do this because when you get that cg color to set it on the layer that will immediately resolve those RGB values against whatever the current context happens to be so as the white point or brightness changes over time your layers will stay exactly as they were at this moment so what should we do instead well we can override this method called update layer and well update our layers there this will get called automatically for you when your view is displayed such as the first time it's shown on screen or windows white point or brightness changes and if you have a dynamic color that you actually want to set it's important that you hold onto that color as an NS color because again this maintains that semantics nature of the color as well as the context sensitivity anytime that color changes you just set needs display to true and we will recall this method for you the same exact approach can be used if you're using draw rect based views or here the only difference is that you're setting that color against the current context so that's how you can use these custom colors and your own custom drawing however a number of our controls support customization of their colors just out of the box you can now set the bezel color of your NS buttons the selected segments color or even the fill color of your sliders you can use our built-in system colors or even your own custom colors if you have some overall app theme what's really cool here is that the text and image effects within these controls is actually adjusting depending on the lightness of the color your setting you actually don't have to do any work to get that one thing you might have seen across the system are these default button blue colors and it's important to note that this is not achieved by setting the system blue color as the bezel color there's actually a subtly different color that's used for these and you can get that by setting the key equivalent to the return key just like you would have done on the main display one thing you're going to notice in these past few slides as well is that the Escape key has been replaced by this done button and this is pretty easy to achieve by setting the Escape key replacement item identifier on your presented NS touch bar and whatever control that references will be placed in that Escape key region however it's important to consider if and when you should be using this it should really only be used when the user has entered into some modal context and they can use that control to exit that context any actions they take in this context should be undoable so if I edit my photo here and tap done I can still undo that change afterwards and finally you don't want to be adding explicit constraints of this button to try to make it be the standard size of the Escape key will automatically apply metrics to make it be that standard size as well as even adjust the padding around the text to fit the most characters possible so for instance we found that the longest translation have done is go to vae and even that is able to fit in with these adjusted metrics however as a last resort we will allow this control to grow in case there are some extenuating circumstances now another really important aspect the styling and the touch bar is when it comes to the font now you might have noticed that the font has changed within the touch bar on the main display in aqua we use a standard font of San Francisco UI size 13 and then touch bar we use something actually closer to the watch San Francisco condensed size 15 so the family and the size have both changed and those of you who have followed the thought Mac font transition perhaps all the way from Chicago to charcoal to Lucetta to Helvetica to San Francisco know that you should not be hard coding these fonts in your application and instead you can use system font of size 0 which will give you back this dynamic font that when used will be resolved against its current context just like those system colors and pick the right family and size in addition there's a weight variant so you can get thinner or bolder fonts and another really interesting aspect of font you might have noticed are these monospace digits used in things like the AV kit player or even the component value of the sliders and even as the value changes those numbers aren't jiggling as the metrics adjust their mono spaced and so you can get this by using the mono spaced digit system font of size weight to get this the same effect now there are actually a ton more interesting type of graphic features when it comes to San Francisco and there are some great talks in the past few years that I'd recommend checking out if you're interested in learning more however the other important type of glyphs in the touch bar are of course images and since the touch bar is this p3 Retina display all you need to provide are 2x assets for the images used there however they should be specifically designed for the touch bar you shouldn't just take your toolbar icons and plop them in in addition you should be using template rendering to take advantage of those white point and brightness adjustments I mentioned earlier to illustrate this let's say we're making a custom like button we've specifically designed it nicely for the touch bar and we're using it alongside a bunch of other standard icons for the most part it looks pretty good except for later that night we take it home and we turn on our keyboard backlight and it looks something like this all the other icons adjust and our icon basically sticks out like a sore thumb so let's not do this instead what we can use is provide an image that you communicates its shape purely via the alpha Channel and uses template rendering so that app kit can take care of all of the different styling that might occur for that image such as the white or even the blue styling when the white point is adjusted now before you have your designers go off and create a bunch of awesome icons specifically for the touch bar that take advantage of template rendering do be sure to check out all of the standard icons that the system already provides there are really a lot of them here and the human interface guidelines goes over all of them and what's really cool is that these are all public constants provided by NS image so you can very easily drop them into your application with really not a lot of work so those are some aspects of styling an appearance what's really cool is that for the most part you can just use system standard techniques and get a lot of this behavior for free next let's talk about layout in the fundamental section you saw how the standard item layout is to simply stack the items along inside of the touch bar you can use flexible spaces to give your items a little bit of breathing room or you can use the principal item to center a single or group of items now layout and NS touch bar works very similarly to in a stack view where the items themselves provide their sizing information and NS touch bar positions them based on that size and when it comes to describing that size it works exactly like it does outside of the touch bar for instance you can you override intrinsic content size and calculate the size you want your control to be and just return that in case any state changes such as the buttons title changing and when you want to note that the intrinsic content size has changed you can call invalidate intrinsic content size and NS touch bar will relay everything out another approach that you might have used in the past was to add an explicit whit's constraint to your control and then update that constant over time this again works the same way and NS Touch bar will again relay everything out when you're building custom controls you also might have flexibly sized controls similar to in a slider or in a scrubber and here the only difference is that that simply doesn't have a width constraint or it has an intrinsic content width of no intrinsic metric and this touch bar will take all of the available space within the touch bar and divide it up amongst all these flexible controls in this example this the only control in there so it takes up the entire application region now if we want to restrict it to a minimum and maximum size we can simply add inequality constraints just like we did outside the touch bar and as touch bar will follow that right along what's really great about having this flexibility is as the user customizes in additional items there's still some flexibility around how big that control can be and the user can really make the most out of their touch bar so that's how you can customize the sizing and layout of individual items but you also might want to coordinate the layout across groups of items one new thing in high sierra is the prefer sequel width property on group touch bar item where you can have all the items within that group prefer to be equal with what's cool is that this works with user customization so not only can users customize items in and out of this equal sizing group but the equal sizing only affects the items that are actually present in the touch bar it's not relative to all the possible items that the user could add this also works really nicely with localization in case one of these buns becomes extremely long when localized will choose to break that equal widths rather than overflow the touch bar and then cause items to be hidden however sometimes that overflow might just happen and that's where visibility priority comes into play here you see some start window UI that looks pretty nice in English but when we initially run in German it looks something like this there's no clipping however the new collection button has become missing and the reason is that all the items in the touch park can't fit in the space that we've allotted and so NS touch bar has overflowed that new collection button and hidden it in this example we might instead to want to hide that bookmarks button instead of the new collection button and we can do that by setting its visibility priority to be lower than all of the rest and NS touch bar will detach the lower ones first and this time we'll get something like this which is a bit better but really it's not a great user experience to hide any items so in this case we could probably do a bit better and we're using the new compression behavior in High Sierra we can so in this example we can note that the titles of the different buttons actually fully communicate what effect they'll have and so instead of dropping any items we drop those hittin images instead we can set the prioritize compression options of this group to be hide images and now when we run in German it looks like this what's really cool is that this happens atomically we don't end up with half of the buns having images and half of the amount it's it's an all-or-nothing thing and there's really a lot of flexibility here we can instead think that our icons are descriptive enough and opt to hide the text instead in which case we'd get this and you can even go so far as if you have your own custom ways that your custom controls can compress you can add additional options to these prioritized options to describe that your custom control should compress in those different ways so these are a few ways that you can use different group touch bar item properties to control the group layout of your items however the container views that you're used to using outside the touch bar can also be used within there was a really great talk earlier today choosing the right cocoa container view that discussed some of the differences between these as used outside the touch bar but I'd like to highlight a few of the ways that you can use them within you can use NS fact view to have really precise control of the spacing or sizing of your items such as what calendar is doing here where they've completely eliminated the spacing between these two buttons you can also put that stack view into a scroll view to enable scroll ability of these small lists of items right inside the touch bar Jeff talked earlier about how you can use an ax scrubber when you have these unbounded lists of items where you want to maintain a selection over time as well as benefit from some of the other aspects that scrubber can provide finally you can go all the way to using and its collection view right in the touch bar to really have precise crawl control of the layout or completely custom interactions such as what the favorites list and the color picker does so that's the layout what's really cool is that for the most part layout works exactly like it does outside the touch bar so any concepts you're used to are using you can use within now finally let's talk about how we can use layout to really tie all this together before we do that I really want to reiterate that the touch bar is an input device and not this extra display it's not the right venue for you to be showing off your different animation skills with animations that might be just interacting from what the users trying to focus on on the main display and any animations that you do ad should always be relative to user input and because that user input can change at any time your animation should be interrupted and updatable so one obvious thing we might want to animate are the sizes of our items as they're changing we saw earlier how we can add an explicit with constraint to control that size and what's really great is that to actually animate that size change all we need to do is use the animator proxy on that constraint and update its constant instead and we get all the animation and benefits that you'd expect such as simultaneous animations and even interrupts ability just with this one change if instead we opted to use intrinsic content size to express the size of our items and then invalidate intrinsic content size to note it changed what we can do here is wrap that in an animation group set allows implicit animation to true and then call layout if needed and again we get all the same animation benefits that we saw on the other approach something else we want I want to animate is whether an item is flexible or not so we can see here as the item takes up all the available space animatedly and the same exact technique of using that animation group can be used here with the only difference being the same as before where when the item is considered flexible it has an own intrinsic content size of no intrinsic metric for its width now we can tile this together and start to build something similar to the color picker where as you changed the active item it grows to take up all the avail of space and the other Y items shrink down so we can start by defining this custom accordion view that has an active state as well as defines an intrinsic content size when it's inactive it has this small fixed size however once we set it to be active we want it to have that flexible size that takes up all the available space and again we can use no intrinsic metric to achieve that now we stack a few of these items together in our touch bar and we add press recognizers to each individual one when the user taps down on one of our accordion views we can handle that press and then take the old act of accordion view and set it to be inactive so to have that small fixed size get the new active accordion view and activate it and finally using that allows implicit animations simply layout that change and we get exactly what you'd expect it's pretty straightforward so that's how you can animate different items size but you also might want to animate the content within the items such as the content within the different scrubber now if you're using constraints or overriding layout and setting your frames or updating properties there what's really great is that there's no extra work needed to actually achieve this so as we resize this custom item animatedly you'll see that the scrubbers items flexibly resized out and fluidly resize down and even the images within them nicely resize up and what's really cool is that there was no extra work needed on my part or by NS scrubber to achieve this effect because ms scrubber overrides layout to achieve all of its layout and view properties all of this came completely for free the other type of content that you often use in your touch bar our buttons now as your state changes you might in the past have updated the properties of these buttons but you might want to achieve something similar to what FaceTime does where it actually animates this property changes new in high sierra is the ability to use the animator proxy on these buttons and update your properties there and again you'll get these animations completely for free if you focus in on that remind me later button you'll note that as the image position changes so does the overall layout of the touch bar and we can combine all these approaches of sending the image position against the animator and then using allows implicit animations to apply both of these animations all at the same time now when it comes to building your own custom controls you also might have completely custom animations that happen alongside item sizes or maybe even independently such as the fluid knob resize that happens when you activate these sliders now there's a few different approaches you could actually use here such as using the animator proxy on your custom view to animate built-in view properties or your own custom properties you can also take explicit CA animations and add them to the content of that view or if you're able to express this as a state change in your layout override where you update your view properties there you can again take advantage of that allows implicit animation call and actually do no extra work as part of animating that change there's a talk from a few years ago that actually went into a lot of detail about these three different approaches and their pros and cons best practices for cocoa animation I'd recommend checking that out if you want to know more so we talked about a pretty wide variety of content today and I hope you can take inspiration from some of these areas and actually go back and create some really rich touch bar content for your applications to really create a nice user experience taking things like custom candidates in the candidate list item creating your own unique scrubber layout or combining gesture recognizers and really unique ways to really make your UI pretty interesting for more information you can see this website where we have links to documentation and the human interface guidelines and most of the related sessions we have are in the past but there's actually one tomorrow at the same time building visually rich user experiences that'll actually go into a few tips and tricks of using core animation to achieve some of these really interesting effects that equally apply when used in the touch bar that's it for our talk and I hope you guys have a great rest of your WWC thank you

Channel: beBetterDev

Views: 101

Keywords:

Id: G8h4_L8fK-4

Length: 54min 57sec (3297 seconds)

Published: Sat Sep 02 2017