![]() ![]() The Width of the iPhone X and iPhone SE are quite different, so our layout automatically adapts between two columns (X) and 1 column (SE).Looking to build a grid layout in your app? The advantage of this approach over using a UITableView is that we have a much more flexible layout that can be presented on different devices. If you now run the application on different devices, you can see that we’ve created an almost static UICollectionView that represents a menu. User tapped on Purple Cell User tapped on Green Cell User tapped on Red Cell User tapped on Blue Cell The completed, flexible layout Now if you run the application, and press on each button, you should see the following output in the Xcode debug console. In a production application, we might instead cast the UITableViewCell to a custom class, and read metadata from it to decide how to branch the application flow. In response, the sample code just prints the Cell Id of the cell the user tapped on. This delegate method is called when the user taps on any of the (four) cells in the UICollectionView. But by adding two data source methods, you can provide the missing information to create the layout design using Interface Builder at runtime.Ĭhange the UIViewController class definition as follows: class ViewController: UIViewController ![]() Even though the layout looks similar to what can be done using a static UITableView (except for multiple columns), it's not really a static design. Why is that? It's because all we really did was to design some templates of what a set of dynamic cells can look like. If you ran the application now, you’d see a screen with an empty UICollectionView. ![]() Step 2: Implement the view controller delegates When finished your storyboard design should look something like this: Change the UIView color, the UILabel text and the UICollectionViewCell Reuse Identity to differentiate each of the four cells from each other. Now copy & paste the Purple cell three times. Using the Identity Inspector, change the UICollectionViewCell Collection Reusable View Identifier to "Purple Cell".Change the background color of the UIView to Purple, and the UILabel text to "Purple Cell".Add a UILabel to the UIView in step 1, and center it vertically & horizontally in the UIView container.Add a UIView, and use constraints to pin it 4 points from the top, bottom, leading and trailing edges (clear the constrain to margins checkbox).Using the size inspector, customize the UICollectionView cell size to w=170, h=80Ĭustomize the default UICollectionViewCell with the following changes:.Set ViewController as the UICollectionView delegate and datasource.Add a UICollectionView to the View Controller scene in Main.storyboard.Open Xcode and create a new single view application.Step 1: Creating a static layout in Interface BuilderĪs with creating static UITableView layouts, the first step is to create a layout in Interface Builder. But the basic architecture for this approach would be the same. Each cell could be a different Collection View Cell design, and present entirely different content from the others. But a real application could be much more sophisticated. To keep the tutorial simple, this application will just display four cells of identical size and layout. When the user taps on a cell, the application will intercept that event and respond appropriately (in a production app, this may be to fire the correct segue associated with each cell.In landscape mode, the click-able cells will fill the horizontal space before starting a new row. The cells will adapt to the size of the display - for example using a two-column layout on an iPhone X in portrait mode, and a single column on an iPhone SE in portrait mode. ![]() The collection view will display a fixed number of cells designed within an Xcode storyboard.We'll provide the following functionality to the application: In this tutorial, we’ll create a UICollectionView that will serve as a "main menu" for an application. The latter dynamic approach is used when the number of cells are not known until runtime-such as a list of products in a product catalog stored on a web service. The former approach can be used to more quickly implement simple use cases like a screen to allow users to change settings. When using a UITableView, we have a choice of either creating a table with static cells or to create cell templates that are used to create cells dynamically. ![]()
0 Comments
Leave a Reply. |