I have a question about the UICollection view list's separatorLayoutGuide. I saw this article and understood I need to override the function updateConstraints() in order to update the separator layout guide.
like this...
override func updateConstraints() {
super.updateConstraints()
separatorLayoutGuide.leadingAnchor.constraint(equalTo: otherView.leadingAnchor, constant: 0.0).isActive = true
}
I can see the tiny space between the cell's leading anchor and seprateguide's leading anchor like the image below and I want to fix it. (like the left side of the cell)
The problem is, however, I created a custom collection view list cell using this article and cannot change the separatorLayoutGuide leading to the custom view's leading.
I added the customListCell.separatorLayoutGuide.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true in order to position the leading of separatorLayoutGuide to the customView's leading, and I get the
"UILayoutGuide:0x2822d8b60'UICollectionViewListCellSeparatorLayoutGuide'.leading"> and <NSLayoutXAxisAnchor:0x280e9cac0 "ContentView:0x15960db90.leading"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.'
error.
After I've done the research, I figured I didn't addSubview for the separatorLayoutGuide, but even if I add a subview to the custom view, the app crashes. Is there a way to change the separator guide's leading anchor when using the custom UIView?
class CustomListCell: UICollectionViewListCell {
var item: TestItem?
override func updateConfiguration(using state: UICellConfigurationState) {
// Create new configuration object
var newConfiguration = ContentConfiguration().updated(for: state)
newConfiguration.name = item.name
newConfiguration.state = item.state
// Set content configuration
contentConfiguration = newConfiguration
}
}
struct ContentConfiguration: UIContentConfiguration, Hashable {
var name: String?
var state: String?
func makeContentView() -> UIView & UIContentView {
return ContentView(configuration: self)
}
func updated(for state: UIConfigurationState) -> Self {
guard let state = state as? UICellConfigurationState else {
return self
}
// Updater self based on the current state
let updatedConfiguration = self
if state.isSelected {
print("is selected")
} else {
print("is deselected")
}
return updatedConfiguration
}
}
class ContentView: UIView, UIContentView {
let contentsView = UIView()
let customListCell = CustomListCell()
lazy var titleLabel: UILabel = {
let label = UILabel()
label.text = ""
return label
}()
lazy var statusLabel: UILabel = {
let label = UILabel()
label.text = ""
return label
}()
lazy var symbolImageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
return imageView
}()
init(configuration: ContentConfiguration) {
// Custom initializer implementation here.
super.init(frame: .zero)
setupAllViews()
apply(configuration: configuration)
}
override func updateConstraints() {
super.updateConstraints()
customListCell.separatorLayoutGuide.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private var currentConfiguration: ContentConfiguration!
var configuration: UIContentConfiguration {
get {
currentConfiguration
}
set {
guard let newConfiguration = newValue as? ContentConfiguration else {
return
}
apply(configuration: newConfiguration)
}
}
func setupAllViews() {
// add subviews and add constraints
}
func apply(configuration: ContentConfiguration) {
}
}
by overriding updateConstraints in a UICollectionViewListCell subclass
In your code you have a customListCell instance variable which is not necessary. Also you should not add separatorLayoutGuide as a subview anywhere.
Try to access the cell's contentView:
override func updateConstraints() {
super.updateConstraints()
if let customView = cell.contentView as? ContentView {
separatorLayoutGuide.leadingAnchor.constraint(equalTo: customView.leadingAnchor, constant: 0.0).isActive = true
}
}
Like this you can access any subview in your ContentView.
Another question is: Is it necessary to create a new constraint every time updateConstraints is called? Are constraints from previous calls still there? According to the documentation of updateConstraints:
Your implementation must be as efficient as possible. Do not deactivate all your constraints, then reactivate the ones you need. Instead, your app must have some way of tracking your constraints, and validating them during each update pass. Only change items that need to be changed. During each update pass, you must ensure that you have the appropriate constraints for the app’s current state.
Therefore I suggest this approach:
class ContentView: UIView, UIContentView {
var separatorConstraint: NSLayoutConstraint?
func updateForCell(_ cell: CustomListCell) {
if separatorConstraint == nil {
separatorConstraint = cell.separatorLayoutGuide.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 30)
}
separatorConstraint?.isActive = true
}
}
class CustomListCell: UICollectionViewListCell {
...
override func updateConstraints() {
super.updateConstraints()
(contentView as? AlbumContentView)?.updateForCell(self)
}
}
Related
Apple's Implementing Modern Collection Views has an example of implementing custom UICollectionViewCell in Modern Collection Views/Cell Configurations. It demonstrates how to add custom views to UICollectionViewCell.
What I want is it's a UITextField cell. So I added a UITextField and the code was:
class CustomConfigurationCell: UICollectionViewListCell {
// Trying to gain access to UITextField
// But contentView is not a CustomContentView
var textField: UITextField? {
guard let contentView = contentView as? CustomContentView else {
return nil
}
return contentView.textField
}
override func updateConfiguration(using state: UICellConfigurationState) {
var content = CustomContentConfiguration().updated(for: state)
content.name = name
contentConfiguration = content
}
}
struct CustomContentConfiguration: UIContentConfiguration, Hashable {
func makeContentView() -> UIView & UIContentView {
return CustomContentView(configuration: self)
}
}
class CustomContentView: UIView, UIContentView {
public let textField = UITextField();
}
In my UIViewController:
let textFieldCellRegistration = UICollectionView.CellRegistration<CustomConfigurationCell, Key> { (cell, indexPath, item) in
cell.textField?.delegate = self
}
The text field showed up as expected. But unfortunately, cell.textField was nil. I couldn't retrieve user input without UITextViewDelegate.
So how can I implement a text field cell with content configuration?
You just need a custom content configuration and view. Note: you'll might have to implement your own indentation and margins to match UIListContentConfiguration.
import UIKit
struct TextFieldContentConfiguration: UIContentConfiguration {
var text: String? = nil
var textChanged: ((String?) -> Void)?
func makeContentView() -> UIView & UIContentView {
return TextFieldContentView(configuration: self)
}
func updated(for state: UIConfigurationState) -> TextFieldContentConfiguration {
return self
}
}
class TextFieldContentView: UIView, UIContentView, UITextFieldDelegate {
public var configuration: UIContentConfiguration {
get {
return appliedConfiguration
}
set {
if let config = newValue as? TextFieldContentConfiguration {
apply(configuration: config)
}
}
}
private var appliedConfiguration: TextFieldContentConfiguration = TextFieldContentConfiguration()
private func apply(configuration: TextFieldContentConfiguration) {
textField.text = configuration.text
self.appliedConfiguration = configuration
}
required init(configuration: TextFieldContentConfiguration) {
textField = UITextField(frame: .zero)
textField.translatesAutoresizingMaskIntoConstraints = false
super.init(frame: .zero)
addViews()
apply(configuration: configuration)
textFieldToken = NotificationCenter.default.addObserver(forName: UITextField.textDidChangeNotification, object: textField, queue: .main, using: { [weak self] notification in
guard let textField = notification.object as? UITextField else {
return
}
self?.appliedConfiguration.textChanged?(textField.text)
})
}
#available(*, unavailable)
required init?(coder: NSCoder) {
fatalError()
}
private func addViews() {
addSubview(textField)
let guide = layoutMarginsGuide
NSLayoutConstraint.activate([
textField.topAnchor.constraint(equalTo: guide.topAnchor),
textField.bottomAnchor.constraint(equalTo: guide.bottomAnchor),
textField.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
textField.trailingAnchor.constraint(equalTo: guide.trailingAnchor),
])
}
private let textField: UITextField
private var textFieldToken: Any?
}
Then you use the custom configuration with a UICollectionViewListCell, and pass a block that will get the value back.
let textCellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String?> {
[weak self] cell, indexPath, model in
var config = TextFieldContentConfiguration()
config.text = self?.timer.displayName
config.textChanged = { newText in
self?.timer.displayName = newText ?? ""
}
cell.contentConfiguration = config
}
Background:
iOS14 has introduced a new way to register and configure collectionViewCell and In Lists In CollectionView WWDC video apple developer says that self sizing is default to UICollectionViewListCell and we don't have to explicitly specify the height for cells. This works great if I use system list cell in various configurations but self sizing fails when I use it with custom subclass of UICollectionViewListCell
What have I tried?
iOS 14 has introduced a new way to configure the cells, where we don't access the cells components directly to set the various UI properties rater we use content configuration and background configuration to update/configure cells. This becomes little tricky when we use custom cells.
CustomSkillListCollectionViewCell
class CustomSkillListCollectionViewCell: UICollectionViewListCell {
var skillLavel: String? {
didSet {
setNeedsUpdateConfiguration()
}
}
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func updateConfiguration(using state: UICellConfigurationState) {
backgroundConfiguration = SkillListViewBackgroundConfiguration.getBackgroundConfiguration(for: state)
var content = SkillListViewContentConfiguration().updated(for: state)
content.label = skillLavel
contentConfiguration = content
}
}
SkillListViewBackgroundConfiguration
struct SkillListViewBackgroundConfiguration {
#available(iOS 14.0, *)
static func getBackgroundConfiguration(for state: UICellConfigurationState) -> UIBackgroundConfiguration {
var background = UIBackgroundConfiguration.clear()
if state.isHighlighted || state.isSelected {
background.backgroundColor = UIColor.green.withAlphaComponent(0.4)
}
else if state.isExpanded {
background.backgroundColor = UIColor.red.withAlphaComponent(0.5)
}
else {
background.backgroundColor = UIColor.red.withAlphaComponent(0.9)
}
return background
}
}
SkillListViewContentConfiguration
struct SkillListViewContentConfiguration: UIContentConfiguration {
var label: String? = nil
#available(iOS 14.0, *)
func makeContentView() -> UIView & UIContentView {
return SkillListView(contentConfiguration: self)
}
#available(iOS 14.0, *)
func updated(for state: UIConfigurationState) -> Self {
guard let state = state as? UICellConfigurationState else {
return self
}
let updatedConfig = self
return updatedConfig
}
}
Finally subview SkillListView
class SkillListView: UIView, UIContentView {
var configuration: UIContentConfiguration {
get {
return self.appliedConfiguration
}
set {
guard let newConfig = newValue as? SkillListViewContentConfiguration else { return }
self.appliedConfiguration = newConfig
apply()
}
}
private var appliedConfiguration: SkillListViewContentConfiguration!
var skillNameLabel: UILabel!
#available(iOS 14.0, *)
init(contentConfiguration: UIContentConfiguration) {
super.init(frame: .zero)
self.setUpUI()
self.configuration = contentConfiguration
self.apply()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func apply() {
self.skillNameLabel.text = self.appliedConfiguration.label
}
private func setUpUI() {
self.skillNameLabel = UILabel(frame: .zero)
skillNameLabel.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)
skillNameLabel.setContentHuggingPriority(.defaultHigh, for: .vertical)
self.skillNameLabel.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(skillNameLabel)
NSLayoutConstraint.activate([
self.skillNameLabel.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor, constant: 20),
self.skillNameLabel.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor, constant: 20),
self.skillNameLabel.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor, constant: 20)
])
}
}
And I configure it using
let skillsCellConfigurator = UICollectionView.CellRegistration<CustomSkillListCollectionViewCell, Employee> { (cell, indexPath, employee) in
cell.skillLavel = employee.individualSkil
cell.accessories = [.disclosureIndicator()]
}
Issue:
Everything else works great except height
First, you need at least 1 more constraint to guarantee satisfaction as top, bottom, and leading needs a trailing or centerX to go with them. But more so, it is probably constraining to the margins rather than the superview. Cells should automatically respect margins like safe area as long as the UICollectionView itself respects them which I think is default behavior. The layoutmarginguide for cells is significantly pushed down on the top, which can be seen from a dummy example in interfacebuilder if you check.
I want to start addArrangedSubview from bottom alignment as like as attached 2nd screenshot(3rd is my actual working screenshot). But every time it arranged from top to bottom. But I need it from bottom to top arrange. I want to create this design using UIStackView inside UIScrollView. I'm trying it with UIScrollView because of landscapes orientation support. And UIStackView for better efficiency with native view.
https://github.com/amitcse6/BottomAlignStackView
import UIKit
import SnapKit
class ViewController: UIViewController {
private var storeBack: UIView?
private var myImageView: UIImageView?
private var myScrollView: UIScrollView?
private var myStackView: UIStackView?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor=UIColor.white
self.loadStoreBack()
self.loadBackgroundImage()
self.loadScrollView()
self.loadStackView()
self.loadUI()
}
func loadStoreBack() {
self.storeBack=UIView()
self.view.addSubview(self.storeBack!)
self.storeBack?.backgroundColor=UIColor.white
self.storeBack?.snp.remakeConstraints { (make) in
make.top.equalTo(self.view!.snp.top)
make.left.equalTo(self.view.snp.left)
make.right.equalTo(self.view.snp.right)
make.bottom.equalTo(self.view.snp.bottom)
}
}
func loadBackgroundImage() -> Void {
self.myImageView = UIImageView()
self.storeBack?.addSubview(self.myImageView!)
self.myImageView?.contentMode = .scaleAspectFill
self.myImageView?.image=UIImage(named: "welcome-background")
self.myImageView?.snp.remakeConstraints { (make) in
make.top.equalTo(self.storeBack!.snp.top)
make.left.equalTo(self.storeBack!.snp.left)
make.right.equalTo(self.storeBack!.snp.right)
make.bottom.equalTo(self.storeBack!.snp.bottom)
}
}
func loadScrollView() {
self.myScrollView = UIScrollView()
self.storeBack?.addSubview(self.myScrollView!)
self.myScrollView?.backgroundColor=UIColor.clear
self.myScrollView?.showsHorizontalScrollIndicator = false
self.myScrollView?.showsVerticalScrollIndicator = false
self.myScrollView?.bounces=false
self.myScrollView?.isScrollEnabled=true
self.myScrollView?.snp.remakeConstraints { (make) in
make.top.equalTo(self.storeBack!.snp.top)
make.left.equalTo(self.storeBack!.snp.left)
make.right.equalTo(self.storeBack!.snp.right)
make.bottom.equalTo(self.storeBack!.snp.bottom)
make.width.equalTo(self.storeBack!)
make.height.equalTo(self.storeBack!)
}
}
func loadStackView() {
self.myStackView = UIStackView()
self.myScrollView?.addSubview(self.myStackView!)
self.myStackView?.backgroundColor=UIColor.clear
self.myStackView?.axis = .vertical
self.myStackView?.spacing = 0
//self.myStackView?.alignment = .bottom
self.myStackView?.snp.remakeConstraints { (make) in
make.top.equalTo(self.myScrollView!.snp.top)
make.left.equalTo(self.myScrollView!.snp.left)
make.right.equalTo(self.myScrollView!.snp.right)
make.bottom.equalTo(self.myScrollView!.snp.bottom)
make.width.equalTo(self.myScrollView!)
make.height.equalTo(self.myScrollView!).priority(250)
}
}
func loadUI() {
for n in 0..<5 {
if n%2 == 0 {
loadBuddyLogoImageView1()
}else{
loadBuddyLogoImageView2()
}
}
}
func loadBuddyLogoImageView1() {
let subBackView=UIView()
self.myStackView?.addArrangedSubview(subBackView)
subBackView.backgroundColor=UIColor.clear
let backgroundView=UIView()
subBackView.addSubview(backgroundView)
backgroundView.backgroundColor=UIColor.red
backgroundView.snp.remakeConstraints { (make) in
make.top.equalTo(subBackView.snp.top)
make.left.equalTo(subBackView.snp.left)
make.right.equalTo(subBackView.snp.right)
make.bottom.equalTo(subBackView.snp.bottom)
make.height.equalTo(100)
}
}
func loadBuddyLogoImageView2() {
let subBackView=UIView()
self.myStackView?.addArrangedSubview(subBackView)
subBackView.backgroundColor=UIColor.clear
let backgroundView=UIView()
subBackView.addSubview(backgroundView)
backgroundView.backgroundColor=UIColor.green
backgroundView.snp.remakeConstraints { (make) in
make.top.equalTo(subBackView.snp.top)
make.left.equalTo(subBackView.snp.left)
make.right.equalTo(subBackView.snp.right)
make.bottom.equalTo(subBackView.snp.bottom)
make.height.equalTo(100)
}
}
}
I wanted to add a simple counter of the number of objects in the table in the table header, next to its textLabel. So I created this class:
import UIKit
class CounterHeaderView: UITableViewHeaderFooterView {
static let reuseIdentifier: String = String(describing: self)
var counterLabel: UILabel
override init(reuseIdentifier: String?) {
counterLabel = UILabel()
super.init(reuseIdentifier: reuseIdentifier)
contentView.addSubview(counterLabel)
counterLabel.translatesAutoresizingMaskIntoConstraints = false
counterLabel.backgroundColor = .red
if let textLabel = self.textLabel{
counterLabel.leadingAnchor.constraint(equalTo: textLabel.trailingAnchor, constant: 6.0).isActive = true
counterLabel.topAnchor.constraint(equalTo: textLabel.topAnchor).isActive = true
counterLabel.heightAnchor.constraint(equalToConstant: 24.0).isActive = true
}
}
required init?(coder aDecoder: NSCoder) {
counterLabel = UILabel()
super.init(coder: aDecoder)
}
}
But running this results in the following error:
'Unable to activate constraint with anchors
<NSLayoutXAxisAnchor:0x60000388ae00 "UILabel:0x7fb8314710a0.leading">
and <NSLayoutXAxisAnchor:0x60000388ae80 "_UITableViewHeaderFooterViewLabel:0x7fb8314718c0.trailing">
because they have no common ancestor.
Does the constraint or its anchors reference items in different view hierarchies?
That's illegal.'
How can I add a constraint for my counterLabel based on the already existing textLabel? Isn't textLabel already a subview of ContentView?
You're trying to use built-in textLabel, which I'm pretty sure isn't available at the init time. Try to execute your layouting code inside layoutSubviews method, right after super call. The method could be evaluated a couple of times, so you should check if you've already layouted your view (e.g. couterLabel.superview != nil)
here's how it should looks like:
final class CounterHeaderView: UITableViewHeaderFooterView {
static let reuseIdentifier: String = String(describing: self)
let counterLabel = UILabel()
override func layoutSubviews() {
super.layoutSubviews()
if counterLabel.superview == nil {
layout()
}
}
func layout() {
contentView.addSubview(counterLabel)
counterLabel.translatesAutoresizingMaskIntoConstraints = false
counterLabel.backgroundColor = .red
if let textLabel = self.textLabel {
counterLabel.leadingAnchor.constraint(equalTo: textLabel.trailingAnchor, constant: 6.0).isActive = true
counterLabel.topAnchor.constraint(equalTo: textLabel.topAnchor).isActive = true
counterLabel.heightAnchor.constraint(equalToConstant: 24.0).isActive = true
}
}
}
I have a collectionView cell that should either display an image or an icon that is generated as a custom UIView (lets say IconView).
Currently, I implemented this by adding an UIImageView and an IconView as subviews to a container view.
When an image is provided, the image property of UIImageView is simply updated. When a new IconView is provided it is currently always added as a subview to the container view. Therefore, before adding, it is first checked whether an IconView has already been added, and if so it is removed.
Although this implementation works, it is not very elegant and seems not efficient since it results in scrolling issues when the number of rows increase.
Would there be a better (more efficient) way to implement this for a single CollectionViewCell?
class CustomCell: UICollectionViewCell {
internal var image: UIImage? {
didSet {
self.imageView.image = image!
}
}
internal var iconView: IconView? {
didSet {
if !(self.iconContainerView.subviews.flatMap{ $0 as? IconView}.isEmpty) {
self.iconView!.removeFromSuperview()
}
self.iconView!.translatesAutoresizingMaskIntoConstraints = false
self.iconContainerView.addSubview(self.iconView!)
self.image = nil
}
}
fileprivate var imageView: UIImageView!
fileprivate var iconContainerView: UIView!
fileprivate var layoutConstraints = [NSLayoutConstraint]()
override init(frame: CGRect) {
super.init(frame: frame)
// ContainerView
self.iconContainerView = UIView()
self.iconContainerView.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(self.iconContainerView)
// ImageView
self.imageView = UIImageView()
self.imageView.translatesAutoresizingMaskIntoConstraints = false
self.iconContainerView.addSubview(self.imageView)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
self.iconContainerView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor).isActive = true
self.iconContainerView.widthAnchor.constraint(equalToConstant: 60).isActive = true
self.iconContainerView.heightAnchor.constraint(equalToConstant: 60).isActive = true
self.iconContainerView.centerYAnchor.constraint(equalTo: self.contentView.centerYAnchor).isActive = true
// Deactivate non-reusable constraints
_ = self.layoutConstraints.map { $0.isActive = false }
self.layoutConstraints = [NSLayoutConstraint]()
if let iconView = self.iconView {
self.imageView.isHidden = true
self.layoutConstraints.append(iconView.centerYAnchor.constraint(equalTo: self.iconContainerView.centerYAnchor))
self.layoutConstraints.append(iconView.centerXAnchor.constraint(equalTo: self.iconContainerView.centerXAnchor))
self.layoutConstraints.append(iconView.heightAnchor.constraint(equalToConstant: 40))
self.layoutConstraints.append(iconView.widthAnchor.constraint(equalToConstant: 40))
} else {
self.imageView.isHidden = false
self.iconView?.isHidden = true
self.layoutConstraints.append(self.imageView.leadingAnchor.constraint(equalTo: self.iconContainerView.leadingAnchor))
self.layoutConstraints.append(self.imageView.trailingAnchor.constraint(equalTo: self.iconContainerView.trailingAnchor))
self.layoutConstraints.append(self.imageView.topAnchor.constraint(equalTo: self.iconContainerView.topAnchor))
self.layoutConstraints.append(self.imageView.bottomAnchor.constraint(equalTo: self.iconContainerView.bottomAnchor))
}
_ = self.layoutConstraints.map {$0.isActive = true}
}
}
Don't ad and remove the IconView when setting. Add both in the same spot and change the isHidden, alpha, or opacity or bringSubviewToFront. This is much less main thread intensive.