Skip to content
Swift - Swift Rarest Gemstones Collection Demo - Demo 25 of 30
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
Rarest Gemstones.xcodeproj
Rarest Gemstones


Swift - Swift Rarest Gemstones Collection Demo - Demo 25 of 30

App created in Xcode 11.1 using Swift 5.0, iOS Deployment Target 13.1 and tested on a iPhone 11 Pro Max Emulator

In this demo app we demonstrate how to code a Swift Rarest Gemstones Collection Views Image Gallery Demo App.

There are so many interesting things within Swift. This demo shows one way to code a Swift Rarest Gemstones Demo that could be used to show case some of your work in image format as well as title, short info and large details. As the user clicks the icon they are taken directly into the app. The screen shows a menu style design with a title at the top 'Rarest Gemstones'. The right below are a series of two columns with 5 images in each. As the user clicks the image they are taken to another screen which shows them more information about that image selected.

The new screen displays on the top left a back button to allow users to go back to the menu screen when selected. Then right in the middle is the title of what that gemstone is called. Right below the title bar is a large color image of the gemstone with the name highlighted in a bold blue color. Then right below that is another label which gives a piece of short info about the stone followed by a large text view of scrollable information on the gemstone itself.

Its an interesting app which uses a Navigation Contoller connected to a Collection View Controller. This gives us the top bar area where we have the title and back button in our app. We use a cell on the menu page which is formated with an image view to display the images. Then when clicked a segue takes the user to a view controller which shows more detail. On the detail view controller we have the top Navigation bar to use as a back button to the menu page and a title for the page. Then right below we have an image view which is setup for displaying the various gems. Followed by two labels which have a title and a bit of quick info. Followed by a srollable Text View filled with information on the gemstone.

We use a plist for storing the information for the gemstones which is setup as an Array populated with 10 dictionaries. This demo app is setup for use on the iPhone only because of the menu adjustments for those screen sizes but an iPad size could be added to the mix too.

The iPhone width info was ref.: The images and information used in this demo were found in a mental floss article.

Coming soon:
Details and the screen cap images of the app in use can be found on Digital Mirko.

Screen Cap on a iPhone 11 Pro Max device:(shown below)
(Left image) App started. The menu is displayed with a title and image selection options. (1/12) .
(Middle Image) The top left gem is clicked and the 'Tanzanite' gem is displayed (2/12).
(Right image) The 'Back' Button is clicked and we are taken back to the menu page. (3/12).

(Rest of the images displayed below) The gems are selected and we are taken to their pages, then the back button.
Other screen caps shown:
(4/12) Black Opal, (5/12) Larimar, (6/12) Paraiba Tourmaline,
(7/12) Grandiderite, (8/12) Alexandrite, (9/12) Benitoite,
(10/12) Painite, (11/12) Red Beryl, (12/12)Taafeite

You can’t perform that action at this time.