Introduction
I have always liked Apple design, whether it's hardware like the iPhone or software such as the accompanying iOS mobile operating system interface developed by Apple. The simple layouts and mobile functionality enabled by the design of iOS is perfectly balanced with an instantly recognisable style applied by Apple.
So I decided to see whether I could replicate the iOS scrollable gallery on my iPhone in Power Apps. This article demonstrates the steps I followed to mimic the icon iOS menus in Power Apps. I started by identifying the icon iOS features, then importing a set of icons into Power Apps and creating the menu using two collections. The rest was achieved by applying styling to a vertical gallery.
Design review
The first step was to identify the iOS design features which make the style so recognisable and then working out how to replicate them in Power Apps. I noticed that rows were grouped in discrete sections within the gallery and these groups had rounded corners at the top and bottom. The black background and dark grey template fill against colourful icons and white text was also a typical design feature.
This annotated image shows the typical design features of an iOS gallery that I set about replicating in Power Apps.
Getting started
I started by creating a new canvas app from blank, giving it a name and selecting the phone layout.
Once created, the next step was to import the icons which will be used in the menu. If you have your own icons then you can skip the next section.
Gallery icons
A set of icons are required to display in the gallery. For this example, I created a collection within Power Apps containing an image title and image geometry of an icon in SVG format. This was my preferred method of loading the icons into Power Apps and I have included the code I used below, but feel free to use your own images in other formats if preferred.
The contents of the GalleryIcons.txt file below can be copied and pasted into the OnSelect property of a button in Power Apps.
I then inserted a vertical gallery into Power Apps and connected it to the colMyIcons collection to check everything was working as expected. You will see that each icon has an associated title which is used in a lookup command later on.
Note that this gallery is not required anymore and can be hidden or deleted. Once the icons were loaded into a collection, the next step was to create another collection for the menu items.
Menu collection
The menu took the form of a vertical gallery in Power Apps that displayed the contents of a collection. The collection contained important information defining the type of row in the gallery. For example, the gallery must know whether the row is a top row, a middle row, a bottom row or a gap. Once this was defined, conditional styling could then be applied to replicate the grouped rows in iOS.
The collection named colMyIOSGallery also included an item number, title and icon. The icon column was a direct lookup to the icon collection created earlier. For example, row 1 was determined in the collection as follows:
{
Item: 1,
Title: "General",
Icon: LookUp(colMyIcons, Title = "General").SVG,
ItemType: "Top"
}The image below shows how each segment of the collection corresponds to the rows in the gallery. You can see that row 7 is a gap and does not contain a title or an icon. I also added gap rows to the top and bottom of the gallery to replicate the iOS design.
The code for the full collection is available below as a .txt file if required.
Gallery styling
Once the vertical gallery was connected to colMyIOSGallery, styling was applied to achieve the desired look and transform the default Power Apps gallery to an iOS styled gallery. This image below shows the result of the transformation which was achieved following the rest of this article.
The first step was to change the image within the gallery rows showing ThisItem.Icon and delete all labels except for one which displayed ThisItem.Title. The gallery scrollbar was also be hidden.
Next the image, text label, arrow icon and separator line was repositioned and sized as shown in the image below. The arrow icon colour was changed to RGBA(90, 90, 94, 1) and the separator line colour was changed to RGBA(77, 77, 81, 1). The gallery template size was changed to 76 and the gallery itself was centred horizontally on the screen and stretched to the top and bottom.
The dark grey background was achieved by adding a button to the gallery and reordering it behind all the other elements in the gallery. It was important to be a button element so that the rounded corners could be used later on. The button and text label properties were set as shown in the image below.
iOS has the SF Pro Display font which can be used if your device has the font installed, otherwise Open Sans is a similar alternative. Simply type "SF Pro Display" in the Font property of the text label to access a custom font.
The separator lines and arrows visibility was set to a condition depending on the row type. The arrow icons were made not visible for gap rows and the separator lines were only visible on top or middle rows. This gave the required look to match the iOS design.
Rounded corners
The next step was to round the top corners of the top rows and the bottom corners of the bottom rows in a group. Here is an exploded view of my approach to create the rounded corners for the top and bottom rows in a group.
Conditions were added to the radius properties of the button in order to achieve this. The logic stated that the radius should be 20 (rounded) if the rows are on the top or bottom, else be 0 (right-angled).
The buttons in the gaps between grouped rows were then hidden by changing the visibility property as follows:
Finally, screen background was changed to black RGBA(0, 0, 0, 1) to complete the iOS look for the gallery.
Summary
This article has shown how to group rows and apply styles to galleries within Power Apps. The intent was to demonstrate how results can be achieved relatively easily without any additional CSS or HTML.
I hope you enjoyed reading this article about my approach to creating iOS styled galleries in Power Apps. The basic concepts can be applied elsewhere within the Power Platform and enhanced to produce some great results. Please let me know if you have any questions or comments.
Thank you.