Parallax Effect in Simulator

The documentaiton states:


"If your app uses UIKit and the focus API to implement its user interface, the motion and visual effects of the focus model apply to your interface elements."


Looking at both catalog examples (The UIKit Catalog and TVML Catalog) I see no examples of this effect. Catalog images simply enlarge and get a drop shadow upon focus selection.


Can anyone explain how it is possible to get a parallax effect working? Thanks!

The collection view controller sample in the UIKit Catalog has parallax. There is also more details about getting parallax working with UICollectionView in this thread: https://forums.developer.apple.com/thread/17128

To take advantage of the parallax effect, you need to create an Apple TV Image Stack in of your asset catalog, which allows you to layer between 2 and 5 images. You then load that asset into an instance of UIImage, and assign it to a interactive element like a UIImageView (with "adjusts image when focused" enabled) inside of a UICollectionViewCell, or a button.

Accepted Answer

The parallax rotation happens when the user moves their finger on the trackpad. To emulate this in the simulator, hold down the option key and drag the mouse over the trackpad area of the remote.

In order to get the multi-layered effect, you must supply an image with more than one layer


You can create a multi-layered image in Xcode's AssetCatalog editor.


  1. Select your app's asset catalog (there is usually a default one named Assets.xcassets).
  2. Choose the + button at the bottom of the list of assets in the catalog
  3. Select "New AppleTV Image Stack" from the menu that appears


This will create a new Image Stack with three layers by default. You can delete some layers if you don't want them, or add more with the same + button (choose New AppleTV Image Stack Layer).

Parallax Effect in Simulator
 
 
Q