iOS Container Views Cheatsheet

2020, May 12    

Almost in every technical stacks, there are widgets that focusing on providing layout priciples in organising multiple views. In Android, there are ViewGroup models which contains other views. In Html5 and CSS, the display keywords defines the possible display behaviour of an element, the flex, block, grid, table are the container types with which the elements can further organize other inline type elements. In iOS, based on the documents regarding to UIKit, there are container views and container view controllers takes such responsibilities. In this document, a cheatsheet is produced to record all the core methods for each of the container view/view controllers to help reduce the effort for browsing documents when we need to develop any of those widgets.

Macbook

1. Container View Controllers

1.1 UITabBarController

In the UITabBarViewController layouts, the viewControllers:[UIViewController] hosts the root controllers for each of the tab’s corresponding root view controller. Developers need to create a root view controller for each of the tab in the tabBar. Each root view controller has a property named tabBarItem which will be displayed as the tabBar’s content. Developer can also use UITabeBarControllerDelegate to:

  • Overriding screen rotations: tell the OS that whether the current tabBarController supports rotation.
  • Managing tab selections: detecting tab selection and return bool to indicate whether a tab can be selected.
  • Managing tab bar customisations: detecting tab customization/editing process.

1.2 UINavigationController

As a stack-based scheme for navigating hierachicahl content, a navigation controller provides the interface to manage one or more child view controllers.

1.2.1 Stack Management

Developers can use topViewController to check about the current top most view controller in the navigation stack, or use a visibleViewController to detect the a view controller which might either be the same as the topViewController or a view modally presented on top of the navigation controller itself. Developers could further use pop|pushToViewController to add a new view controller into the stack or pop to a specific view controller in the stack.

1.2.2 NavBar Customization

Developers can choose to customise the navigation bar’s UI elements, including the left buttom, the middle navigation bar title and the right item. For every controller in the navigation bar, the bar item belongs to each of the individual view controller. navigationItem Of a view controller is used to specify the left/middle/right barItems for that view controller under the parent navigation bar.

1.2.3 Interface Behaviours

modalPresentationStyle decides the modal presentations context, UIModalPresentationStyle.overCurrentContext will present a view controller cover the entire navigation interface.

1.3 UIPageViewController

UIPageViewController is a container view controller that manages navigation between pages by user’s using gestures. The page view controller uses the transition that the user specify to animate the change.

  • Without using gesture based navigation, developers can use setViewControllers(_:direction:animated:completion) to set the content view controllers to be displayed.
  • To support browsing using user gesture, the UIPageViewControllerDataSource must be implemented. In the mean while, to monitor the gesture-initiated transition, UIPageVuewControllerDelegate protocol can be used.

2. Container Views

Similar to those container view controllers, the container views provide the same responsibility to group and layout the subviews inside of them.

2.1 UIScrollView

ScrollView is the superclass of several UIKit classes including UITableView and UITextView, which clips the content to its frame. The contentOffSets describes the the point at which the origin of the content view is offset from the origin of the scroll view. The contentInsets describes the custom distance that the content view is inset from the safe area or scroll view edges. The developer could set contentInsetAdjustmentBehavior to sepcify how to determine the adjusted content insets based on the contentInsets and the safearea. For zoom and scroll event detection, developers could use the UIScrollViewDelegate protocol.

2.1.1 Refresh Control

A UIRefreshControl object is a standard control that you attach to any UIScrollView object, including table views and collection views. Add this control to scrollable views to give your users a standard way to refresh their contents. When the user drags the top of the scrollable content area downward, the scroll view reveals the refresh control

func configureRefreshControl () {
   // Add the refresh control to your UIScrollView object.
   myScrollingView.refreshControl = UIRefreshControl()
   myScrollingView.refreshControl?.addTarget(self, action:
                                      #selector(handleRefreshControl),
                                      for: .valueChanged)
}
    
@objc func handleRefreshControl() {
   // Update your content…

   // Dismiss the refresh control.
   DispatchQueue.main.async {
      self.myScrollingView.refreshControl?.endRefreshing()
   }
}

2.2 UIStackView

