Swift UI Element basics

UI Elements

UI Elements in the swift are the physical objects which can be seen and touchable by the user on mobile device interface. In UIElements we have many objects among those some are of touchable(action) elements and some are of display elements. Basically these elements are provided in the UIKit.framework.

1) Display UIElements

 These objects are divided based on the content they display to the user, these object won't perform any action unless you add the additional behavior say gestures to them.

• UIView
• UILabel
• UIImageView
• UITextView
• UITextField
• UIProgressView
• UIActivityIndicatorView
• UIPickerView
• UIWebView
• UIScrollView
• UITableView
• UITableViewCell
• UICollectionView
• UICollectionViewCell
• UISearchBar
• MKMapView
• UIVisualEffectView

2) Control UIElements

 These objects are categorized based on the content they display along with  the action performed by them when user taps on them.

• UIButton
• UISwitch
• UISegmentedControl
• UISlider
• UIStepper
• UIBarButtonItem

3) Frames and Bounds
Before going to the next tutorial you should know about the following data types from CoreGraphics.Framework. If you are new to the iOS Development you may wonder what is CGSize,CGPoint,CGRect  . Actually these are the structures used in the geometry calculations in CoreGraphics.framework, and these all are mentioned in the CGGeometry Reference and also you can see some of the data type included  CGFloat,CGVector .  CGFloat is nothing more than typedef float or double based on the 32bit or 64bit.

3a)Frame : The frame of view defines the rectangular are where it will be shown with respect to view's superview. The frame is of type  CGRect  which is a structure, includes size of view and position of view's superview coordinate system.
 
Syntax
CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height) 

In the syntax {x,y} specifies the origin and {width,height} specifies the size of view.You can see it clearly provided by apple

CG_INLINE CGRectCGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)

{

    CGRect rect;

    rect.origin.x = x; rect.origin.y = y;

    rect.size.width = width; rect.size.height = height;

    return rect;

}

 In the below image you can clearly observe that the frame of green view with respect to orange view as it's superview.

3b)Bounds: The bounds of a view also defines the rectangular area for the view, which defines the size of view and position in the view's own coordinate system. In most cases the origin of view set to {0,0} is shown in the below image.

Conclusion

These are the basic UIElement that we have in Swift programming language to design application interface. So we will see about these UI Elements in the next tutorial in detail, like how to create them and display to the user.