I made a custom flow layout, which works perfectly in portrait but as soon as I go to landscape, the left cell disappears on scroll.
Paging is enabled, the cell reappears if I scroll back 1 px.
My Layout Attributes override
I have tried to use transforms instead of altering frames, results in the same thing.
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var att = super.layoutAttributesForElements(in: rect)!
if !(delegate?.reelPlayerFlowIsPreviewMode() ?? true) {
return att
}
let region = CGRect(x: (self.collectionView?.contentOffset.x)!,
y: (self.collectionView?.contentOffset.y)!,
width: (self.collectionView?.bounds.size.width)!,
height: (self.collectionView?.bounds.size.height)!)
let center = CGPoint(x: region.midX, y: region.midY)
for theCell in att {
print("\(theCell.indexPath.item)\n\(theCell)\n")
let cell = theCell.copy() as! UICollectionViewLayoutAttributes
var f = cell.frame
let cellCenter = CGPoint(x: f.midX, y: f.midY)
let realDistance = min(center.x - cellCenter.x, region.width)
let distance = abs(realDistance)
let d = (region.width - distance) / region.width
let p = (max(d, ReelPlayerFlowLayout.minPercent) * ReelPlayerFlowLayout.maxPercent)
f.origin.x += (realDistance * ((1 - ReelPlayerFlowLayout.maxPercent) + (ReelPlayerFlowLayout.maxPercent - ReelPlayerFlowLayout.minPercent)))
cell.frame = f
cell.size = CGSize (width: f.width * p, height: f.height * p)
let index = att.index(of: theCell)!
att[index] = cell
}
return att
}
Related
Right now I have a collectionView for which each cell contains a horizontal stackView. The stackView gets populated with a series of UIViews (rectangles), one for each day of a month - each cell corresponds to a month. I fill the stack views like so:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == self.collectionView {
...
return cell
} else if collectionView == self.timeline {
let index = indexPath.row
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "MMM"
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: timelineMonthCellReuseIdentifier, for: indexPath) as! SNTimelineMonthViewCell
let firstPost = posts.first?.timeStamp
let month = Calendar.current.date(byAdding: .month, value: index, to: firstPost!)
print(dateFormatter.string(from: month!),dateFormatter.string(from: firstPost!),"month diff")
for post in posts {
print(post.timeStamp, "month diff")
}
cell.monthLabel.text = dateFormatter.string(from: month!)
cell.monthLabel.textAlignment = .center
if let start = month?.startOfMonth(), let end = month?.endOfMonth(), let stackView = cell.dayTicks {
var date = start
while date <= end {
let line = UIView()
if posts.contains(where: { Calendar.current.isDate(date, inSameDayAs: $0.timeStamp) }) {
line.backgroundColor = UIColor(red:0.15, green:0.67, blue:0.93, alpha:1.0)
let tapGuesture = UITapGestureRecognizer(target: self, action: #selector (self.tapBar (_:)))
line.isUserInteractionEnabled = true
line.addGestureRecognizer(tapGuesture)
self.dayTicks[date] = line
} else {
line.backgroundColor = UIColor.clear
}
stackView.addArrangedSubview(line)
date = Calendar.current.date(byAdding: .day, value: 1, to: date)!
}
}
return cell
} else {
preconditionFailure("Unknown collection view!")
}
}
Then, when the user stops scrolling a different collection view, I want to add a subview called arrowView ontop of the dayTick (see how self.dayTicks gets populated with the subviews of the stackView above).
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let currentIndex = self.collectionView.contentOffset.x / self.collectionView.frame.size.width
let post = posts[Int(currentIndex)]
for (_,tick) in self.dayTicks {
tick.subviews.forEach({ $0.removeFromSuperview() })
}
let day = Calendar.current.startOfDay(for: post.timeStamp)
let tick = self.dayTicks[day]
let arrow = UIImage(named:"Tracer Pin")
let arrowView = UIImageView(image: arrow)
// arrowView.clipsToBounds = false
print((tick?.frame.origin)!,"tick origin")
// arrowView.frame.origin = (tick?.frame.origin)!
// arrowView.frame.size.width = 100
// arrowView.frame.size.height = 100
tick?.addSubview(arrowView)
}
This kind of works and it looks like this:
The red rectangle is added but it appears to the right of the dayTick, and it appears as a long thin rectangle. In actuality, the Tracer Pin image referenced looks like this:
Thats at least where the red color comes from but as you can see its stretching it weird and clipping everything thats not in a rectangular UIView space.
Now note that I commented out the 4 lines that set the size and origin of the arrowView as well as setting clipToBounds to false. When I uncomment these lines - the arrowView simply doesn't show up at all so I must be doing this wrong. What I want is to show something like this:
How can I put it directly on top like that?
Another perspective might be to do this with CALayer. Here are some clues (cut from another project) to help you discover a solution:
#IBInspectable open var slideIndicatorThickness: CGFloat = 5.0 {
didSet {
if slideIndicator != nil { slideIndicator.removeFromSuperlayer() }
let slideLayer = CALayer()
let theOrigin = CGPoint(x: bounds.origin.x, y: bounds.origin.y)
let theSize = CGSize(width: CGFloat(3.0), height: CGFloat(10.0)
slideLayer.frame = CGRect(origin: theOrigin, size: theSize)
slideLayer.backgroundColor = UIColor.orange.cgColor
slideIndicator = slideLayer
layer.addSublayer(slideIndicator)
}
}
fileprivate var slideIndicator: CALayer!
fileprivate func updateIndicator() {
// ..
// Somehow figure out new frame, based on stack view's frame.
slideIndicator.frame.origin.x = newOrigin
}
You may have to implement this on a subclass of UIStackView, or your own custom view that is a wrapper around UIStackView.
It looks like you have a fixed height on the arrowView. Could it be that the red triangle portion is under another view?
Debug View Hierarchy
Click the debug view hierarchy which is the second from right icon - it looks like 3 rectangles. Check to see if the whole image is there.
I ended up using CALayer - thanks to #ouni's suggestion For some reason the CALayer seemed to draw directly on top of the view whereas a subview didn't. One key was unchecking the "Clip to bounds box on the collectionView cell itself (as opposed to the subview) - so that I could draw the flared base of the arrow outside of the collection view cell:
My code looks like this:
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if scrollView == self.collectionView {
print("is collection view")
print(scrollView,"collection view")
let currentIndex = self.collectionView.contentOffset.x / self.collectionView.frame.size.width
let post = posts[Int(currentIndex)]
for (_,tick) in self.dayTicks {
tick.layer.sublayers = nil
}
let day = Calendar.current.startOfDay(for: post.timeStamp)
let tick = self.dayTicks[day]
let arrowLayer = CAShapeLayer()
let path = UIBezierPath()
let start_x = (tick?.bounds.origin.x)!
let start_y = (tick?.bounds.minY)!
let top_width = (tick?.bounds.width)!
let tick_height = (tick?.bounds.height)!
let tip_height = CGFloat(10)
let tip_flare = CGFloat(10)
path.move(to: CGPoint(x: start_x, y: start_y))
path.addLine(to: CGPoint(x: start_x + top_width,y: start_y))
path.addLine(to: CGPoint(x: start_x + top_width,y: start_y + tick_height))
path.addLine(to: CGPoint(x: start_x + top_width + tip_flare,y: start_y+tick_height+tip_height))
path.addLine(to: CGPoint(x: start_x - tip_flare,y: start_y + tick_height + tip_height))
path.addLine(to: CGPoint(x: start_x,y: start_y+tick_height))
path.close()
arrowLayer.path = path.cgPath
arrowLayer.fillColor = UIColor(red:0.99, green:0.13, blue:0.25, alpha:1.0).cgColor
tick?.layer.addSublayer(arrowLayer)
} else {
print(scrollView, "timeline collection view")
}
}
This draws the arrow on top of the subview beautifully.
I came across this demo and really want to learn how to do this:
So far, I've created a subclass to UICollectionViewFlowLayout that fades out the start and end of the cells. Taken from https://gist.github.com/vinhnx/bb1354b247ebfe3790563173ac72baa9
This is the part that fades out the start and end cells
for attrs in attributes {
if attrs.frame.intersects(rect) {
let distance = visibleRect.midY - attrs.center.y
let normalizedDistance = abs(distance) / (visibleRect.height * fadeFactor)
let fade = 1 - normalizedDistance
attrs.alpha = fade
}
}
How do I make the cells that is at the top stand still and not continue to slide up?
Full code of the function handling the fade:
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let attributesSuper: [UICollectionViewLayoutAttributes] = super.layoutAttributesForElements(in: rect) as [UICollectionViewLayoutAttributes]!
if let attributes = NSArray(array: attributesSuper, copyItems: true) as? [UICollectionViewLayoutAttributes]{
var visibleRect = CGRect()
visibleRect.origin = collectionView!.contentOffset
visibleRect.size = collectionView!.bounds.size
for attrs in attributes {
if attrs.frame.intersects(rect) {
let distance = visibleRect.midY - attrs.center.y
let normalizedDistance = abs(distance) / (visibleRect.height * fadeFactor)
let fade = 1 - normalizedDistance
attrs.alpha = fade
print(fade)
}
}
return attributes
}else{
return nil
}
}
The look of my app right now:
Its array data for only one cell view, I need to set product_name and total_quantity on table view cell.sometime total_quantity can be 2 sometime it can be 10. Just give me some basic idea so I can move forward.
[[{"total_quantity":"50","product_id":"13","product_name":"Prawns"},{"total_quantity":"13","product_id":"14","product_name":"Fish"},{"total_quantity":"57","product_id":"15","product_name":"Chicken
Breast"},{"total_quantity":"10","product_id":"16","product_name":"Beef"}],[{"total_quantity":"50","product_id":"13","product_name":"Prawns"},{"total_quantity":"13","product_id":"14","product_name":"Fish"},{"total_quantity":"57","product_id":"15","product_name":"Chicken
Breast"},{"total_quantity":"10","product_id":"16","product_name":"Beef"}]]
Screen shot
extension String {
func sizeWithGivenSize(_ size: CGSize,font: UIFont,paragraph: NSMutableParagraphStyle? = nil) -> CGSize {
var attributes = [String:AnyObject]()
attributes[NSFontAttributeName] = font
if let p = paragraph {
attributes[NSParagraphStyleAttributeName] = p
}
attributes[NSFontAttributeName] = font
return (self as NSString).boundingRect(with: size,
options: [.usesLineFragmentOrigin,.usesFontLeading],
attributes: attributes,
context: nil).size
}
Use this Method to get UILabel's Frame with different length string.
then to calculate Height form top to bottom.
for high performance, you'd better to do this at model.
For example:
func calculateFrame() -> Void {
let width = UIComponentsConst.screenWidth
var tmpFrame = ProjectDetailTeamCellLayout()
var maxX: CGFloat = 0
var maxY: CGFloat = tmpFrame.topSpace
if let titleText = title {
let titleSize = titleText.sizeWithGivenSize(MaxSize, font: ProjectDetailTeamCellLayout.titleFont, paragraph: nil)
tmpFrame.titleLabelFrame = CGRect.init(x: 15, y: maxY, width: titleSize.width, height: titleSize.height)
maxY = tmpFrame.titleLabelFrame!.maxY
maxX = tmpFrame.titleLabelFrame!.maxX
}
if let nameText = nameTitle, !nameText.isEmpty {
tmpFrame.grayLineFrame = CGRect(x: maxX + tmpFrame.itemSpace, y: tmpFrame.topSpace, width: 1, height: tmpFrame.titleLabelFrame?.height ?? 0)
let nameSize = nameText.sizeWithGivenSize(MaxSize, font: ProjectDetailTeamCellLayout.nameLabelFont, paragraph: nil)
let nameTmpFrame = CGRect(x: tmpFrame.grayLineFrame!.maxX + tmpFrame.itemSpace, y: tmpFrame.topSpace + (tmpFrame.titleLabelFrame?.height ?? nameSize.height ) / 2 - nameSize.height / 2, width: nameSize.width, height: nameSize.height)
tmpFrame.nameLabelFrame = nameTmpFrame
maxY = maxY > tmpFrame.nameLabelFrame!.maxY ? maxY : tmpFrame.nameLabelFrame!.maxY
}
if let subTitleText = subTitle, !subTitleText.isEmpty {
let subTitleSize = subTitleText.sizeWithGivenSize(CGSize(width: width - 45, height: CGFloat.greatestFiniteMagnitude), font: ProjectDetailTeamCellLayout.subTitleFont, paragraph: nil)
tmpFrame.subTitleLabelFrame = CGRect(x: 15, y: maxY + tmpFrame.lineSpace, width: subTitleSize.width, height: subTitleSize.height)
maxY = tmpFrame.subTitleLabelFrame!.maxY + 10
}
tmpFrame.height = maxY + 5
self.frameInfo = tmpFrame
}
try ?
Use something like this, if you want to change the height:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let object = myArrayDataset[indexPath.row]
//for example
if object.numberOfItems > 10 {
return 80.0
}
else {
return 40.0
}
}
I want to build an collection view like this one:
Collection View
which has bigger cell at the center and cell is snapped to center of container view, but with Swift 3. I don't want to use library since I want to learn how to build a custom Collection View like this.
I've searched over SO but not found any appropriate solution yet
write that function
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.size.width, height: collectionView.frame.size.height)
}
make collection view [scroll Direction] Horizontal
and [scrolling] tick scrolling enable and paging enable
make cell biger
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
let offSet = self.collectionView.contentOffset
let width = self.collectionView.bounds.size.width
let index = round(offSet.x / width)
let newPoint = CGPoint(x: index * size.width, y: offSet.y)
coordinator.animate(alongsideTransition: { (UIViewControllerTransitionCoordinatorContext) in
},completion: {(UIVIewTransitionCoordinatorContext) in
self.collectionView.reloadData()
self.collectionView.setContentOffset(newPoint, animated: true)
})
}
To achieve this you will need to subclass UICollectionViewFlowLayout and override:
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
then call super.layoutAt... and alter the cell it returns via its .transform attribute and return your altered attributes
Here is an example I made previously.
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var att = super.layoutAttributesForElements(in: rect)!
if !(delegate?.reelPlayerFlowIsPreviewMode() ?? true) {
return att
}
let region = CGRect(x: (self.collectionView?.contentOffset.x)!,
y: (self.collectionView?.contentOffset.y)!,
width: (self.collectionView?.bounds.size.width)!,
height: (self.collectionView?.bounds.size.height)!)
let center = CGPoint(x: region.midX, y: region.midY)
for theCell in att {
print("\(theCell.indexPath.item)\n\(theCell)\n")
let cell = theCell.copy() as! UICollectionViewLayoutAttributes
var f = cell.frame
let cellCenter = CGPoint(x: f.midX, y: f.midY)
let realDistance = min(center.x - cellCenter.x, region.width)
let distance = abs(realDistance)
let d = (region.width - distance) / region.width
let p = (max(d, ReelPlayerFlowLayout.minPercent) * ReelPlayerFlowLayout.maxPercent)
f.origin.x += (realDistance * ((1 - ReelPlayerFlowLayout.maxPercent) + (ReelPlayerFlowLayout.maxPercent - ReelPlayerFlowLayout.minPercent)))
cell.frame = f
cell.size = CGSize (width: f.width * p, height: f.height * p)
let index = att.index(of: theCell)!
att[index] = cell
}
return att
}
I have a custom UICollectionViewLayout and it implements targetContentOffsetForProposedContentOffset in order to set paging. The center item in the UICollectionView is the full "large" size, while each other item has a CGAffineTransformScale of the "shrunk" scale value.
My problem is that there appears to be an upper limit on the contentOffset so that I can only scroll to item 5 of 7, and it bounces back. Specifics after the code:
I'm setting the collectionViewContentSize() as follows:
#IBInspectable var shrunkScale: CGFloat = 0.5 // 0.5 in IB
#IBInspectable var largeSize: CGSize = CGSizeZero // 360x490 in IB
#IBInspectable var itemSpacing: CGFloat = 0 // 32 in IB
var widthPerAdditionalItem: CGFloat {
return largeSize.width * shrunkScale + itemSpacing
}
override func collectionViewContentSize() -> CGSize {
guard let collectionView = self.collectionView else {
return CGSizeZero
}
let count = CGFloat(collectionView.numberOfItemsInSection(0))
let width = largeSize.width + (count) * widthPerAdditionalItem
let height = collectionView.bounds.height
let size = CGSize(width: width, height: height)
return size
}
the targetOffset... methods reference a single helper method:
override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint) -> CGPoint {
let closestPlace = round(proposedContentOffset.x / widthPerAdditionalItem)
guard let offsetX = offsetXForItemAtIndex(Int(closestPlace)) else {
return proposedContentOffset
}
print("Calculated: \(offsetX), Proposed: \(proposedContentOffset.x), ContentWidth: \(collectionView?.contentSize.width ?? 0 )")
return CGPoint(x: offsetX, y: proposedContentOffset.y)
}
override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
return targetContentOffsetForProposedContentOffset(proposedContentOffset)
}
func contentOffsetForItemAtIndexPath(indexPath: NSIndexPath) -> CGPoint? {
guard
let collectionView = self.collectionView,
let offsetX = offsetXForItemAtIndex(indexPath.item)
else {
return nil
}
print("Tap Offset: - \(offsetX) vs. \(collectionView.contentOffset.x)")
return CGPoint(x: offsetX, y: collectionView.contentOffset.y)
}
private func offsetXForItemAtIndex(index: Int) -> CGFloat? {
guard
let count = collectionView?.numberOfItemsInSection(0)
else {
return nil
}
let proposed = CGFloat(index) * widthPerAdditionalItem
let maximum = CGFloat(count) * widthPerAdditionalItem
// bound min = 0, max = count*width
return max( min(maximum, proposed), 0)
}
Here's What I get:
My content Width is 1844.0
I finish dragging the view at offset.x = 1187.5
The targetContentOffsetForProposedContentOffset receives a proposed offset.x = 820.0
I return the "paged" offset.x value of 848.0
The collectionView scrolls to offset.x of 820.0
What I am expecting:
My content Width is 1844.0
I finish dragging the view at offset.x = 1187.5
The targetContentOffsetForProposedContentOffset receives a
proposed offset.x = 1187.5
I return the "paged" offset.x value of 1272.0
The collectionView scrolls to offset.x of 1272.0
Debugging:
If I manually call setContentOffset with the calculated offset of 1272.0 then it scrolls to the correct position. But the instant I try to scroll it snaps back to 820.0
After sitting down and doing some math I figured out the following:
contentWidth = 1844
poposedContentOffset.x = 820
1844 - 820 = 1024 // <--- Width of the screen.
The content was being displayed from the center of the screen for the first item, to the center of the screen for the second item.
This means I needed to add half the collectionView's frame.width so the first item can be centered, and half again so the final item could be centered.
The collectionViewContentSize() now returns
let width = (count-1) * widthPerAdditionalItem + collectionView.bounds.width
let height = collectionView.bounds.height
let size = CGSize(width: width, height: height)