Animating NSLayoutConstraint in didSelectRowAtIndexPath doesn't work - ios

I have a MainVC(UIViewController) with a MainTableVC(UITableView) and another nested SubTableVC(UITableView).
Both of them has the MainVC as its delegate and dataSource, also, each one has its own restorationIdentifier so I can distinguish between them when I call a delegate or dataSource function.
Here's an example:
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
switch tableView.restorationIdentifier {
case "MainTableVCID":
return 10
case "SubTableVC":
return 5
default:
return 0
}
}
That's working perfectly great. But one issue I have here and I couldn't solve is:
I have a UIPickerView that's a subview of the MainVC's view, it's constrained just below the MainVC's view with constraints like this:
private let pickerView: UIPickerView = {
let picker = UIPickerView()
picker.backgroundColor = UIColor.lightGray
picker.translatesAutoresizingMaskIntoConstraints = false
return picker
}()
private var pickerViewBottomAnchor: NSLayoutConstraint?
override func viewDidLoad() {
super.viewDidLoad()
//other init code..
view.addSubview(pickerView)
pickerView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
pickerView.heightAnchor.constraint(equalToConstant: 180).isActive = true
pickerViewBottomAnchor = pickerView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 180)
pickerViewBottomAnchor?.isActive = true
pickerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
}
In the nested tableView (SubTableVC), in tableView:didSelectRowAtIndexPath: I want to animate the NSLayoutConstraint's constant to be equal to Zero.
However, at this time, I get pickerViewBottomAnchor = nil when I use console to print object (po self. pickerViewBottomAnchor?.constant) //prints nil.
Here's the code I use:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if tableView.restorationIdentifier == "SubTableVC" {
pickerViewBottomAnchor?.constant = 180
self.view.layoutIfNeeded()
}
}

Start with changing your didSelectRowAt function to:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if pickerViewBottomAnchor?.constant != 0 {
pickerViewBottomAnchor?.constant = 0
} else {
pickerViewBottomAnchor?.constant = 180
}
UIView.animate(withDuration: 0.5) {
self.view.layoutIfNeeded()
}
}
Using that, selecting a row in either table should alternately slide the picker view up or down.
If that doesn't do anything, then you (likely) do not have your table views .delegate property set correctly.
If / when that does work, edit the function to only act when you've selected a row on the subTableView

Related

Swift: TableView is showing some of the arrays data but not all

I have two tableviews inside my stack view. I am resizing them depending on the amount of data that is retrieved from Firestore. The issue I am facing is whilst the tableview is resize the top table view "ingredientsTV" shows all the data where as the "instructionsTV" only shows some of the data. My array.count displays the correct number of items in the array but them items are not getting displayed.
//Code for resize tableviews
override func viewWillLayoutSubviews() {
super.updateViewConstraints()
self.ingredientsTVHeight?.constant = self.ingredientsTV.contentSize.height
self.instructionsTVHeight.constant = self.instructionsTV.contentSize.height
self.ingredientsTV.contentInset = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
self.instructionsTV.contentInset = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
}
//setupview, called in viewdidload
//MARK: Functions
private func setupView() {
ingredientsTV.delegate = self
ingredientsTV.dataSource = self
instructionsTV.delegate = self
instructionsTV.dataSource = self
recipeImage.layer.cornerRadius = 5
recipeNameLbl.text = recipe.name
prepTimeLbl.text = recipe.prepTime
cookTimeLbl.text = recipe.cookTime
servesLabel.text = recipe.serves
if let url = URL(string: recipe.imageUrl) {
recipeImage.kf.setImage(with: url)
recipeImage.layer.cornerRadius = 5
}
}
//MARK: Tableview functions
extension PocketChefRecipeDetailsVC {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if (tableView == self.ingredientsTV) {
return recipe.ingredients.count
}else {
return recipe.method.count
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if (tableView == self.ingredientsTV) {
let cell = ingredientsTV.dequeueReusableCell(withIdentifier: "ingredientsCell", for: indexPath) as? ingredientsCell
cell?.ingredientsLbl.text = recipe.ingredients[indexPath.row]
return cell!
}else {
let cellB = instructionsTV.dequeueReusableCell(withIdentifier: "instructionsCell", for: indexPath) as? InstructionsCell
cellB?.instructionsLbl.text = recipe.method[indexPath.row]
return cellB!
}
}
}
*Recipe data is getting passed from previous view controller
I'm going to take a shot in the dark and say that maybe your stack view needs to be re laid out after you reload data.
Make sure to call
// after ingredientsTV.reloadData() and instructionsTV.reloadData() gets called
stackview.setNeedsLayout()
You can try adding a fixed height to each row and see if it has any populated data or not. Add this to your extension
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 100
}
Additionally, you can also set the background color of the cell in cellForRowAt() just to ensure the rows are visible.
Note: Do check if your stack view's constraints are set for all 4 sides.

Implementing Sticky Cell in UICollectionView or UITableView

I am to implement a table with a list of items which includes one item that should always be onscreen. So, for example:
you have 50 items in the list
your "sticky" list item is 25th
you have 10 items that may be displayed onscreen at a time
despite of you position in the list, "sticky" list should always remain visible
if your item is lower than your position in the list it is displayed on the bottom of the list
if your item is between previous items it should be displayed on the top of the list
as soon as you reach you item's real position in the list, it should move together with the scroll of the list
Here are the illustrations to better understand the implementation requirements:
Will be glad for any possible ideas, suggestions or recommendations on how can this possibly implemented. Unfortunately, I failed to find any useful libraries or solutions that solve this problem. UICollectionView and UITableView are both acceptable for this case.
Sticky header or footer, as per my understanding do not work in this case as they cover only half of the functionality that I need.
Thank you in advance for your comments and answers!!!
I'm pretty sure you can't actually have the same actual cell be sticky like that. You can create the illusion of stickiness through auto layout trickery though. Basically, my suggestion is that you can have views that are the same as your cells that you want to be "sticky" and constrain them on top of your sticky cells while your sticky cells are visible. The best I could pull off on this doesn't look quite perfect if you scroll slowly. (The sticky cell goes mostly off screen before snapping to the top or bottom position. It isn't noticeable in my opinion at fairly normal scrolling speeds. Your mileage may vary.)
The key is setting up a table view delegate so you can get notified about when the cell will or will not be on the screen.
I've included an example view controller. I'm sure there are areas where my example code won't work. (For example, I didn't handle stacking multiple "sticky" cells, or dynamic row heights. Also, I made my sticky cell blue so it would be easier to see the stickiness.)
In order to run the example code, you should just be able to paste it into a default project Xcode generates if you create a new UIKit app. Just replace the view controller they gave you with this one to see it in action.
import UIKit
struct StickyView {
let view: UIView
let constraint: NSLayoutConstraint
}
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
lazy var stickyViewConstraints = [Int: StickyView]()
lazy var tableView: UITableView = {
let table = UITableView()
table.translatesAutoresizingMaskIntoConstraints = false
table.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
table.rowHeight = 40
table.dataSource = self
table.delegate = self
return table
}()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
addTable()
setupStickyViews()
}
private func addTable() {
view.addSubview(tableView)
tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
private func setupStickyViews() {
let cell25 = UITableViewCell()
cell25.translatesAutoresizingMaskIntoConstraints = false
cell25.backgroundColor = .blue
cell25.textLabel?.text = "25"
view.addSubview(cell25)
cell25.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
cell25.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
cell25.heightAnchor.constraint(equalToConstant: tableView.rowHeight).isActive = true
let bottom = cell25.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
bottom.isActive = true
stickyViewConstraints[25] = StickyView(view: cell25, constraint: bottom)
}
// MARK: - Data Source
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return section == 0 ? 50 : 0
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.text = "\(indexPath.row)"
return cell
}
// MARK: - Delegate
func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) {
guard let stickyView = stickyViewConstraints[indexPath.row] else { return }
stickyView.constraint.isActive = false
var verticalConstraint: NSLayoutConstraint
if shouldPlaceStickyViewAtTop(stickyRow: indexPath.row) {
verticalConstraint = stickyView.view.topAnchor.constraint(equalTo: view.topAnchor)
} else {
verticalConstraint = stickyView.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
}
verticalConstraint.isActive = true
stickyViewConstraints[indexPath.row] = StickyView(view: stickyView.view, constraint: verticalConstraint)
}
private func shouldPlaceStickyViewAtTop(stickyRow: Int) -> Bool {
let visibleRows = tableView.indexPathsForVisibleRows?.map(\.row)
guard let min = visibleRows?.min() else { return false }
return min > stickyRow
}
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
if let stickyView = stickyViewConstraints[indexPath.row] {
stickyView.constraint.isActive = false
let bottom = stickyView.view.bottomAnchor.constraint(equalTo: cell.bottomAnchor)
bottom.isActive = true
stickyViewConstraints[indexPath.row] = StickyView(view: stickyView.view, constraint: bottom)
}
}
}

