Reorder the UITableViewCells when scrolling - ios

I have a problem in UITableViewController with static cells, which is each time we scroll down or up, the created cell is added to the lowest layer in depth, so if the cell has a view larger than the cell size, the view will be covered by the next cell
I want to show a tooltip when the user press the info button, and the tooltip for sure will be larger than the cell size, so it will be covered by the next cell.
I use AMPopTip for the tooltips

What view are you trying to show the AMPopTip in? Ran a quick test, and this seems to work (in a UITableViewController class):
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let rectOfCell = tableView.rectForRow(at: indexPath)
let rectOfCellInSuperview = tableView.convert(rectOfCell, to: tableView.superview)
popTip.showText("test \(indexPath)", direction: .down, maxWidth: 200, in: self.view, fromFrame: CGRect(x: rectOfCellInSuperview.size.width / 2, y: rectOfCellInSuperview.origin.y + tableView.contentOffset.y + rectOfCellInSuperview.size.height / 2, width: 1, height: 1))
}
Edit: whoops, forgot to account for scroll offsets - fixed... D'oh!

Related

How can I add lines under each cell in my table view?

I was wondering how I would go about adding a separator line under each of my table view cells on Xcode (using swift) I want to make it so that under all of the cells other than the first cell it will add a separator.
Thank you in advance :D
Update:
Code that used to work for me.
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let result = UIView()
// recreate insets from existing ones in the table view
let insets = tableView.separatorInset
let width = tableView.bounds.width - insets.left - insets.right
let sepFrame = CGRect(x: insets.left, y: -0.5, width: width, height: 0.5)
// create layer with separator, setting color
let sep = CALayer()
sep.frame = sepFrame
sep.backgroundColor = tableView.separatorColor?.cgColor
result.layer.addSublayer(sep)
return result
}
The code above does the following within the old version however now doesn't add any extra lines.
Example of what I want:
The setup that I have it as:
Add a view on bottom of uitableview cell and hide and unhide when required in cellForRowAt. Use following constraints for seperator view
Add a cell with the same width as the other cells and make the height 1~2 according to your demand after every regular cell.

Updating UITableViewCell subview constraints on orientation change

I have a UITableView with 3 cells, which will eventually serve as a dashboard. I am trying to configure the top cell with a circular progress view using KDCircularProgress - I have a UIView which I position with constraints, and then programmatically add the circular progress object.
However, when I rotate the device to landscape, the progress view shifts (see first image). I have tried various combinations of setNeedsLayout(), layoutSubviews and layoutIfNeeded() but no luck.
I also tried reloadData() in willAnimateRotation(to toInterfaceOrientation: UIInterfaceOrientation, duration: TimeInterval), which gets me slightly further in that the view is correctly resized (see second image), however it has created a duplicate. Extract from cellForRowAt method below:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
switch indexPath.row {
case 0:
let topCell = tableView.dequeueReusableCell(withIdentifier: "topCell", for: indexPath) as! DashboardTopTableViewCell
//Progress config
topCell.progressBar = KDCircularProgress(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: topCell.circularProgressContainer.frame.width, height: topCell.circularProgressContainer.frame.height)))
let colorForProgress: UIColor = UIColor(red: 69.0/255.0, green: 110.0/255.0, blue: 178.0/255.0, alpha: 0.8)
topCell.progressBar?.progressColors = [colorForProgress]
let progressAsAngle = ((percentageComplete/100)*360)
topCell.progressBar?.animate(toAngle: progressAsAngle, duration: 2.0, completion: nil)
topCell.circularProgressContainer.addSubview(topCell.progressBar!)
return topCell
So I am a bit stuck - any suggestions?
Avoid using addSubview in cellForRow. As the cell is reused, this extra added view will not get removed and on reloading cell, the views would be overlapped. You will not see the impact when overlapping is of same size and position, but as in your case you are rotating, you are able to see it. Add the views statically in XIb or view wherever you want but not in cellForRowAt.
However you can change the properties of the subviews in cellForRow.
If you add subviews in cellForRowAt you will feel the jerk while scrolling tableView.

Continuously center UICollectionView cells both vertically and horizontally whenever new ones appear

The Setup:
I currently have a UICollectionView that is a bunch of circles for cells to mimic the UI of the Apple Watch home screen. I made it by following this guide. In case you didn't read the article or it goes down for some reason, it's basically a UICollectionView of circles with the outer ones being scaled down as you scroll them away from the center.
The Problem:
I want bubbles to pop up dynamically such that whenever a user earns an award, the award "pops" i.e. animates in, scaling from 0 to 1. However, I would like whatever cells there may be to be always centered. So when for example, the user jumps from 1 award to two, I want the first one to move to the left while the new one pops in.
What I've Tried:
I have tried implementing the UICollectionView's insetForSectionAt method, but it doesn't seem to work. I suspect it's because the CollectionView is not one with FlowLayout. I tried turning it into one but I ended up crashing everything...
The Code:
Here is what I have implemented, just in case the article goes down. (condensed for ease of reading):
class CollectionViewLayout: UICollectionViewLayout {
//Invalidate the layout every time the bounds change so we can do the cool changes
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
override var collectionViewContentSize: CGSize {
return CGSize(width: self.itemSize * CGFloat(COLS),
height: self.itemSize * CGFloat(ROWS))
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var attributes: [UICollectionViewLayoutAttributes] = []
for i in 0..<cellCount {
let indexPath = IndexPath(item: i, section: 0)
attributes.append(self.layoutAttributesForItem(at: indexPath)!)
}
return attributes
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
var attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
// **Code where I create "z" variable by using equation in article, where "z" is just a value [0,1] that determines cell's scale**
// **More code where I Calculate "x" and "y" based on indexPath like in article**
//Set the cell's attributes:
attributes.transform = CGAffineTransform(scaleX: z, y: z)
attributes.size = CGSize(width: self.itemSize, height: self.itemSize)
attributes.center = CGPoint(x: x, y: y)
return attributes
}
}
I believe a solution to your problem would be to scroll the collection view to the indexPath of what award you want to be centered since a collection view is a subclass of a scroll view. You can scroll the collection view to the item via:
collectionView?.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
where indexPath is the indexPath that you would like to scroll to. This automatically animates your scroll, however if you'd like to customize you can call the UIView.animate function

how do draw story board to result img file

bottom is want result page
bottom is my story board...
bottom is my result page ...
my story board how to first image file...?
divider is not work... I'm try
// saperator
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath)
{
let additionalSeparatorThickness = CGFloat(20)
let additionalSeparator = UIView(frame: CGRectMake(0,
cell.frame.size.height + additionalSeparatorThickness, cell.frame.size.width, additionalSeparatorThickness))
additionalSeparator.backgroundColor = UIColor.grayColor()
cell.addSubview(additionalSeparator)
}
background color not work
-> storay board settings firstView and TableView background color
If you want draw the cell like the picture you post, you should not use the cell's content view directly, you should try to add another custom view in your cell content view, and set the content view's background color to UIColor.clearColor(), then set the custom view's layer.cornerRadius to 5 maybe.
Hope it can help you.

Custom UIViewController transition where UITableViewCell grows to full screen and back?

I haven't been able to find any examples of this online. How can I achieve the following effect? Instead of the standard slide-to-left effect when tapping a table row, I'd like the view controller transition animation to look like the following:
User taps a cell in the table
The cell starts growing to fill the screen, pushing other rows above and below it "offscreen".
As the cell grows, cells elements (text, images, etc.) cross-fade into the new view's contents until the new view completely fills the screen.
I'd like to also be able to interactively transition back into the table view by dragging up from the bottom edge, such that the reverse of the above is achieved. i.e. view starts shrinking back into a normal table view cell as the "offscreen" cells animate back into position.
I've thought about taking a snapshot of the table and splitting it up at the points above and below the cell, and animating these snapshots offscreen as part of a custom view controller transition. Is there a better way? Ideally I'd like to not take snapshots, as I may want to have animations, etc., still happening in the table view rows as they fade offscreen.
First thing first, i have seen your post today and his is written in swift programming language.
the follwing code is to expand the selected cell to the full screen, where the subviews will fade out and background image will expands.
First complete cellForRowAtIndexPath, then in didSelectRowAtIndexPath,
func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
isSelected = true
selectedCellIndex = indexPath.row
tableView.beginUpdates()
var cellSelected: UITableViewCell = tableView.cellForRowAtIndexPath(indexPath)!
cellSelected.frame = tableCities.rectForRowAtIndexPath(indexPath)
println("cell frame: \(cellSelected) and center: \(cellSelected.center)")
let newCell = cellSelected.frame.origin.y - tableOffset
println("new cell origin: \(newCell)")
var tempFrame: CGRect = cellSelected.frame
variableHeight = cellSelected.frame.origin.y - tableOffset
tempFrame.size.height = self.view.frame.height
println("contentoffset: \(tableView.contentOffset)")
let offset = tableView.contentOffset.y
println("cell tag: \(cellSelected.contentView.tag)")
let viewCell: UIView? = cellSelected.contentView.viewWithTag(cellSelected.contentView.tag)
println("label: \(viewCell)")
viewCell!.alpha = 1
UIView.animateWithDuration(5.0, delay: 0.1, options: UIViewAnimationOptions.BeginFromCurrentState, animations: {
tableView.setContentOffset(CGPointMake(0, offset + self.variableHeight), animated: false)
tableView.contentInset = UIEdgeInsetsMake(0, 0, self.variableHeight, 0)
tableView.endUpdates()
cellSelected.frame = tempFrame
viewCell!.alpha = 0
println("contentoffset: \(tableView.contentOffset)")
}, completion: nil)
}
then update your heightForRowAtIndexPath, as
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if isSelected && (selectedCellIndex == indexPath.row) {
return self.view.frame.height
}else {
return 100
}
}
Ignore this if already solved. and this might be helpful to others.

Resources