{"id":2003,"date":"2015-09-20T21:13:58","date_gmt":"2015-09-21T01:13:58","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=2003"},"modified":"2015-09-20T21:13:58","modified_gmt":"2015-09-21T01:13:58","slug":"wkinterfacepicker-attributes-illustrated","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2015\/09\/wkinterfacepicker-attributes-illustrated\/","title":{"rendered":"WKInterfacePicker Attributes Illustrated"},"content":{"rendered":"<p>The <a href=\"https:\/\/developer.apple.com\/library\/prerelease\/watchos\/documentation\/WatchKit\/Reference\/WKInterfacePicker_class\/index.html\">WatchKit Framework&#8217;s\u00a0WKInterfacePicker<\/a> has some level of customization in Interface Builder.<\/p>\n<p>As of this time of writing, there are 4 main attributes to configure:<\/p>\n<ul>\n<li>Style<\/li>\n<li>Focus<\/li>\n<li>Indicator<\/li>\n<li>Enabled<\/li>\n<\/ul>\n<p><strong>Style<\/strong> is the most important attribute since it heavily influences the type of Picker. The options for Style are List, Stack, and Sequence. List is the standard iOS-style 3d list of text. Stack allows you to flip through images as if it were a deck of cards. Sequence lets you move between images without any intermediate transition effect. For a good look, I&#8217;d recommend <a href=\"https:\/\/www.bignerdranch.com\/blog\/watchkit-2-hardware-bits-using-the-digital-crown\/\">Big Nerd Ranch&#8217;s blog post<\/a>.<\/p>\n<p><strong>Focus<\/strong> presents an outline around the currently focused\/selected Picker. This is helpful if you have multiple WatchKit pickers or multiple elements for selection (think &#8220;Customize&#8221; for your watch face). The options are None, Outline, and Outline with Caption. The last option, &#8220;Outline with Caption&#8221;, comes into effect if your Style is Stack (or possibly Sequence), <a href=\"https:\/\/www.bignerdranch.com\/blog\/watchkit-2-hardware-bits-using-the-digital-crown\/\">see an example here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_2009\" style=\"width: 282px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2009\" class=\"size-full wp-image-2009\" src=\"http:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/picker.png\" alt=\"Plain, without focus\" width=\"272\" height=\"340\" srcset=\"https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/picker.png 272w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/picker-120x150.png 120w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/picker-240x300.png 240w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><p id=\"caption-attachment-2009\" class=\"wp-caption-text\">Plain, without focus<\/p><\/div>\n<div id=\"attachment_2007\" style=\"width: 282px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2007\" class=\"size-full wp-image-2007\" src=\"http:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/focus.png\" alt=\"Left picker is focused\" width=\"272\" height=\"340\" srcset=\"https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/focus.png 272w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/focus-120x150.png 120w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/focus-240x300.png 240w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><p id=\"caption-attachment-2007\" class=\"wp-caption-text\">Left picker is focused<\/p><\/div>\n<p><strong>Indicator<\/strong> has two options: Disabled or Shown While Focused. The <a href=\"https:\/\/developer.apple.com\/library\/prerelease\/watchos\/documentation\/WatchKit\/Reference\/WKInterfacePicker_class\/index.html\">documentation<\/a> wasn&#8217;t very clear: &#8220;A value indicating whether the picker uses an indicator to convey context about the number of picker items and which item is selected.&#8221; As far as I can tell, Disabled means the standard look, and the &#8220;Shown While Focused&#8221; adds a scroll bar helper on the right side of the watch.<\/p>\n<div id=\"attachment_2008\" style=\"width: 282px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2008\" class=\"size-full wp-image-2008\" src=\"http:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/indicator.png\" alt=\"Indicator - Shown While Focused\" width=\"272\" height=\"340\" srcset=\"https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/indicator.png 272w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/indicator-120x150.png 120w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2015\/09\/indicator-240x300.png 240w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><p id=\"caption-attachment-2008\" class=\"wp-caption-text\">Indicator &#8211; Shown While Focused<\/p><\/div>\n<p><strong>Enabled\u00a0<\/strong>is a helpful option that is either on or off. Enabling it or not doesn&#8217;t affect the view. When the picker is enabled, it\u00a0allows the user to use the picker. This attribute can be set or unset programmatically with\u00a0<em>-setEnabled<\/em>.<\/p>\n<p>Hopefully this quick explanation of the different\u00a0WKInterfacePicker attributes helps you out. The digital crown (AKA dial) &amp; the\u00a0WKInterfacePicker provides\u00a0an extremely powerful, convenient input method for your watch app users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The WatchKit Framework&#8217;s\u00a0WKInterfacePicker has some level of customization in Interface Builder. As of this time of writing, there are 4 main attributes to configure: Style Focus Indicator Enabled Style is the most important attribute since it heavily influences the type of Picker. The options for Style are List, Stack, and Sequence. List is the standard [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1029],"tags":[380,1228,1229,1230,813,1227,1226],"class_list":["post-2003","post","type-post","status-publish","format-standard","hentry","category-programming","tag-apple","tag-applewatch","tag-attributes","tag-illustrated","tag-watch","tag-watchos2","tag-wkinterfacepicker"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=2003"}],"version-history":[{"count":1,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2003\/revisions"}],"predecessor-version":[{"id":2010,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2003\/revisions\/2010"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=2003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=2003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=2003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}