Action affecting buttons in all TableView Headers

I am using a custom UITableViewHeaderFooterView for me TableView. I was trying to implement hiding and showing rows in a section(which I have working). I decided to add a button (>) to the section header so that I can rotate it when the section is "expanded/collapsed".
The problem I have appears when I click the button. When the rotateCollapseButton() function is called, the (>) buttons in all the section headers rotate, not just the one that was clicked. Sometimes it'll even exclude the button that was clicked or clicking one will affect a different one and not itself.
How can I make it so that only the correct button will rotate?
This is the code I have for the custom Header I created.
var rotated:Bool = false
var section:Int?
weak var delegate:MessageGroupHeaderDelegate?
#IBAction func expandCollapseButtonClicked(_ sender: Any) {
rotateCollapseButton(sender as! UIButton)
delegate?.didPressExpandCollapseButton(atSection : self.section!)
}
func rotateCollapseButton(_ button:UIButton) {
UIView.animate(withDuration: 0.5) { () -> Void in
var rotationAngle:CGFloat = CGFloat(M_PI_2)
if self.rotated {
rotationAngle = CGFloat(0)
}
button.transform = CGAffineTransform(rotationAngle : rotationAngle)
self.rotated = !self.rotated
}
}
EDIT: Code where the header is initialized...
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// Dequeue with the reuse identifier
let cell = self.massMessageGroupsTableView.dequeueReusableHeaderFooterView(withIdentifier: "MessageGroupTableViewHeader")
let header = cell as! MessageGroupTableViewHeader
header.groupNameLabel.text = messageGroupsMap[section]?.messageGroup.name
header.section = section
header.setComposeButtonImage()
header.delegate = self
return cell
}
Thank you!
In your header setting, trying doing this instead:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// Dequeue with the reuse identifier
let cell = self.massMessageGroupsTableView.dequeueReusableCell(withIdentifier: "MessageGroupTableViewHeader")
let header = cell as! MessageGroupTableViewHeader
header.groupNameLabel.text = messageGroupsMap[section]?.messageGroup.name
header.section = section
header.setComposeButtonImage()
header.delegate = self
let containingView : UIView = UIView()
containingView.addSubview(header)
return containingView
}

Fade in UITableViewCell row by row in Swift

I am new to swift, I am trying to have a UITableView and the cells will be animated to appear one by one. How can I do that? Also, if the newly appeared row of cell not on the screen (hiding below the table). How can I move the table up when each cell appear?
var tableData1: [String] = ["1", "2", "3", "4", "5", "6", "7"]
override func viewWillAppear(animated: Bool) {
tableView.scrollEnabled=false
tableView.alpha=0.0
NSTimer.scheduledTimerWithTimeInterval(NSTimeInterval(3), target: self, selector: "animateTable", userInfo: nil, repeats: false)
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.tableData1.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell:TblCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as! TblCell
cell.lblCarName.textAlignment = NSTextAlignment.Justified;
return cell
}
func animateTable() {
//what should be the code?//
}
Step-1
In your cellForRowAtIndexPath method where initialize your cell, hide it like that;
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: TblCell = tableView.dequeueReusableCell(withIdentifier: "cell") as! TblCell
cell.continueLabel.textAlignment = .justified
cell.contentView.alpha = 0
return cell
}
Step-2
Let's make fade animation. UITableViewDelegate has willDisplayCell method which is able to detect that when you scroll to top or bottom, first cell will display on the window.
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
UIView.animate(withDuration: 0.8, animations: {
cell.contentView.alpha = 1
})
}
Your fade animation is on the progress. The most important thing is that you can not setup your cell's alpha directly in runtime because iOS is doing some special internal handling with the cell as part of your UITableView and ignores your setup. So if you setup your cell's contentView, everything's gonna be fine.
In the UITableView, the rows are prepared automatically for you when they get to be in your "range vision". I'm assuming you are, at least not initially, being able to scroll the tableView, so we would scroll it programmatically making the rows appear as it goes. How are we doing that? Actually UITableView has a method that let us scroll it to a specific row:
scrollToRowAtIndexPath(indexPath : NSIndexPath, atScrollPosition : UITableViewScrollPosition, animated : Bool);
I'm too tired to write the code, so I'm going to try to explain. First, for every cell you set alpha to 0, as soon as they get loaded (cellForRowAtIndexPath).
Then let's suppose our screen fits the 5 first rows. You are going to animate their alphas sequentially (using UIView.animateWithDuration ) until the fifth one (index 4), then you are going to scrollToRowAtIndexPath passing NSIndexPath using 5, then 6,... until the rest of them (using scrollPosition = .Bottom). And for each of them, you would animate as soon as they get loaded. Just remember to put some time between this interactions. (animate first, run NSTimer to the second, and it goes on). And the boolean animated should be true of course.
To appear each visible cell one by one, you can do it by playing with alpha and duration value.
extension UITableView {
func fadeVisibleCells() {
var delayDuration: TimeInterval = 0.0
for cell in visibleCells {
cell.alpha = 0.0
UIView.animate(withDuration: delayDuration) {
cell.alpha = 1.0
}
delayCounter += 0.30
}
}
}
Here is some code which can get you started. In my COBezierTableView
I subclassed UITableView and override the layoutSubviewsmethod. In there you can manipulate the cells according to their relative position in the view. In this example I fade them out in the bottom.
import UIKit
public class MyCustomTableView: UITableView {
// MARK: - Layout
public override func layoutSubviews() {
super.layoutSubviews()
let indexpaths = indexPathsForVisibleRows!
let totalVisibleCells = indexpaths.count - 1
if totalVisibleCells <= 0 { return }
for index in 0...totalVisibleCells {
let indexPath = indexpaths[index]
if let cell = cellForRowAtIndexPath(indexPath) {
if let superView = superview {
let point = convertPoint(cell.frame.origin, toView:superView)
let pointScale = point.y / CGFloat(superView.bounds.size.height)
cell.contentView.alpha = 1 - pointScale
}
}
}
}
}
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell .alpha = 1.0
let transform = CATransform3DTranslate(CATransform3DIdentity, 0, 3000, 1200)
//let transform = CATransform3DTranslate(CATransform3DIdentity, 250, 0, 1250)
//let transform = CATransform3DTranslate(CATransform3DIdentity, 250, 1250, 0)
// let transform = CATransform3DTranslate(CATransform3DIdentity, -250, 300, 120)
cell.layer.transform = transform
UIView.animate(withDuration: 1.0) {
cell.alpha = 1.0
cell.layer.transform = CATransform3DIdentity
cell.layer.transform = CATransform3DIdentity
}
}
I think this method will be a great solution.
Set all cell alpha to 0
animate them in tableView(_:,willDisplay:,forRowAt:)
set a delay for every indexPath.row
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.alpha = 1
})
}

