diff --git a/README.md b/README.md index b929055..b9772f1 100755 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # UIKit Catalog: Creating and Customizing Views and Controls -Customize your app's user interface with views and controls in UIKit. +Customize your app's user interface with views and controls. ## Overview -This sample guides you through several types of customizations that you can make in your iOS app. The sample uses a split view controller architecture for navigating UIKit views and controls. The primary view controller (`MasterViewController`) shows the available views and controls. Selecting one shows the secondary view controller associated with it. +This sample guides you through several types of customizations you can make in your iOS app. The sample uses a split-view controller architecture for navigating UIKit views and controls. The primary view controller (`MasterViewController`) shows the available views and controls. When you select one, `MasterViewController` shows the secondary view controller associated with it. The name of each secondary view controller reflects its *target item*. For example, the `AlertControllerViewController` class shows how to use a `UIAlertController` object. The only exceptions to this rule are `UISearchBar` and `UIToolbar`; the sample demonstrates these APIs in multiple view controllers to explain how their controls function and how to customize them. To demonstrate how to manage the complexity of your storyboards, the app hosts all view controllers in a separate storyboard and loaded when needed. @@ -16,6 +16,7 @@ This sample demonstrates the following views and controls (several of which are * [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker) * [`UIPickerView`](https://developer.apple.com/documentation/uikit/uipickerview) * [`UIColorPickerViewController`](https://developer.apple.com/documentation/uikit/uicolorpickerviewcontroller) +* [`UIColorWell`](https://developer.apple.com/documentation/uikit/uicolorwell) * [`UIFontPickerViewController`](https://developer.apple.com/documentation/uikit/uifontpickerviewcontroller) * [`UIImagePickerViewController`](https://developer.apple.com/documentation/uikit/uiimagepickercontroller) * [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview) @@ -28,13 +29,14 @@ This sample demonstrates the following views and controls (several of which are * [`UIStepper`](https://developer.apple.com/documentation/uikit/uistepper) * [`UISwitch`](https://developer.apple.com/documentation/uikit/uiswitch) * [`UITextField`](https://developer.apple.com/documentation/uikit/uitextfield) +* [`UITextFormattingCoordinator`](https://developer.apple.com/documentation/uikit/uitextformattingcoordinator) * [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview) * [`UIToolbar`](https://developer.apple.com/documentation/uikit/uitoolbar) * [`WKWebView`](https://developer.apple.com/documentation/webkit/wkwebview) ## Add Accessibility Support to Your Views -VoiceOver and other system accessibility technologies use the information provided by your views and controls to help all users navigate your content. UIKit views include default accessibility support, but you can improve the user experience by providing custom accessibility information. +VoiceOver and other system accessibility technologies use the information provided by views and controls to help all users navigate content. UIKit views include default accessibility support. Improve user experience by providing custom accessibility information. In this UIKitCatalog sample, several view controllers configure the `accessibilityType` and `accessibilityLabel` properties of their associated view. Picker view columns don't have labels, so the picker view asks its delegate for the corresponding accessibility information: @@ -56,14 +58,14 @@ func pickerView(_ pickerView: UIPickerView, accessibilityLabelForComponent compo ## Display a Custom Alert -`AlertControllerViewController` demonstrates several techniques for displaying modal alerts and action sheets from your interface. The configuration process is similar for all alerts: +`AlertControllerViewController` demonstrates several techniques for displaying modal alerts and action sheets from an interface. The configuration process is similar for all alerts: 1. Determine the message you want to display in the alert. 2. Create and configure a `UIAlertController` object. -3. Add handlers for actions that the user may take. +3. Add handlers for actions the user may take. 4. Present the alert controller. -The `showSimpleAlert` function uses the `NSLocalizedString` function to retrieve the alert messages in the user’s preferred language. The `showSimpleAlert` function uses those strings to create and configure the `UIAlertController` object. Although the button in the alert has the title OK, the sample uses a cancel action to ensure that the alert controller applies the proper styling to the button: +The `showSimpleAlert` function uses the `NSLocalizedString` function to retrieve the alert messages in the user’s preferred language. The `showSimpleAlert` function uses those strings to create and configure the `UIAlertController` object. Although the button in the alert has the title OK, the sample uses a cancel action to ensure the alert controller applies the proper styling to the button: ``` swift func showSimpleAlert() { @@ -87,7 +89,7 @@ func showSimpleAlert() { ## Customize the Appearance of Sliders -This sample demonstrates different ways to display a `UISlider`, a control used to select a single value from a continuous range of values. You customize the appearance of a slider by assigning stretchable images for left-side tracking, right-side tracking, and the thumb. In this example, the track image is stretchable and is one pixel wide. Make the track images wider to provide rounded corners, but be sure to set these images' `capInsets` property to allow for the corners. +This sample demonstrates different ways to display a `UISlider`, a control you use to select a single value from a continuous range of values. Customize the appearance of a slider by assigning stretchable images for left-side tracking, right-side tracking, and the thumb. In this example, the track image is stretchable and is one pixel wide. Make the track images wider to provide rounded corners, but be sure to set these images' `capInsets` property to allow for the corners. The `configureCustomSlider` function sets up a custom slider: @@ -115,9 +117,9 @@ func configureCustomSlider() { } ``` -## Add a Search Bar to Your Interface +## Add a Search Bar to an Interface -Use a `UISearchBar` for receiving search-related information from the user. There are various ways to customize the look of the search bar: +Use a `UISearchBar` to receive search-related information from the user. There are various ways to customize the look of the search bar: * Add a cancel button. * Add a bookmark button. @@ -147,7 +149,7 @@ func configureSearchBar() { ## Customize the Appearance of Toolbars -This sample shows how to customize a `UIToolbar`, a specialized view that displays one or more buttons along the bottom edge of your interface. Customize a toolbar by determining its bar style (black or default), translucency, tint color, and background color. +This sample shows how to customize a `UIToolbar`, a specialized view that displays one or more buttons along the bottom edge of an interface. Customize a toolbar by determining its bar style (black or default), translucency, tint color, and background color. The following `viewDidLoad` function in `CustomToolbarViewController` sets up a tinted tool bar: @@ -191,7 +193,7 @@ override func viewDidLoad() { ## Add a Page Control Interface -Use a `UIPageControl` to structure your app's user interface. A page control is a specialized control that displays a horizontal series of dots, each of which corresponds to a page in the app’s document or other data-model entity. You customize a page control by setting its tint color for all the page indicator dots, and for the current page indicator dot. +Use a `UIPageControl` to structure an app's user interface. A page control is a specialized control that displays a horizontal series of dots, each of which corresponds to a page in the app’s document or other data-model entity. Customize a page control by setting its tint color for all the page-indicator dots, and for the current page-indicator dot. The `configurePageControl` function sets up a customized page control: @@ -210,7 +212,7 @@ func configurePageControl() { ## Add Menus to Your Controls -You can attach menus to controls like `UIButton` and `UIBarButtonItem`. Create menus with the [`UIAction`](https://developer.apple.com/documentation/uikit/uiaction) class, and attach a menu to each control by setting the [`UIMenu`](https://developer.apple.com/documentation/uikit/uimenu) property. +Attach menus to controls like `UIButton` and `UIBarButtonItem`. Create menus with the [`UIAction`](https://developer.apple.com/documentation/uikit/uiaction) class, and attach a menu to each control by setting the [`UIMenu`](https://developer.apple.com/documentation/uikit/uimenu) property. Attach a menu to a `UIButton` as shown here: @@ -239,4 +241,14 @@ var customTitleBarButtonItem: UIBarButtonItem { } ``` +## Support Mac Catalyst +This sample app is built with Mac Catalyst, which means the sample runs on both iPad and Mac. This is achieved by selecting the Mac checkbox in Project Settings. For more about how Mac Catalyst works see [Mac Catalyst](https://developer.apple.com/mac-catalyst/). + +When built for Mac Catalyst, this sample achieves: + +* Interface Optimization for Mac — With Optimize Interface For the Mac project setting turned on, the app has full control of every pixel on the screen, and the app can adopt more controls specific to Mac. Building the sample for Mac Catalyst makes the app take advantage of the system features in macOS. The option Show Designed for iPad Run Destination allows this sample, as an iPad app, to run "as-is" on Apple silicon Macs. This requires macOS 11 and a Mac with Apple silicon. + +* Navigation and title bar hiding — The sample app hides these to make the app appear more like a Mac app. It also changes other behaviors by using traitCollection's `userInterfaceIdiom` or the compilation conditional block that uses the `targetEnvironment():` platform condition. + +* Translucent background — By setting the split view controller's `primaryBackgroundStyle` to `.sidebar`, the primary view controller or side bar shows a blurred desktop behind its view. Setting this property has no effect when running in iOS. diff --git a/UIKitCatalog.xcodeproj/project.pbxproj b/UIKitCatalog.xcodeproj/project.pbxproj index aaf177c..7d1d2fe 100644 --- a/UIKitCatalog.xcodeproj/project.pbxproj +++ b/UIKitCatalog.xcodeproj/project.pbxproj @@ -838,9 +838,10 @@ PRODUCT_NAME = "$(TARGET_NAME)"; PROVISIONING_PROFILE_SPECIFIER = ""; SUPPORTS_MACCATALYST = YES; + SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = YES; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1,2"; + TARGETED_DEVICE_FAMILY = "1,2,6"; }; name = Debug; }; @@ -860,9 +861,10 @@ PRODUCT_NAME = "$(TARGET_NAME)"; PROVISIONING_PROFILE_SPECIFIER = ""; SUPPORTS_MACCATALYST = YES; + SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = YES; SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule"; SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1,2"; + TARGETED_DEVICE_FAMILY = "1,2,6"; }; name = Release; }; diff --git a/UIKitCatalog/ActivityIndicatorViewController.swift b/UIKitCatalog/ActivityIndicatorViewController.swift index b51065f..4c30f20 100755 --- a/UIKitCatalog/ActivityIndicatorViewController.swift +++ b/UIKitCatalog/ActivityIndicatorViewController.swift @@ -50,4 +50,35 @@ class ActivityIndicatorViewController: UITableViewController { tintedSmallActivityIndicatorView.startAnimating() tintedLargeActivityIndicatorView.startAnimating() } + + // MARK: - UITableViewDataSource + + override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? { + #if targetEnvironment(macCatalyst) + // Don't show tinted activitiy indicator for macOS, it does not exist. + if section == 1 { + return "" + } else { + return super.tableView(tableView, titleForHeaderInSection: section) + } + #else + return super.tableView(tableView, titleForHeaderInSection: section) + #endif + } + + // MARK: - UITableViewDelegate + + override func tableView(_ tableView: UITableView, + heightForRowAt indexPath: IndexPath) -> CGFloat { + #if targetEnvironment(macCatalyst) + // Don't show tinted activity indicator for macOS, it does not exist. + if indexPath.section == 1 { + return 0 + } else { + return super.tableView(tableView, heightForRowAt: indexPath) + } + #else + return super.tableView(tableView, heightForRowAt: indexPath) + #endif + } } diff --git a/UIKitCatalog/AlertControllerViewController.swift b/UIKitCatalog/AlertControllerViewController.swift index b88dbc2..ee07eb8 100755 --- a/UIKitCatalog/AlertControllerViewController.swift +++ b/UIKitCatalog/AlertControllerViewController.swift @@ -115,8 +115,6 @@ class AlertControllerViewController: UITableViewController { func showTextEntryAlert() { let title = NSLocalizedString("A Short Title is Best", comment: "") let message = NSLocalizedString("A message should be a short, complete sentence.", comment: "") - let cancelButtonTitle = NSLocalizedString("Cancel", comment: "") - let otherButtonTitle = NSLocalizedString("OK", comment: "") let alertController = UIAlertController(title: title, message: message, preferredStyle: .alert) @@ -126,10 +124,12 @@ class AlertControllerViewController: UITableViewController { } // Create the actions. + let cancelButtonTitle = NSLocalizedString("Cancel", comment: "") let cancelAction = UIAlertAction(title: cancelButtonTitle, style: .cancel) { _ in print("The \"Text Entry\" alert's cancel action occurred.") } + let otherButtonTitle = NSLocalizedString("OK", comment: "") let otherAction = UIAlertAction(title: otherButtonTitle, style: .default) { _ in print("The \"Text Entry\" alert's other action occurred.") } diff --git a/UIKitCatalog/Assets.xcassets/Contents.json b/UIKitCatalog/Assets.xcassets/Contents.json index da4a164..73c0059 100755 --- a/UIKitCatalog/Assets.xcassets/Contents.json +++ b/UIKitCatalog/Assets.xcassets/Contents.json @@ -1,6 +1,6 @@ { "info" : { - "version" : 1, - "author" : "xcode" + "author" : "xcode", + "version" : 1 } -} \ No newline at end of file +} diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/Contents.json b/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/Contents.json deleted file mode 100755 index b44a280..0000000 --- a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/Contents.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "images" : [ - { - "idiom" : "universal", - "filename" : "increment_disabled_1x.png", - "scale" : "1x" - }, - { - "idiom" : "universal", - "filename" : "increment_disabled_2x.png", - "scale" : "2x" - }, - { - "idiom" : "universal", - "filename" : "stepper_increment_disabled_3x.png", - "scale" : "3x" - } - ], - "info" : { - "version" : 1, - "author" : "xcode" - } -} \ No newline at end of file diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/increment_disabled_1x.png b/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/increment_disabled_1x.png deleted file mode 100755 index 7052591..0000000 Binary files a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/increment_disabled_1x.png and /dev/null differ diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/increment_disabled_2x.png b/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/increment_disabled_2x.png deleted file mode 100755 index d263ac4..0000000 Binary files a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/increment_disabled_2x.png and /dev/null differ diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/stepper_increment_disabled_3x.png b/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/stepper_increment_disabled_3x.png deleted file mode 100755 index a855e59..0000000 Binary files a/UIKitCatalog/Assets.xcassets/stepper_increment_disabled.imageset/stepper_increment_disabled_3x.png and /dev/null differ diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/Contents.json b/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/Contents.json deleted file mode 100755 index bb0fb61..0000000 --- a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/Contents.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "images" : [ - { - "idiom" : "universal", - "filename" : "increment_highlighted_1x.png", - "scale" : "1x" - }, - { - "idiom" : "universal", - "filename" : "increment_highlighted_2x.png", - "scale" : "2x" - }, - { - "idiom" : "universal", - "filename" : "stepper_increment_highlighted_3x.png", - "scale" : "3x" - } - ], - "info" : { - "version" : 1, - "author" : "xcode" - } -} \ No newline at end of file diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/increment_highlighted_1x.png b/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/increment_highlighted_1x.png deleted file mode 100755 index f092afa..0000000 Binary files a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/increment_highlighted_1x.png and /dev/null differ diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/increment_highlighted_2x.png b/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/increment_highlighted_2x.png deleted file mode 100755 index a3fcd53..0000000 Binary files a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/increment_highlighted_2x.png and /dev/null differ diff --git a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/stepper_increment_highlighted_3x.png b/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/stepper_increment_highlighted_3x.png deleted file mode 100755 index 3d416b3..0000000 Binary files a/UIKitCatalog/Assets.xcassets/stepper_increment_highlighted.imageset/stepper_increment_highlighted_3x.png and /dev/null differ diff --git a/UIKitCatalog/Base.lproj/AlertControllerViewController.storyboard b/UIKitCatalog/Base.lproj/AlertControllerViewController.storyboard index 75e090f..e52293c 100755 --- a/UIKitCatalog/Base.lproj/AlertControllerViewController.storyboard +++ b/UIKitCatalog/Base.lproj/AlertControllerViewController.storyboard @@ -1,8 +1,8 @@ - - + + - + @@ -13,7 +13,7 @@ - + @@ -27,7 +27,7 @@ @@ -44,7 +44,7 @@ @@ -61,7 +61,7 @@ @@ -78,7 +78,7 @@ @@ -95,7 +95,7 @@ @@ -116,7 +116,7 @@ @@ -133,7 +133,7 @@ @@ -156,4 +156,9 @@ + + + + + diff --git a/UIKitCatalog/Base.lproj/ButtonViewController.storyboard b/UIKitCatalog/Base.lproj/ButtonViewController.storyboard index acc1027..0009829 100755 --- a/UIKitCatalog/Base.lproj/ButtonViewController.storyboard +++ b/UIKitCatalog/Base.lproj/ButtonViewController.storyboard @@ -2,7 +2,6 @@ - @@ -89,18 +88,13 @@ - - - + + @@ -203,7 +197,7 @@ - + @@ -214,7 +208,7 @@ - + diff --git a/UIKitCatalog/Base.lproj/ColorPickerViewController.storyboard b/UIKitCatalog/Base.lproj/ColorPickerViewController.storyboard index 9fee52f..55e9ee6 100755 --- a/UIKitCatalog/Base.lproj/ColorPickerViewController.storyboard +++ b/UIKitCatalog/Base.lproj/ColorPickerViewController.storyboard @@ -1,8 +1,8 @@ - + - + @@ -16,35 +16,54 @@ - - + - - + + + + + + + + + + + - - - - + + + + + + + - + + + + + + + + + diff --git a/UIKitCatalog/Base.lproj/FontPickerViewController.storyboard b/UIKitCatalog/Base.lproj/FontPickerViewController.storyboard index 3459af1..b28c89f 100755 --- a/UIKitCatalog/Base.lproj/FontPickerViewController.storyboard +++ b/UIKitCatalog/Base.lproj/FontPickerViewController.storyboard @@ -1,8 +1,8 @@ - + - + @@ -17,18 +17,25 @@ + @@ -36,17 +43,20 @@ - - - - - + + + + + + + + diff --git a/UIKitCatalog/Base.lproj/Localizable.strings b/UIKitCatalog/Base.lproj/Localizable.strings index a1732cc..162abdc 100755 --- a/UIKitCatalog/Base.lproj/Localizable.strings +++ b/UIKitCatalog/Base.lproj/Localizable.strings @@ -77,4 +77,5 @@ Strings used across the application via the NSLocalizedString API. "DefaultPageControlTitle" = "Page Control"; "CustomPageControlTitle" = "Custom Page Control"; +"SwitchTitle" = "Title"; diff --git a/UIKitCatalog/Base.lproj/StackViewController.storyboard b/UIKitCatalog/Base.lproj/StackViewController.storyboard index b42b729..a3b3d88 100755 --- a/UIKitCatalog/Base.lproj/StackViewController.storyboard +++ b/UIKitCatalog/Base.lproj/StackViewController.storyboard @@ -1,9 +1,10 @@ - + - + + @@ -28,20 +29,20 @@ - + - -