![]() ![]() Insert a Size Unpack patch to the patch editor. To get the device width from the Device Info patch, we need to use the Size Unpack patch which separates the two dimensional size value into two independent values for width and height. Select the Photo layer in the layer list and connect the Screen Size output on the Device Info patch to the Size input on our Photo layer in the Layer Inspector.įor the Navigation Bar and Status Bar we only want to make the width responsive. Insert a Device Info patch to the patch editor. When is enabled any rotation to the device rotates the interface as well and therefore the screen size is rotated too. We want the photo layer to fit the screen, so we need the screen size value. Next we need to make our photo and navigation bar layers responsive so they look right in both portrait and landscape positions. Let’s rotate the device again ⌘ ⌥ → Now the prototype interface rotates with the device. We can also choose the starting orientation for the prototype, let’s leave this as Portrait. We want the photo viewer to work in portrait and both landscape orientations, so we can leave the default options as they are. There are four orientations we can enable: Portrait, Landscape Left, Landscape Right and Upside Down. This will add an Interface Orientation patch to the patch editor. By default, Origami prototypes are locked in the portrait orientation until we do this.Ĭlick on the Viewer Toolbar and select Enable Interface Orientation. To choose the orientations we want our prototype to display in, we need to enable Interface Orientation. This is because we haven’t enabled interface orientation yet. To help visualize this, we can display the device frame in the viewer by clicking on the settings button on the viewer toolbar and selecting Toggle Frame ⌥ D.Įven though we have rotated the device, the prototype interface has not rotated into a landscape mode. Now we can see how our prototype looks when the device is held in a landscape position. To do this, click on the Settings button on the viewer toolbar and select Rotate Right ⌘ ⌥ → Alternately if you have your device connected to Origami Studio, simply rotate the device 90 degrees. In Origami Studio we can rotate the viewer to simulate rotating the device the prototype will be running on. We also want to let the photo viewer be used in a landscape position, which will fit the photo to the full width to the screen and automatically enter the lightbox view. By tapping the background, we can enter a photo lightbox by hiding the navigation bar and changing the background color. The starting tutorial file already has layers and patches in place to create a photo viewer screen. We will walkthrough the Interface Orientation patch to setup our project to function in multiple orientations, use the Device Info patch to detect the current orientation and change the layout to best suit both portrait and landscape layouts.ĭownload the tutorial starter file to follow along as we rebuild this prototype. Change the layout of a photo viewer prototype, depending on whether the device is being viewed in a portrait or landscape position. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |