learn-swift / SwiftUIDemo

UI demo based on Swift 3, Xcode 8, iOS 10

Swift Based UI Demo

This repository consist small Xcode project for various UI element used within iOS application. All sample build in such a way that you will get clear idea how to use practically each UI Element within swift based application. You can use this free for personal or commercial use.

Platform & Supported Device

• Swift3, Xcode8, iOS10
• iPhone 4s, 5, 5s, 5c, SE, 6, 6 Plus, 6s, 6s Plus, 7, 7 Plus and all iPad having iOS9 or iOS10.

Index

• Demo-1: UILabel
• Demo-2: UIButton
• Demo-3: UISegmentedControl
• Demo-4: UITextField
• Demo-5: UITextView
• Demo-6: UISlider
• Demo-7: UISwitch
• Demo-8: UIActivityIndicatorView
• Demo-9: UIProgressView
• Demo-10: UIStepper
• Demo-11: UIImageView
• Demo-12: UIScrollView
• Demo-13: UIDatePicker
• Demo-14: UIPickerView
• Demo-15: UIView
• Demo-16: UIContainerView
• Demo-17: UIVisualEffectView
• Demo-18: UIAlertController
• Demo-19: UIWebView
• Demo-20: UINavigationBar
• Demo-21: UITabBar
• Demo-22: UITableView
• Demo-23: UICollectionView
• Demo-24: UIToolbar
• Demo-25: UISearchBar
• Demo-26: UIStackView - Horizontal
• Demo-27: UIStackView - Vertical
• Demo-28: UITapGestureRecognizer
• Demo-29: UIPinchGestureRecognizer
• Demo-30: UIRotationGestureRecognizer
• Demo-31: UISwipeGestureRecognizer
• Demo-32: UIPanGestureRecognizer
• Demo-33: UIScreenEdgePanGestureRecognizer
• Demo-34: UILongPressGestureRecognizer
• Demo-35: UIPageControl
• Demo-36: Indexed Table View
• Demo-37: Grouped Table View

Demo-1: UILabel

Sample project that demonstrate how to use Label.

Demo-2: UIButton

Sample project that demonstrate how to use Button.

Demo-3: UISegmentedControl

Sample project that demonstrate how to use Segmented Control.

Demo-4: UITextField

Sample project that demonstrate how to use UITextField with delegate, close keyboard when clicked anywhere on the screen, move editing from one text field to next text field when Next button clicked within keyboard.

Demo-5: UITextView

Sample project demonstrate how to use UITextView that allows multi line editing and support newline character. This demo also shows how to close the keyborad by placing action within UIButton (Note: Return key within keyboard will not close the keyboard for textview becuase return key will add newline "\n" character). Newline character support must for UITextView due it's usage for long text having paragraph, so we must close keyboard by any other way that appropriate.

Demo-6: UISlider

Sample project demonstrate how to use UISlider within swift based application. It shows how to read slider value and use it for changing font size etc.

Demo-7: UISwitch

Sample project demonstrate how to use UISwitch, set various properties or value for UITextLabel based on UISwitch toggle status.

Demo-8: UIActivityIndicatorView

Sample project demonstrate how to use UIActivityIndicatorView. i.e. How to Start/Stop spinning programmatically and hide it.

Demo-9: UIProgressView

Sample project demonstrate how to use UIProgressView. i.e. how to increment progress programmaticaly, reset it etc. Used NSTimer for auto increment progress at certain interval. This example also demonstrate how to use NSTimer practically.

Demo-10: UIStepper

Sample project demonstrate how to use UIStepper for increment counter and font size at run time.

Demo-11: UIImageView

Sample project that demonstrate how to use UIImageView and set ContentMode runtime. (e.g. ScaleToFill, ScaleAspectFit, ScaleAspectFill, Redraw, Center, Top, Bottom, Left, Right, TopLeft, TopRight, BottomLeft, BottomRight).

Demo-12: UIScrollView

Sample project demonstrate how to use UIScrollView. i.e. How to set scroll view content size, content offset, zoom scale etc. It shows how to add UIImageView runtime and set Default, Minimum, and Maximum Zoom scale. It's using UIScrollViewDelegate method for detecting zoom.

Demo-13: UIDatePicker

Sample project demonstrate how to use UIDatePicker i.e. read date value and assign to label when user change it runtime.

Demo-14: UIPickerView

