For instance, executing the following code, in which a stepper is injected in a table view cell and the cell is reloaded when the user changes the stepper's value, causes the memory usage to grow pretty quickly (I stopped the simulation at 1GB) when you tap on the stepper.
Also the CPU usage jumps straight at 99%, and the UI freezes.
Note: I'd like to know exactly what I asked, not how to make a table view cell with a stepper in general.
I know that calling reloadData() or reconfigureRows(at:) doesn't cause any of the mentioned issues.
Also please don't reply with questions like "Have you tried to use weak references?".
The code is short: please reply with a working solution if you can.
class ViewController: UIViewController {
let tableView = UITableView()
let stepper = UIStepper()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(tableView)
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
tableView.dataSource = self
stepper.addTarget(self, action: #selector(stepperValueChanged), for: .valueChanged)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
tableView.frame = view.bounds
}
@objc private func stepperValueChanged() {
tableView.reloadRows(at: [IndexPath(row: 0, section: 0)], with: .automatic)
}
}
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.accessoryView = stepper
var configuration = cell.defaultContentConfiguration()
configuration.text = "\(stepper.value)"
cell.contentConfiguration = configuration
return cell
}
}
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
The following is a UIKit app that uses a collection view with list layout and a diffable data source.
It displays one section that has 10 empty cells and then final cell whose content view contains a text view, that is pinned to the content view's layout margins guide.
The text view's scrolling is set to false, so that the line collectionView.selfSizingInvalidation = .enabledIncludingConstraints will succeed at making the text view's cell resize automatically and animatedly as the text changes.
import UIKit
class ViewController: UIViewController {
var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<String, Int>!
let textView: UITextView = {
let tv = UITextView()
tv.text = "Text"
tv.isScrollEnabled = false
return tv
}()
override func viewDidLoad() {
super.viewDidLoad()
configureHierarchy()
configureDataSource()
if #available(iOS 16.0, *) {
collectionView.selfSizingInvalidation = .enabledIncludingConstraints
}
}
func configureHierarchy() {
collectionView = .init(frame: .zero, collectionViewLayout: createLayout())
view.addSubview(collectionView)
collectionView.frame = view.bounds
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
func createLayout() -> UICollectionViewLayout {
let configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
return UICollectionViewCompositionalLayout.list(using: configuration)
}
func configureDataSource() {
let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Int> { _, _, _ in }
let textViewCellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Int> { [weak self] cell, _, _ in
guard let self else { return }
cell.contentView.addSubview(textView)
textView.pin(to: cell.contentView.layoutMarginsGuide)
}
dataSource = .init(collectionView: collectionView) { collectionView, indexPath, itemIdentifier in
if indexPath.row == 10 {
collectionView.dequeueConfiguredReusableCell(using: textViewCellRegistration, for: indexPath, item: itemIdentifier)
} else {
collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: itemIdentifier)
}
}
var snapshot = NSDiffableDataSourceSnapshot<String, Int>()
snapshot.appendSections(["section"])
snapshot.appendItems(Array(0...10))
dataSource.apply(snapshot)
}
}
extension UIView {
func pin(
to object: CanBePinnedTo,
top: CGFloat = 0,
bottom: CGFloat = 0,
leading: CGFloat = 0,
trailing: CGFloat = 0
) {
self.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.topAnchor.constraint(equalTo: object.topAnchor, constant: top),
self.bottomAnchor.constraint(equalTo: object.bottomAnchor, constant: bottom),
self.leadingAnchor.constraint(equalTo: object.leadingAnchor, constant: leading),
self.trailingAnchor.constraint(equalTo: object.trailingAnchor, constant: trailing),
])
}
}
@MainActor
protocol CanBePinnedTo {
var topAnchor: NSLayoutYAxisAnchor { get }
var bottomAnchor: NSLayoutYAxisAnchor { get }
var leadingAnchor: NSLayoutXAxisAnchor { get }
var trailingAnchor: NSLayoutXAxisAnchor { get }
}
extension UIView: CanBePinnedTo { }
extension UILayoutGuide: CanBePinnedTo { }
How do I make the UI move to accomodate the keyboard once you tap on the text view and also when the text view changes size, by activating the view.keyboardLayoutGuide.topAnchor constraint, as shown in the WWDC21 video "Your guide to keyboard layout"?
My code does not resize the text view on iOS 15, only on iOS 16+, so clearly the solution may allow the UI to adjust to text view changes on iOS 16+ only.
Recommended, modern, approach:
Not recommended, old, approach:
I've tried to say view.keyboardLayoutGuide.topAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true in the text view cell registration, as well as view.keyboardLayoutGuide.topAnchor.constraint(equalTo: collectionView.bottomAnchor).isActive = true in viewDidLoad(), but both of these approaches fail (Xcode 15.3 iPhone 15 Pro simulator with iOS 17.4, physical iPhone SE on iOS 15.8).
The following is a UIKit app with a collection view with one section, whose supplementary view sports a search bar.
When you type, it often resigns first responder.
import UIKit
class ViewController: UIViewController {
let words = ["foo", "bar"]
var filteredWords = ["foo", "bar"] {
didSet {
dataSource.apply(self.snapshot)
}
}
var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<String, String>!
var snapshot: NSDiffableDataSourceSnapshot<String, String> {
var snapshot = NSDiffableDataSourceSnapshot<String, String>()
snapshot.appendSections(["main"])
snapshot.appendItems(filteredWords)
return snapshot
}
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.rightBarButtonItem = .init(title: "Apply", style: .plain, target: self, action: #selector(apply))
configureHierarchy()
configureDataSource()
}
@objc func apply() {
dataSource.apply(self.snapshot)
}
func configureHierarchy() {
collectionView = .init(frame: .zero, collectionViewLayout: createLayout())
view.addSubview(collectionView)
collectionView.frame = view.bounds
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
func createLayout() -> UICollectionViewLayout {
UICollectionViewCompositionalLayout { section, layoutEnvironment in
var config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
config.headerMode = .supplementary
return NSCollectionLayoutSection.list(using: config, layoutEnvironment: layoutEnvironment)
}
}
func configureDataSource() {
let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { _, _, _ in }
dataSource = .init(collectionView: collectionView) { collectionView, indexPath, itemIdentifier in
collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: itemIdentifier)
}
let searchbarHeaderRegistration = UICollectionView.SupplementaryRegistration<SearchBarCell>(elementKind: UICollectionView.elementKindSectionHeader) { cell, elementKind, indexPath in
cell.searchBar.delegate = self
}
dataSource.supplementaryViewProvider = { collectionView, kind, indexPath in
collectionView.dequeueConfiguredReusableSupplementary(using: searchbarHeaderRegistration, for: indexPath)
}
dataSource.apply(self.snapshot, animatingDifferences: false)
}
}
extension ViewController: UISearchBarDelegate {
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
DispatchQueue.main.async { [weak self] in
guard let self else { return }
filteredWords = words.filter { $0.hasPrefix(searchText) }
}
}
func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
DispatchQueue.main.async { [weak self] in
guard let self else { return }
filteredWords = words
}
}
}
class SearchBarCell: UICollectionViewListCell {
let searchBar = UISearchBar()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(searchBar)
searchBar.pinToSuperview()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
extension UIView {
func pin(
to object: CanBePinnedTo,
top: CGFloat = 0,
bottom: CGFloat = 0,
leading: CGFloat = 0,
trailing: CGFloat = 0
) {
self.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.topAnchor.constraint(equalTo: object.topAnchor, constant: top),
self.bottomAnchor.constraint(equalTo: object.bottomAnchor, constant: bottom),
self.leadingAnchor.constraint(equalTo: object.leadingAnchor, constant: leading),
self.trailingAnchor.constraint(equalTo: object.trailingAnchor, constant: trailing),
])
}
func pinToSuperview(
top: CGFloat = 0,
bottom: CGFloat = 0,
leading: CGFloat = 0,
trailing: CGFloat = 0,
file: StaticString = #file,
line: UInt = #line
) {
guard let superview = self.superview else {
print(">> \(#function) failed in file: \(String.localFilePath(from: file)), at line: \(line): could not find \(Self.self).superView.")
return
}
self.pin(to: superview, top: top, bottom: bottom, leading: leading, trailing: trailing)
}
func pinToSuperview(constant c: CGFloat = 0, file: StaticString = #file, line: UInt = #line) {
self.pinToSuperview(top: c, bottom: -c, leading: c, trailing: -c, file: file, line: line)
}
}
@MainActor
protocol CanBePinnedTo {
var topAnchor: NSLayoutYAxisAnchor { get }
var bottomAnchor: NSLayoutYAxisAnchor { get }
var leadingAnchor: NSLayoutXAxisAnchor { get }
var trailingAnchor: NSLayoutXAxisAnchor { get }
}
extension UIView: CanBePinnedTo { }
extension UILayoutGuide: CanBePinnedTo { }
extension String {
static func localFilePath(from fullFilePath: StaticString = #file) -> Self {
URL(fileURLWithPath: "\(fullFilePath)").lastPathComponent
}
}
By the way if you remove the dispatch blocks, the app simply crashes complaining that you're trying to apply datasource snapshots from both the main queue and other queues.
Xcode 15.3 iOS 17.4 simulator, MacBook Air M1 8GB macOS Sonoma 14.4.1
Please run the following UIKit app.
It uses a collection view with compositional layout (list layout) and a diffable data source.
It has one section with one row.
The cell has an image view as a leading accessory.
Unfortunately, as soon as I set an image for the image view, the accessory is no longer centered:
import UIKit
class ViewController: UIViewController {
var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<String, String>!
override func viewDidLoad() {
super.viewDidLoad()
configureHierarchy()
configureDataSource()
}
func configureHierarchy() {
collectionView = .init(frame: .zero, collectionViewLayout: createLayout())
view.addSubview(collectionView)
collectionView.frame = view.bounds
}
func createLayout() -> UICollectionViewLayout {
UICollectionViewCompositionalLayout { section, layoutEnvironment in
let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
return NSCollectionLayoutSection.list(using: config, layoutEnvironment: layoutEnvironment)
}
}
func configureDataSource() {
let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { cell, indexPath, itemIdentifier in
let iv = UIImageView()
iv.backgroundColor = .systemRed
// iv.image = .init(systemName: "camera")
iv.contentMode = .scaleAspectFit
iv.frame.size = .init(
width: 40,
height: 40
)
cell.accessories = [.customView(configuration: .init(
customView: iv,
placement: .leading(),
reservedLayoutWidth: .actual,
maintainsFixedSize: true
))]
}
dataSource = .init(collectionView: collectionView) { collectionView, indexPath, itemIdentifier in
collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: itemIdentifier)
}
var snapshot = NSDiffableDataSourceSnapshot<String, String>()
snapshot.appendSections(["main"])
snapshot.appendItems(["demo"])
dataSource.apply(snapshot, animatingDifferences: false)
}
}
This seems like a bug but then if I set the image view's size to 100x100, even without giving it an image, the cell doesn't resize, which makes me think I'm making a mistake.
Apple's documentation pretty much only says this about ObservableObject: "A type of object with a publisher that emits before the object has changed. By default an ObservableObject synthesizes an objectWillChange publisher that emits the changed value before any of its @Published properties changes.".
And this sample seems to behave the same way, with or without conformance to the protocol by Contact:
import UIKit
import Combine
class ViewController: UIViewController {
let john = Contact(name: "John Appleseed", age: 24)
private var cancellables: Set<AnyCancellable> = []
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
john.$age.sink { age in
print("View controller's john's age is now \(age)")
}
.store(in: &cancellables)
print(john.haveBirthday())
}
}
class Contact {
@Published var name: String
@Published var age: Int
init(name: String, age: Int) {
self.name = name
self.age = age
}
func haveBirthday() -> Int {
age += 1
return age
}
}
Can I therefore omit conformance to ObservableObject every time I don't need the objectWillChange publisher?
The following is a UIKit app that displays a collection view with list layout and diffable data source (one section, one row).
class ViewController: UIViewController {
var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<String, String>!
override func viewDidLoad() {
super.viewDidLoad()
configureHierarchy()
configureDataSource()
}
func configureHierarchy() {
collectionView = .init(frame: .zero, collectionViewLayout: createLayout())
view.addSubview(collectionView)
collectionView.frame = view.bounds
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
func createLayout() -> UICollectionViewLayout {
UICollectionViewCompositionalLayout { section, layoutEnvironment in
let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
return NSCollectionLayoutSection.list(using: config, layoutEnvironment: layoutEnvironment)
}
}
func configureDataSource() {
let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { cell, indexPath, itemIdentifier in
var backgroundConfiguration = UIBackgroundConfiguration.listGroupedCell()
backgroundConfiguration.backgroundColor = .systemBlue
cell.backgroundConfiguration = backgroundConfiguration
}
dataSource = .init(collectionView: collectionView) { collectionView, indexPath, itemIdentifier in
collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: itemIdentifier)
}
var snapshot = NSDiffableDataSourceSnapshot<String, String>()
snapshot.appendSections(["main"])
snapshot.appendItems(["demo"])
dataSource.apply(snapshot, animatingDifferences: false)
}
}
If you tap on the row, it seems like selection doesn't happen: giving the cell a blue background broke its default background color transformer.
Here's what I've tried and didn't work:
Setting the collection view's delegate and specifying that you can select any row
Setting the color transformer to .grayscale
Setting the backgroundConfiguration to UIBackgroundConfiguration.listGroupedCell().updated(for: cell.configurationState)
Combinations of the approaches above
Setting the color transformer to UIBackgroundConfiguration.listGroupedCell().backgroundColorTransformer and cell.backgroundConfiguration?.backgroundColorTransformer (they're both nil)
Setting the cell's backgroundColor directly
I also considered using a custom color transformer:
var backgroundConfiguration = UIBackgroundConfiguration.listGroupedCell()
backgroundConfiguration.backgroundColorTransformer = UIConfigurationColorTransformer { _ in
if cell.configurationState.isSelected || cell.configurationState.isHighlighted {
.systemBlue.withAlphaComponent(0.7)
} else {
.systemBlue
}
}
cell.backgroundConfiguration = backgroundConfiguration
However, if you push a view controller when you select the row, the row gets deselected, which is unfortunate, giving that I like to deselect rows in viewWillAppear(_:) to keep users more oriented.
There might be ways to circumvent this, but my custom color transformer might still differ from the default one in some other ways.
So how do I assign the default one to my cell?
Topic:
UI Frameworks
SubTopic:
UIKit
Code that reproduces the issue
import SwiftUI
@main
struct KeyboardLayoutProblemApp: App {
var body: some Scene {
WindowGroup {
iOSTabView()
}
}
}
struct iOSTabView: View {
var body: some View {
TabView {
GameView()
.frame(maxWidth: UIScreen.main.bounds.width, maxHeight: UIScreen.main.bounds.height)
.tabItem {
Label("Play", systemImage: "gamecontroller.fill")
}
}
}
}
struct GameView: View {
var body: some View {
VStack {
Text("Play")
Spacer()
KeyboardView()
}
.padding()
}
}
struct KeyboardView: View {
let firstRowLetters = "qwertyuiop".map { $0 }
let secondRowLetters = "asdfghjkl".map { $0 }
let thirdRowLetters = "zxcvbnm".map { $0 }
var body: some View {
VStack {
HStack {
ForEach(firstRowLetters, id: \.self) {
LetterKeyView(character: $0)
}
}
HStack {
ForEach(secondRowLetters, id: \.self) {
LetterKeyView(character: $0)
}
}
HStack {
ForEach(thirdRowLetters, id: \.self) {
LetterKeyView(character: $0)
}
}
}
.padding()
}
}
struct LetterKeyView: View {
let character: Character
var width: CGFloat { height*0.8 }
@ScaledMetric(relativeTo: .title3) private var height = 35
var body: some View {
Button {
print("\(character) pressed")
} label: {
Text(String(character).capitalized)
.font(.title3)
.frame(width: self.width, height: self.height)
.background {
RoundedRectangle(cornerRadius: min(width, height)/4, style: .continuous)
.stroke(.gray)
}
}
.buttonStyle(PlainButtonStyle())
}
}
Problem
GameView doesn't fit its parent view:
Question
How do I make GameView be at most as big as its parent view?
What I've tried and didn't work
GameView()
.frame(maxWidth: .infinity, maxHeight: .infinity)
GeometryReader { geometry in
GameView()
.frame(maxWidth: geometry.size.width, maxHeight: geometry.size.height)
}
GameView()
.clipped()
GameView()
.layoutPriority(1)
GameView()
.scaledToFit()
GameView()
.minimumScaleFactor(0.01)
GameView()
.scaledToFill()
.minimumScaleFactor(0.5)
I'm not using UIScreen.main.bounds.width because I'm trying to build a multi-platform app.
Topic:
UI Frameworks
SubTopic:
SwiftUI