Swift: UITableView Cell Disappears When Using UIView.animateWithDuration

I am programmatically adding a UITableView as a subview of a view that uses UIView.animateWithDuration to expand the view when a button is clicked from a single point to a full window. Basically, a box that starts as a point and expands to full size with an animation. I am having difficulties getting the table to populate with cells. At first, a cell was being created, but would disappear after quickly after the animation completed, after playing around with it, I have gotten the cell to remain after the animation is complete, but now the cell disappears when I tap on it. I don't understand what is going on here. Can someone please help?
Here is my code. Note, I have removed what I believe to be irrelevant to this problem to make the code easier to read.
class PokerLogSelectionView: UIViewController {
let logSelectionTableViewController = LogSelectionTableViewController()
let logSelectionTableView = UITableView()
// Irrelevant class variables removed
init(btn : PokerLogSelectionButton){
// Irrelevant view initialization code removed
// Display the subviews
self.displayLogListScrollView()
}
func displayLogListScrollView() {
// Frame is set to (0,0,0,0)
let frame = CGRect(x: self.subviewClosed, y: self.subviewClosed, width: self.subviewClosed, height: self.subviewClosed)
logSelectionTableView.delegate = self.logSelectionTableViewController
logSelectionTableView.dataSource = self.logSelectionTableViewController
// Set the frame of the table view
logSelectionTableView.frame = frame
// Give it rounded edges
logSelectionTableView.layer.cornerRadius = 10
// Remove the cell divider lines
logSelectionTableView.separatorStyle = UITableViewCellSeparatorStyle.None
logSelectionTableView.backgroundColor = logSelectionViewContentScrollViewColor
self.view.addSubview(logSelectionTableView)
//self.logSelectionTableView.reloadData()
//self.addChildViewController(logSelectionTableViewController)
}
override func viewDidAppear(animated: Bool) {
// Create animation
let timeInterval : NSTimeInterval = 0.5
let delay : NSTimeInterval = 0
UIView.animateWithDuration(timeInterval, delay: delay, options: UIViewAnimationOptions.CurveEaseOut, animations: {
// Irrelevant code removed
// Set the size and position of the view and subviews after the animation is complete
self.view.frame = CGRect(x: self.frameXopen, y: self.frameYopen, width: self.frameWopen, height: self.frameHopen)
self.logSelectionTableView.frame = CGRect(x: self.subviewXopen, y: self.svYopen, width: self.subviewWopen, height: self.svHopen)
}, completion: { finished in
self.addChildViewController(self.logSelectionTableViewController)
})
}
}
class LogSelectionTableViewController : UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.registerClass(LogSelectionCell.self, forCellReuseIdentifier: "logCell")
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return pokerLibrary.logNames.count
}
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 20
}
override func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
return true
}
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
print("Selected row: \(indexPath.row)")
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
if let cell : LogSelectionCell = self.tableView.dequeueReusableCellWithIdentifier("logCell") as? LogSelectionCell {
cell.selectionStyle = UITableViewCellSelectionStyle.None
cell.textLabel!.text = pokerLibrary.logNames[indexPath.row].name
return cell
}
fatalError("Could not dequeue cell of type 'LogSelectionCell'")
}
}
Note: I can see the tableview after the animation is complete. The color is different than the view in the background view and the tableview does not disappear, just the cell. I expect there to be 1 cell, and I have printed out the number of rows in section 0 and it always returns 1.
Thanks for the help!
Edit:
Here is a screenshot of the view hierarchy before the cell disappears.
Here is a screenshot of the view hierarchy after I tap the cell and it disappears.
I overrode the touchesBegan method in my custom cell and did not call its superclass method. This stopped the cell from disappearing when I tap it, but it still disappears when I scroll the tableView.

Resources