Sample project demonstrate how to use UIPickerView having custom component. It shows how to fillup data within each component using UIPickerViewDataSource and read selected component value at runtime.

Demo-15: UIView

Sample project demonstrate how to use UIView and change its property (corner radious, border thickness) runtime using UISlider etc.

Demo-16: UIContainerView

Sample project demonstrate how to use UIContainerView to load UIViewController within specific area of the screen. This demo also shows how to show/hide external view via UISegmentedControl and how external view behaves when navigate via bar button.

Demo-17: UIVisualEffectView

Sample project demonstrate how to apply Blur and Vibrancy using UIVisualEffectView. It provides three options i.e. Extra Light, Light and Dark.

Demo-18: UIAlertController

Sample project demonstrate how to show Alert and ActionSheet using UIAlertController having different action button i.e Ok, Cancel, Yes, No, Delete etc.

Demo-19: UIWebView

Sample projet demonstrate how to load web url within UIWebView component.

Demo-20: UINavigationBar

Sample project demonstrate how to navigate screen using 'segue', It also shows how to set the title for the destination screen by overriding the prepareForSegue function.

Demo-21: UITabBar

Sample project demonstrate how to implement tab based application flow using UITabBar. Contact screen consist top bar button (Map) that link with "Location Map" screen via segue and navigation controller.

Demo-22: UITableView

Sample project demonstrate how to use UITableView. i.e. how to display multiple section and fillup data for each. When clicked on particular row, it will pass the selected item name to details view controller and item name displayed accordingly on details screen.

Demo-23: UICollectionView

Sample project demonstrate how to use UICollectionView. i.e. Creating custom cell that consist image, change image corner radioous at runtime as when stepper value changed.

Demo-24: UIToolbar

Sample project demonstrate how to use UIToolbar. UIToolbar can be used for various action button. This project also demonstrate how to show hide toobar using UIView Animation technique.

Demo-25: UISearchBar

Sample project demonstrate how to use UISearchBar to perform keyword search within data set and fillup UITableView accordingly. It is using UISearchBarDelegate to perfom search operation while user type the keyword.

Demo-26: UIStackView - Horizontal

Sample project demonstrate UIStackView usage (horizontal mode) and how to add images runtime within it.

Demo-27: UIStackView - Vertical

Sample project demonstrate UIStackView usage (vertical mode) and how to add images runtime within it.

Demo-28: UITapGestureRecognizer

Sample project demonstrate how to use UIGestureRecognizer. i.e. how increase counter while tapped on the screen.

Demo-29: UIPinchGestureRecognizer

Sample project demonstrate UIPinchGestureRecognizer usage. i.e. How to change view scale on pinch.

Demo-30: UIRotationGestureRecognizer

Sample project demonstrate how to rotate object using UIRotationGestureRecognizer.

Demo-31: UISwipeGestureRecognizer

Sample project demonstrate how to move object using UISwipeGestureRecognizer i.e. Swipe Left, Right, Up, Down.

Demo-32: UIPanGestureRecognizer

Sample project demonstrate how to implement object drag using UIPanGestureRecognizer.

Demo-33: UIScreenEdgePanGestureRecognizer

Sample project demonstrate how to detect screen edge swipe (Left, Right etc.) using UIScreenEdgePanGestureRecognizer.

Demo-34: UILongPressGestureRecognizer

Sample project demonstrate how to detect long press gesture using UILongPressGestureRecognizer. It will put circle at the location where long press detected on the screen.

Demo-35: UIPageControl

Sample project demonstrate how to use UIPageControl. This example using gesture recognizer for detecting swipe left or right. i.e. upon swipe gestrure detected, it will change UIPageContol currentPage properties and set appropriate value for current page number label.

Demo-36: Indexed Table View

Sample project demonstrate how display indexed list within UITableView from array. i.e. first sort product list array, group items based on section and store into dictionary, and fillup data within UITableView accordingly.

Demo-37: Grouped Table View

Sample project demonstrate how display Grouped + Indexed list within UITableView from array. i.e. first sort product list array, group items based on section and store into dictionary, and fillup data within UITableView accordingly. (Note: This is same as indexed table view example, just change table style property to Grouped.)

Image Source

Images shown within sample are taken from unsplash and used for demo purpose only. I does not claim ownership over any images or icon used.

License

SwiftUIDemo is available under the MIT license. See the LICENSE file for more info.