Creating Nib Files - Introduction to Demystifying Views in iOS - Video Tutorial Course

Create a nib file: the predecessor to the storyboard, and still a great option for designing views in Interface Builder.

Download the course materials here:

View the course over here:

---

We are also focused on developing a strong community. Our goal is to help each other reach our dreams through friendship and cooperation. As you can see below, a bunch of us have joined forces to make this happen: authors, editors, subject matter experts, app reviewers, and most importantly our amazing readers!

---

Views are the fundamental building blocks of your app's user interface, and the UIView class defines the behaviors that are common to all views. A view object renders content within its bounds rectangle and handles any interactions with that content. The UIView class is a concrete class that you can instantiate and use to display a fixed background color. You can also subclass it to draw more sophisticated content. To display labels, images, buttons, and other interface elements commonly found in apps, use the view subclasses provided by the UIKit framework rather than trying to define your own.

Because view objects are the main way your application interacts with the user, they have a number of responsibilities. Here are just a few:

Drawing and animation

Views draw content in their rectangular area using UIKit or Core Graphics.

Some view properties can be animated to new values.

Layout and subview management

Views may contain zero or more subviews.

Views can adjust the size and position of their subviews.

Use Auto Layout to define the rules for resizing and repositioning your views in response to changes in the view hierarchy.

Event handling

A view is a subclass of UIResponder and can respond to touches and other types of events.

Views can install gesture recognizers to handle common gestures.

Views can be nested inside other views to create view hierarchies, which offer a convenient way to organize related content. Nesting a view creates a parent-child relationship between the child view being nested (known as the subview) and the parent (known as the superview). A parent view may contain any number of subviews but each subview has only one superview. By default, when a subview’s visible area extends outside of the bounds of its superview, no clipping of the subview's content occurs. Use the clipsToBounds property to change that behavior.

The geometry of each view is defined by its frame and bounds properties. The frame property defines the origin and dimensions of the view in the coordinate system of its superview. The bounds property defines the internal dimensions of the view as it sees them and is used almost exclusively in custom drawing code. The center property provides a convenient way to reposition a view without changing its frame or bounds properties directly.

For detailed information about how to use the UIView class, see View Programming Guide for iOS.

Creating a View

Normally, you create views in your storyboards by dragging them from the library to your canvas. You can also create views programmatically. When creating a view, you typically specify its initial size and position relative to its future superview. For example, the following example creates a view and places its top-left corner at the point (10, 10) in the superview's coordinate system (once it is added to that superview).

To add a subview to another view, call the addSubview(_:) method on the superview. You may add any number of subviews to a view, and sibling views may overlap each other without any issues in iOS. Each call to the addSubview(_:) method places the new view on top of all other siblings. You can specify the relative z-order of subview by adding it using the insertSubview(_:aboveSubview:) and insertSubview(_:belowSubview:) methods. You can also exchange the position of already added subviews using the exchangeSubview(at:withSubviewAt:) method.

After creating a view, create Auto Layout rules to govern how the size and position of the view change in response to changes in the rest of the view hierarchy. For more information, see Auto Layout Guide.

The View Drawing Cycle

View drawing occurs on an as-needed basis. When a view is first shown, or when all or part of it becomes visible due to layout changes, the system asks the view to draw its contents. For views that contain custom content using UIKit or Core Graphics, the system calls the view’s draw(_:) method.

[georgeshoemaker]

Honest feedback: I worked through a couple of the tutorials in this series when they were briefly available for free in early May, 2019. While the instructions are detailed and complete, I struggled to understand what I was doing. My eventual goal was to make a reusable view that I could adjust in the interface builder. I was successful after piecing together medium articles and stack overflow posts. I think this tutorial series would be more effective with a simpler example, and more explanation. The core ideas I was looking for where: How to create a xib, how to create a custom UIView that loads the nib, how to use my custom view in the interface builder, and how to delegate actions from the custom view to a view controller. These things are present in the tutorial, but the extra bells and whistles of the example detracted from the learning.

[hotmandead]

Great video !

NOTE: To replicate this use PNG format Images