I have been trying to mimic an UITableView layout using UICollectionView. So far I have gotten this:
class TableViewLayout: UICollectionViewFlowLayout {
override init() {
super.init()
minimumInteritemSpacing = 0
minimumLineSpacing = 6
scrollDirection = .vertical
estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
let currentBounds = collectionView?.bounds ?? .zero
return newBounds.width != currentBounds.width
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let attributes = super.layoutAttributesForElements(in: rect) else { return [] }
let sectionInsets: CGFloat = sectionInset.left + sectionInset.right
let contentInsets: CGFloat = (collectionView?.contentInset.left ?? 0) + (collectionView?.contentInset.right ?? 0)
for attribute in attributes where attribute.frame.intersects(rect) {
attribute.size.width = collectionView!.readableContentGuide.layoutFrame.width - sectionInsets - contentInsets
}
return attributes
}
}
Which works pretty great until I rotate the device from landscape to portrait, after that the layout hangs saying that the cell is wider than the actual item size.
Am I missing something trivial here? I don't see any glaring problems standing out. The layout is pretty simple just UILabels with an underdetermine amount of text. They can be seen in here
Portrait
Landscape
Error after portrait from landscape
Related
I am writing a calendar, and each day is a cell, each cell has a Rounded UILabel in contentView, but I don't know why is there the little black border on each cell
Calendar image
In 3d View 3d preview
class CalendarCell: UICollectionViewCell {
static var identifier: String = "DayCell"
let dayLabel: UILabel = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
self.setUpUI()
self.contentView.addSubview(dayLabel)
}
private func setUpUI() {
dayLabel.text = nil
dayLabel.sizeToFit()
dayLabel.backgroundColor = .white
//dayLabel.layer.borderWidth = 0.5
dayLabel.textColor = .black
dayLabel.textAlignment = .center
dayLabel.clipsToBounds = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
dayLabel.frame = self.contentView.frame
dayLabel.layer.cornerRadius = dayLabel.frame.width / 2
}
override func prepareForReuse() {
super.prepareForReuse()
setUpUI()
}
I'm not sure what's causing the problem but I'm pretty sure you can fix it and achieve the same behavior by changing your code to this:
let collectionViewCellWidth: CGFLoat = 150 // or whatever you want. You'd define this in the file with your custom flow layout or wherever your give the cell size to the collectionView.
class CalendarCell: UICollectionViewCell {
static let identifier = "DayCell" // type inference doesn't need the annotations on these two
let dayLabel = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
setUpUI()
}
private func setUpUI() {
contentView.layer.cornerRadius = collectionViewCellWidth / 2
contentView.clipsToBounds = true
contentView.backgroundColor = .white // or orange, whatever
dayLabel.text = nil
dayLabel.backgroundColor = .white
//dayLabel.layer.borderWidth = 0.5
dayLabel.textColor = .black
dayLabel.textAlignment = .center
dayLabel.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(dayLabel)
NSLayoutConstraint.activate([
dayLabel.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
dayLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
])
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//override func layoutSubviews() {
// dayLabel.frame = self.contentView.frame
// dayLabel.layer.cornerRadius = dayLabel.frame.width / 2
//}
// also as your code currently is, you don't do anything in your setup function that needs to be redone when a cell is dequeued for reuse. Unless you were setting some unique information for a cell like its color or text. Just FYI
override func prepareForReuse() {
super.prepareForReuse()
setUpUI()
}
}
I'm currently trying to implement custom divider views in between each cell of my collection view. I found this answer online that adds the custom view in the inter-line spacing (link).
private let separatorDecorationView = "separator"
final class CustomFlowLayout: UICollectionViewFlowLayout {
override init() {
super.init()
register(SeparatorView.self,
forDecorationViewOfKind: separatorDecorationView)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let layoutAttributes = super.layoutAttributesForElements(in: rect) ?? []
let lineWidth = self.minimumLineSpacing
var decorationAttributes: [UICollectionViewLayoutAttributes] = []
// skip first cell
for layoutAttribute in layoutAttributes where layoutAttribute.indexPath.item > 0 {
let separatorAttribute = UICollectionViewLayoutAttributes(forDecorationViewOfKind: separatorDecorationView,
with: layoutAttribute.indexPath)
let cellFrame = layoutAttribute.frame
separatorAttribute.frame = CGRect(x: cellFrame.origin.x,
y: cellFrame.origin.y - lineWidth,
width: cellFrame.size.width,
height: lineWidth)
separatorAttribute.zIndex = Int.max
decorationAttributes.append(separatorAttribute)
}
return layoutAttributes + decorationAttributes
}
}
private final class SeparatorView: UICollectionReusableView {
private let imageView: UIImageView = {
let iv = UIImageView(image: UIImage(named: "cell-divider"))
iv.contentMode = .scaleAspectFit
iv.translatesAutoresizingMaskIntoConstraints = false
return iv
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(imageView)
imageView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
imageView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
imageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
imageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
self.frame = layoutAttributes.frame
}
}
This solution actually works, and I'm able to see the dividers. The problem arises, however, when the user clicks on one of the cells. The behavior I want is for the cell to expand to show more details when the cell is clicked. The way I'm implementing this is by keeping track of which indexPaths are selected, and returning a larger size if they are selected in sizeForItemAt. In didSelectItemAt, I reload the collection view. This approach works when I'm using the normal UICollectionViewFlowLayout, but when I try using my custom flow layout (above), I get the following crash:
no UICollectionViewLayoutAttributes instance for -layoutAttributesForDecorationViewOfKind: separator at path <NSIndexPath: 0xf75c5b66b8a0a8ab> {length = 2, path = 0 - 6}
I tried looking up solutions and found these two stack overflows here and here but none of the answers I tried seemed to work.
I tried:
Invalidating the layout when I reload the collection view.
Implementing a cache that I return from when I override layoutAttributesForItem in my custom layout.
Any help would be greatly appreciated at this point!
It seems that I had to overwrite two methods in my custom layout:
override func layoutAttributesForDecorationView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let layoutAttributes = UICollectionViewLayoutAttributes(forDecorationViewOfKind: elementKind,
with: indexPath)
return layoutAttributes;
}
override func initialLayoutAttributesForAppearingDecorationElement(ofKind elementKind: String, at decorationIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let attributes = layoutAttributesForDecorationView(ofKind: elementKind,
at: decorationIndexPath)
return attributes
}
I also needed to keep the layout invalidation call when I reloaded the data.
collectionView.reloadData()
let context = collectionViewLayout.invalidationContext(forBoundsChange: bounds)
context.contentOffsetAdjustment = CGPoint.zero
collectionView.collectionViewLayout.invalidateLayout(with: context)
layoutSubviews()
Problem:
The custom view's background colour for each cell in my tableView always uses the initial colour set when declaring my statusColour variable, and the colour set dynamically in cellForRowAt IndexPath is always ignored.
This is my UIView subclass:
class SlantedView: UIView {
var path: UIBezierPath!
var backgroundColour: UIColor!
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func slantedView() {
// Drawing code
// Get Height and Width
let layerHeight = CGFloat(90)
let layerWidth = CGFloat(300)
// Create Path
let bezierPath = UIBezierPath()
// Points
let pointA = CGPoint(x: 0, y: 0)
let pointB = CGPoint(x: layerWidth, y: 89)
let pointC = CGPoint(x: layerWidth, y: layerHeight)
let pointD = CGPoint(x: 0, y: layerHeight)
// Draw the path
bezierPath.move(to: pointA)
bezierPath.addLine(to: pointB)
bezierPath.addLine(to: pointC)
bezierPath.addLine(to: pointD)
bezierPath.close()
// Mask to Path
let shapeLayer = CAShapeLayer()
shapeLayer.path = bezierPath.cgPath
layer.mask = shapeLayer
}
override func draw(_ rect: CGRect) {
self.slantedView()
self.backgroundColor = backgroundColour
self.backgroundColor?.setFill()
UIGraphicsGetCurrentContext()!.fill(rect)
}
}
This is my custom cell:
class CustomTableViewCell: UITableViewCell {
var statusColour: UIColor = {
let colour = UIColor.red
return colour
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
let statusContainer = SlantedView()
statusContainer.backgroundColour = self.statusColour
self.addSubview(statusContainer)
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
}
}
This is my cellForRow method:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! CustomTableViewCell
cell.statusColour = sampleData[indexPath.row].statusColour //Contains different colours
return cell
}
The problem is definitely coming from the UIView subclass. According some prior research, it looks like the overridden draw function could be causing the issue.
I followed the advice given in some other Stack Overflow questions by adding these lines:
self.backgroundColor?.setFill()
UIGraphicsGetCurrentContext()!.fill(rect)
What could I be doing wrong?
Thanks in advance.
Add slantedView in awakeFromNib() method instead of init() and also use property observers to change the backgroung color of slantedView as shown below:
class CustomTableViewCell: UITableViewCell {
var statusContainer: SlantedView!
var statusColour: UIColor? {
didSet {
guard let color = statusColour else {
statusContainer.backgroundColor = UIColor.black
return
}
statusContainer.backgroundColor = color
}
}
override func awakeFromNib() {
super.awakeFromNib()
statusContainer = SlantedView(frame: self.bounds)
self.addSubview(statusContainer)
}
}
Lastly, remove last two lines from draw(_ rect: CGRect) method:-
override func draw(_ rect: CGRect) {
self.slantedView()
self.backgroundColor = backgroundColour
}
I know this question might have a lot of answers on SO. But after trying every solution found on the interweb (+ some of my custom inventions ..) I still can't do what I want to achieve.
Here is the story :
I have a UICollectionViewCell with a Subclass of a UITextField embeded in it.
Here is my Subclass :
class CustomTextField: UITextField {
private let padding = UIEdgeInsets(top: 6.0, left: 0.0, bottom: 0.0, right: 2.0)
private lazy var lineView: UIView = {
let lineView = UIView()
lineView.translatesAutoresizingMaskIntoConstraints = false
lineView.isUserInteractionEnabled = false
lineView.frame.size.height = 2
lineView.backgroundColor = UIColor.tiara
return lineView
}()
override func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: padding)
}
override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: padding)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: padding)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func toggleColors() {
if isFirstResponder {
lineView.backgroundColor = .black
} else {
lineView.backgroundColor = UIColor.tiara
}
}
}
private extension CustomTextField {
func commonInit() {
addSubview(lineView)
constraintLineView()
textColor = UIColor.tiara
}
func constraintLineView() {
lineView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
lineView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true
lineView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
lineView.heightAnchor.constraint(equalToConstant: 2.0).isActive = true
}
}
And here is the code I use in my UICollectionViewCell :
#discardableResult
func setFirstResponder() -> Bool {
return customTextField.becomeFirstResponder()
}
func endEditing() {
customTextField.resignFirstResponder()
}
The result of customTextField.becomeFirstResponder is always false.
It's called from my UIViewController :
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
guard indexPath.row != 0 else { return }
dispatchService.stop()
let topIndexPath = IndexPath(item: 0, section: 0)
let topCell: Cell = collectionView.dequeueReusableCell(for: topIndexPath)
topCell.endEditing()
service.data.rearrange(from: indexPath.row, to: 0)
update()
collectionView.performBatchUpdates({
collectionView.moveItem(at: indexPath, to: topIndexPath)
collectionView.scrollToItem(at: topIndexPath, at: .top, animated: true)
}) { (_) in
let secondCell: Cell = collectionView.dequeueReusableCell(for: topIndexPath)
secondCell.setFirstResponder()
self.dispatchService.reset()
}
}
I really don't know where to start, this is the last solution I came with and it stills stays without any keyboard displayed.
I am working on a real device, iPhone X iOS 12.1.
I may not have the quiet right answer but, I think the problem comes from the way you are getting your cell inside collectionView(didSelectItemAt:).
You are using the dequeueReusableCell instead of using cellForItem(at:) for getting your cells. So you are creating a reusable cell and not getting the one you are interested in.
I've subclassed an NSTextField with the following code:
import Cocoa
class CustomSearchField: NSTextField {
override func draw(_ dirtyRect: NSRect) {
self.wantsLayer = true
let textFieldLayer = CALayer()
self.layer = textFieldLayer
self.backgroundColor = NSColor.white
self.layer?.backgroundColor = CGColor.white
self.layer?.borderColor = CGColor.white
self.layer?.borderWidth = 0
super.cell?.draw(withFrame: dirtyRect, in: self)
}
}
class CustomSearchFieldCell: NSTextFieldCell {
override func drawingRect(forBounds rect: NSRect) -> NSRect {
let minimumHeight = self.cellSize(forBounds: rect).height
let newRect = NSRect(x: rect.origin.x + 25, y: (rect.origin.y + (rect.height - minimumHeight) / 2) - 4, width: rect.size.width - 50, height: minimumHeight)
return super.drawingRect(forBounds: newRect)
}
}
This is all working fine and it draws my NSTextField just as I wanted. The only problem is, as soon as I make some other part of the interface the first responder (clicking outside the NSTextField), the text inside the NSTextField (placeholder or filled in text) is fading out. As soon as I click on it again, it fades back in. I've been searching for quiet a while now, but can't really figure out why this is happening. I just want the text to be visible all the time, instead of fading in and out.
It has to do with the CALayer that I'm adding to accomplish my styling.
Whenever I run the same settings from viewDidLoad on the textfield, it works like a charm. For example:
class ViewController: NSViewController {
#IBOutlet weak var searchField: NSTextField!
override func viewDidLoad() {
initCustomSearchField()
}
private func initCustomSearchField() {
searchField.wantsLayer = true
let textFieldLayer = CALayer()
searchField.layer = textFieldLayer
searchField.backgroundColor = NSColor.white
searchField.layer?.backgroundColor = CGColor.white
searchField.layer?.borderColor = CGColor.white
searchField.layer?.borderWidth = 0
searchField.delegate = self
}
}
draw method should really be used to draw the view not setting the properties.And for your problem don't set to self.layer directly use sublayer instead .
My suggestion for your code:
class CustomTextField :NSTextField {
override init(frame frameRect: NSRect) {
super.init(frame: frameRect)
setupView()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupView()
}
func setupView(){
textColor = .green
}
}
class CustomTextFieldCell: NSTextFieldCell {
override init(textCell string: String) {
super.init(textCell: string)
setupView()
}
required init(coder: NSCoder) {
super.init(coder: coder)
setupView()
}
func setupView(){
backgroundColor = .red
}
override func drawingRect(forBounds rect: NSRect) -> NSRect {
let newRect = NSRect(x: (rect.width - rect.width/2)/2, y: 0, width: rect.width/2, height: 20)
return super.drawingRect(forBounds:newRect)
}
override func draw(withFrame cellFrame: NSRect, in controlView: NSView) {
super.draw(withFrame: cellFrame, in: controlView)
controlView.layer?.borderColor = NSColor.white.cgColor
controlView.layer?.borderWidth = 2
}
}