All Tutorials · 19 Results
iOS & Swift
Chapter in UIKit Apprentice
The Final App
…game to display on only part of the screen for the rest of the people! This is a good opportunity to learn about Auto Layout, a core UIKit technology that makes it easy to support many different screen sizes in your apps. Tip: You can use the Window ▸ Scale menu…
iOS & Swift
Chapter in UIKit Apprentice
Landscape
What actually happens when you run the app depends on the orientation the user holds the device in. The trick is to use Auto Layout constraints to make sure that the view controllers properly resize to landscape or portrait at runtime. ➤ Drag a new Label into the scene and give…
iOS & Swift
Chapter in UIKit Apprentice
The Detail Pop-up
…white in dark mode. ➤ Drag a new View into the scene. Using the Size inspector, make it 280 points wide and 280 high. Add Auto Layout constraints for width=280 and height=280 to ensure that the view stays at this size. ➤ Center the view in the scene by setting…
iOS & Swift
Chapter in UIKit Apprentice
Polish the Pop-up
…label itself will end up being, especially if it sometimes may have more than one line of text. Generally, you would have used Auto Layout to set up constraints between the display elements in the pop-up view to handle the changes in layout as the font size changes because…
iOS & Swift
Chapter in UIKit Apprentice
Polishing the App
…should sit at the same level in the view hierarchy. When you embedded the six labels and the button in the container view, the Auto Layout constraints that those seven controls had to the main view were broken. Makes sense, right? Because those controls are now inside a different view…
iOS & Swift
Chapter in UIKit Apprentice
Image Picker
Drawing section. This makes the image view initially invisible, until you have a photo to give it. ➤ Add left, top, right, bottom, and height Auto Layout constraints to the Image View: Image View Auto Layout constraints We will use some of these Auto Layout constraints to move things…
iOS & Swift
Chapter in UIKit Apprentice
Custom Table Cells
…toolbar to switch to iPhone SE (3rd Generation) and Dark appearance. As usual, we’ll design for the smaller device but use Auto Layout to make the user interface adapt to larger devices/screens. ➤ From the Objects Library, drag a new Table View Cell on to the canvas. ➤ Select…
iOS & Swift
Chapter in UIKit Apprentice
The Tag Location Screen
…from the Right Detail cell style. Set the font of the label to System, size 12, so that the sizes match. ➤ Add a left Auto Layout Constraint — with a value of 0, and have Constrain to margins checked — and also add a constraint to center Vertically in Container. This will…
iOS & Swift
Chapter in UIKit Apprentice
Get Location Data
…coordinates. Set the Alignment attribute to centered and connect the label to the messageLabel outlet. ➤ Once you’ve positioned the (Message Label), set its Auto Layout constraints for left, top, and right so that it aligns with the Safe Area. In case you’re wondering, you don’t have…
iOS & Swift
Chapter in UIKit Apprentice
Edit Items
…that it doesn’t overlap the checkmark or the disclosure button. There should be about 8 points horizontal spacing between the two. ➤ Adjust the Auto Layout constraints on the original label and set new constraints on the new label after you’ve positioned everything to your satisfaction. The best course…
iOS & Swift
Chapter in UIKit Apprentice
Internationalization
…missing for the user’s language, iOS will fall back to the one from the Base localization. The pop-up in Dutch Thanks to Auto Layout, the labels automatically resize to fit the translated text. A common issue with localization is that English words tend to be shorter than words…
iOS & Swift
Chapter in UIKit Apprentice
UI Improvements
Size inspector for this. ➤ Once the Label and Image View are sized and positioned, add width, height, top, right, and bottom Auto Layout constraints to the Image View using the Add New Constraints menu available via the icon at the bottom of the canvas. Adding constraints to the Image View…
iOS & Swift
Chapter in UIKit Apprentice
The iPad
…switch to the iPad (9.7”) layout again. ➤ Select the Pop-up View and add size based variations for wR hR for left, and right Auto Layout pin constraints so that the spacing around the pop-up is 80 points for this size variation. You’ll notice that you already have…
iOS & Swift
Chapter in UIKit Apprentice
Table Views
…overlapping other views. Sounds familiar? Yes, this is the same warning you saw in Bull’s Eye when you had views without any Auto Layout constraints! And you know how to find the affected views now, right? ➤ In the storyboard, click on the yellow warning circle for the table view…
iOS & Swift
Chapter in UIKit Apprentice
Lists
Drop a new Text Field on to the cell, adjust it’s size and position and then set up left, top, right, and bottom Auto Layout constraints. Then, set the following configuration options via the Attributes inspector: Font size: 17 Placeholder text: Name of the List Border Style: none (Optional…
iOS & Swift
Chapter in UIKit Apprentice
Add Item Screen
…text. ➤ Drag a Text Field object into the cell and size it up nicely. You might want to add left, top, right, and bottom Auto Layout constraints to the text field if you don’t want any Xcode warnings. You know how to do that on your own, right? (Hint…
iOS & Swift
Chapter in UIKit Apprentice
Maps
…bottom – the size of the Map View should be 375 × 574 points. ➤ Add left, top, right, and bottom Auto Layout constraints to the Map View via the Add New Constraints menu, pinning it to the main view. ➤ In the Attributes inspector for the Map View, enable Shows: User Location. That…
iOS & Swift
Chapter in UIKit Apprentice
Local Notifications
Date Picker, and then pin its left and right edges where the right edge should be 8. You may need to adjust the Auto Layout constraints for the Remind Me label and the switch to align them nicely with the labels from the “due date” cell. Tip: select…
iOS & Swift
Chapter in UIKit Apprentice
The New Look
…will have font size 20 so they stand out more. Because you’ve changed the sizes of some of the labels, your carefully constructed layout may have been messed up a bit. You may want to clean it up a little. At this point, the game screen should look something…