{"id":5247,"date":"2016-09-12T13:05:12","date_gmt":"2016-09-12T12:05:12","guid":{"rendered":"http:\/\/www.thetawelle.de\/?p=5247"},"modified":"2016-09-12T13:49:02","modified_gmt":"2016-09-12T12:49:02","slug":"developing-for-tvos-using-the-remote-layout-helper","status":"publish","type":"post","link":"https:\/\/www.thetawelle.de\/?p=5247","title":{"rendered":"Developing for tvOS using the Remote Layout Helper"},"content":{"rendered":"

I am developing an app for tvOS. One thing you quickly run into when testing on real world devices is the limits of screensize on several TV models. For this apple added a calibration tool in the settings.<\/p>\n

I found I needed this info to actually make my UI layout work for customers. So I took a screenshot and created this screenimage as (PNG) to overlay it at any time in the dev-process for orientation of myself as a Remote Layout Helper<\/strong>).<\/p>\n

\"tvOS<\/a>
Download the Overlay Image<\/a> (use Save as…)<\/small><\/center><\/p>\n

On my main controller I added & called following method which I call in - (void) viewDidAppear:(BOOL)animated<\/code>:<\/p>\n

\r\n- (void) activateCalibrationOverlay {\r\n    if( DEBUG_CALIBRATION_OVERLAY ) {\r\n        if( !overlayImageView ) {\r\n            self.overlayImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tvOS_screen_size.png"]];\r\n            overlayImageView.alpha = 0.0;\r\n            overlayImageView.userInteractionEnabled = NO;\r\n            [[self appDelegate].window addSubview:overlayImageView];\r\n            [[self appDelegate].window bringSubviewToFront:overlayImageView];\r\n            if( !overlayPlayPauseGesture ) {\r\n                self.overlayPlayPauseGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleRemoteTapPlayPause:)];\r\n                overlayPlayPauseGesture.allowedPressTypes = @[[NSNumber numberWithInteger:UIPressTypePlayPause]];\r\n                [self.view addGestureRecognizer:overlayPlayPauseGesture];\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
This adds an overlay of the Remote Layout Helper screen image on TOP of everything else and a gesture recognizer monitoring the PLAY\/PAUSE-button of the TV remote. It calls following method:<\/p>\n
\r\n-(void)handleRemoteTapPlayPause:(UIGestureRecognizer*)tapRecognizer {\r\n    if( overlayImageView.alpha == 0.0f ) {\r\n        [UIView animateWithDuration:0.3 animations:^{\r\n            overlayImageView.alpha = 0.3;\r\n        }];\r\n        return;\r\n    }\r\n    if( overlayImageView.alpha == 0.3f ) {\r\n        [UIView animateWithDuration:0.3 animations:^{\r\n            overlayImageView.alpha = 0.5;\r\n        }];\r\n        return;\r\n    }\r\n    if( overlayImageView.alpha == 0.5f ) {\r\n        [UIView animateWithDuration:0.3 animations:^{\r\n            overlayImageView.alpha = 0.8;\r\n        }];\r\n        return;\r\n    }\r\n    if( overlayImageView.alpha == 0.8f ) {\r\n        [UIView animateWithDuration:0.3 animations:^{\r\n            overlayImageView.alpha = 1.0;\r\n        }];\r\n        return;\r\n    }\r\n    if( overlayImageView.alpha == 1.0f ) {\r\n        [UIView animateWithDuration:0.3 animations:^{\r\n            overlayImageView.alpha = 0.0;\r\n        }];\r\n        return;\r\n    }\r\n}\r\n<\/pre>\n
This helped me a lot doing the right things during development. I hope it helps you too. Feel free to share!<\/p>\n
How to use it<\/h2>\n
You simply press PLAY\/PAUSE again and again and the overlay will fade in at different alpha-blending-levels between 0.0<\/code> and 1.0<\/code>. This allows to easily check boundaries of UI elements displayed against the screenlimits.<\/p>\n
See following screen example:
\n
\"The<\/a>
The overlay in action on an app displayed.<\/figcaption><\/figure><\/p>\n
Recognize, that you need a retained variable for the UIImageView called overlayImageView<\/code> and another for the tap gesture recognizer called overlayPlayPauseGesture<\/code> to be overlaid. And recognize that I use a boolean Precompiler-Flag named DEBUG_CALIBRATION_OVERLAY<\/code> to switch this feature OFF in deployment.<\/p>\n
Why do I blog this?<\/strong> I found it cumbersome to check against real world TV screens if my app works. So I just made sure that most of my UI is usable from within the MINIMUM SCREENSIZE frame the overlay gfx displays to me. Checking this anytime using the remote is a huge plus also on the real device. (Do not forget to disable the code on deployment!)<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
I am developing an app for tvOS. One thing you quickly run into when testing on real world devices is the limits of screensize on several TV models. For this apple added a calibration tool in the settings. I found I needed this info to actually make my UI layout work for customers. So I … \u201eDeveloping for tvOS using the Remote Layout Helper\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,88,67,59],"tags":[],"class_list":["post-5247","post","type-post","status-publish","format-standard","hentry","category-best-practice","category-coding","category-english","category-iphone"],"_links":{"self":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts\/5247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5247"}],"version-history":[{"count":0,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts\/5247\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}