UIStackView provides a streamlined interface for laying out a collection of views in either a column or a row (which is very similar to CSS’s flex layout). All the subviews are managed under the arrangedSubviews property. The exact layout varies depending on the stack view’s axis, distribution, alignment, spacing.

  • The axis property determines the stack’s orientation, either vertically or horizontally. Key enums include: fill, leading, top, firstBaseline, center, trailing, bottom, lastBaseline.
  • The distribution property determines the layout of the arranged views along the stack’s axis. Key enums include: fill|fillEqual|fillPropotional, equalSpacing, equalCentering. The contentHugging/contentCompression property acts as the reference for fill to determine which view needs to be stretched.
  • The alignment property determines the layout of the arranged views perpendicular to the stack’s axis.
  • The spacing property determines the minimum spacing between arranged views.

2.3 UITableView

2.3.1 Sections & Cells

UITableViewDataSource is the most essential view delegates, which responds to data-related requests from the table. It also manages the table’s data directly, or coordinates with other parts of your app to manage that data:

  • Reporting the number of sections and rows in the table.
  • Providing cells for each row of the table.
  • Providing titles for section headers and footers.
  • Configuring the table’s index, if any.
  • Responding to user- or table-initiated updates that require changes to the underlying data.

For rest of features that related to managing selections and cell interactions(order/deleting) or configuring section headers and footers or layouts, UITableViewDelegate is the protocol you should go for.

2.3.2 Sliding Actions

Creates and associate a UISwipeActionsConfiguration item for each of the table row, which you want to declare a list of swipe actions. This can be done by implement either the tableView(_:leadingSwipeActionsConfigurationForRowAt:) or the tableView(_:trailingSwipeActionsConfigurationForRowAt:) method.

2.3.3 Drag & Drop

Since iOS 11, the UITableViewDragDelegate and the UITableViewDropDelegate are provided to provide the developers convenient way to drag and drop cell from one tableview to another tableviews (or inside the tableview itself. Refer to this article for a great example.

2.4 UICollectionView

A collection view manages an ordered set of content, such as the grid of photos in the Photos app, and presents it visually.

You typically use a UICollectionViewController object to manage a collection view. You can use other view controllers too, but a collection view controller is required for some collection-related features to work. Collection views are a collaboration between many different objects, including:

  • Cells. A cell provides the visual representation for each piece of your content.
  • Layouts. A layout defines the visual arrangement of the content in the collection view.
  • Delegates: This object adopts the UICollectionViewDelegate protocol and manages user interactions with the collection view’s contents, like selection and highlighting.

2.4.1 Sections & Cells

Similar to UITableView, the sections and cells in UICollectionView are rendered via UICollectionViewDataSource. The data sources delegate helps to:

  • Provide numbers of cells in sections and number of total sections.
  • Provide cells and supplementary views in a section.
  • Informs the data source a item is moved at a new location.
  • Display the index item for the section, if there is any.

2.4.2 Layouts

There are different types of layout provided by iOS. For different usages:

  • CompostionalLayout released in 2019’s WWDC, a very powerfull layout. There is a nice article talking about this. There are three layers of models:
    • Items: The fundamental elements, a layout for all the element views in the collection view.
    • Group: Acts the same as UIStackView, to group items in a row or column and based on the items spacing and sizing information to decide the overall distribution of items along main axis. Most importantly You can put a group in a group for a complicated layout structure.
    • Sections: Each section contains a single root group. Like other view layouts for collection view, section layout provides spacing and inset information for each of the section. Besides of that, it also provides protocol to detect when a element in this group becomes visible. And the orthorgnal sliding type.

  • FlowLayout: A concrete layout object that organizes items into a grid with optional header and footer views for each section, by using this layout, the layout’s delegate method must be provided.
  • TransitionLayout A special type of layout object that lets you implement behaviors when changing from one layout to another in your collection view.
  • CollectionViewLayout is the abstract layout which needs to be implemented by developer.

2.4.3 Delegate

The UICollectionViewDelegate protocol defines methods that allow you to manage the selection and highlighting of items in a collection view and to perform actions on those items. The methods of this protocol are all optional.

Twitter
# ios # ui
TOC