Eureka: Header and footer text of section in UITableView appearing weird

[Sef1995]

Hi there,

I have a fairly simple setup for my form, but the appeareance of the header and footer text above and under the first section in the UITableView is very weird; https://www.dropbox.com/s/6b0mxvrjrw4o6te/Screenshot%202016-05-25%2017.49.00.png?dl=0

Also when I swipe the view up the TableViewCells dissappear; https://www.dropbox.com/s/llfheyhpacjzjid/Screenshot%202016-05-25%2017.49.34.png?dl=0

The code of my controller:

import UIKit
import Eureka

class RideInformationViewController : FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.title = "Ritinformatie"

        form +++ Section(header: "test", footer: "test")

            <<< TextRow() {
                $0.title = "Ritnummer"
                $0.placeholder = ""
            }
            <<< TextRow() {
                $0.title = "Routenummer"
                $0.placeholder = ""
            }

          <<< ImageRow(){
                $0.title = "Afbeelding"
        }
    }
}

Does anyone know how to fix this? Thanks in advance!

[mtnbarreto]

It seems your Interface builder table view is not connected with the outlet. Could you please check this out?

[Sef1995]

Hi, Thanks for your reply. I checked it out but the table View is connected to the delegate and the datasource; https://www.dropbox.com/s/v5ke1x837ueegop/Screenshot%202016-05-27%2010.57.17.png?dl=0

[mtnbarreto]

There is a tableView IBOutlet in the FormViewController class. You must connect it with your table view.

https://github.com/xmartlabs/Eureka/blob/master/Source/Core/Core.swift#L417

Regards

[Sef1995]

Hi @mtnbarreto, thanks for your reply. The IBOutlet "tableView" does not appear in the scene, how can i connect it? https://www.dropbox.com/s/ttncr8q5vzd3gd0/Screenshot%202016-06-01%2023.52.15.png?dl=0

[Sef1995]

@mtnbarreto Could you please help me out?

[mats-claassen]

As stated above, the tableView IBOutlet is in FormViewController. So to connect it you have to open Assistant Editor and then go to FormViewController and connect the tableview to the variable appearing in the code

[mats-claassen]

@Sef1995 Have you solved this issue? Could you connect the outlet?

[alpennec]

Hi @mats-claassen
When using Carthage, it is not possible to connect the IBOutlet with the tableView... any idea?
Thanks

[shyam-athivarapu]

I have a similar problem, and I have no clue how to connect? I would be really glad, if either @mtnbarreto or @mats-claassen , could take time to explain..

By the way, this is what I tried..

Assuming that I made the correct connection, I did run, and the application crashed.

Checked out, how the example app was wired up. All I could notice was that the HomeViewController was connected as you suggested, but it was under a view.

But, mine isn't.

Is that a problem?

On a separate note, I would like to mention another solution #715, which @mtnbarreto has suggested.

Where would I need to use section.reload()? And, If you have the time to explain, would you suggest a code snippet for changing the footer for a SwitchRow based on its value.

Sorry for bringing up another issue. As it was closed, I didn't want to open a new one! :-/

Thanks in advance

[shyam-athivarapu]

@mats-claassen and @mtnbarreto , any suggestions regarding this?

[mats-claassen]

Regarding the issue connecting the outlet using Carthage, I believe I have solved this once by adding this line:
@IBOutlet public var tableView: UITableView?
to your view controller and connecting the outlet to that.
And then deleting that line as it won't compile.

If that does not work you might have to edit the storyboard source file to add the outlet connection line (something like <outlet property="tableView" destination="jQG-xm-oMp" id="DcV-mx-UFW"/> where destination is the id of the tableView).
I know that is tricky but it is the way to do it without having the code available as with Carthage.

[mats-claassen]

To change the footer of a section based on its value you can do something like the following pseudocode:

SomeRow(){
...
}.onChange { row in
    if row.value <>= ... {
       let section = row.section
       section.footer = ...
       section.footer.height = {...}
       section.reload()
    }

[shyam-athivarapu]

@mats-claassen , I get the error Cannot assign value of type 'String' to type 'HeaderFooterViewRepresentable?

Please find a screenshot, which would enable you to view my implementation and its wrongdoings!

Would you suggest, please? Thanks in advance.

Also, I'd like to request your advice regarding the other problem, this thread actually deals with? I did mention my findings in an earlier answer at https://github.com/xmartlabs/Eureka/issues/454#issuecomment-255507137

[mats-claassen]

@mohan-shyam You must assign a HeaderFooterViewRepresentable to the footer and not a String. Have a look at the Readme.

And regarding the connecting outlet issue, you should really just create a UIViewController in Storyboard, add a tableView and connect it. (For Carthage look at my comment above)
Do not connect the view and do not create an UITableViewController.

[shyam-athivarapu]

Thanks very much, @mats-claassen . That was my fault. I should go through the 'Readme' again and again.
Removed the tableView, and everything was working as expected. My mistake, again.

I do have a few queries, preceded with a code snippet. Thanks in advance for your continued support. I'm picking up the pieces, one by one. You and @mtnbarreto are very patient, and helping me learn.

form +++ Section()
            <<< PushRow<Int>() {
                $0.tag = "AudioDeviceTag"
                $0.title = "Audio Devices"
                $0.value = userDefaults.integer(forKey: audioDevicesKey)
                $0.presentationMode = .segueName(segueName: "ShowAudioDeviceViewController", onDismiss: nil)
                }
                .cellUpdate { cell, row in
                    row.value = userDefaults.integer(forKey: audioDevicesKey)
                }
            +++ Section()
            <<< SwitchRow() {
                $0.tag = "AllowNotificationTag"
                $0.title = "Allow Notifications"
                $0.value = userDefaults.bool(forKey: notificationKey)
                $0.disabled = true
                }
                .cellUpdate { cell, row in
                    row.value = userDefaults.bool(forKey: notificationKey)
                    if row.value == true {
                        let section = row.section
                        section?.footer = HeaderFooterView(title: "Turn off notifications in 'Settings'.")
                        section?.reload()
                    } else {
                        let section = row.section
                        section?.footer = HeaderFooterView(title: "Turn on notifications in 'Settings'.")
                        section?.reload()
                    }
            }
            +++ Section(footer:"")
            <<< SwitchRow() {
                $0.tag = "CloudMusicTag"
                $0.title = "Show Cloud Music"
                $0.value = userDefaults.bool(forKey: cloudMusicKey)
                }
                .cellUpdate { cell, row in
                    row.value = userDefaults.bool(forKey: cloudMusicKey)
                    if row.value == true {
                        let section = row.section
                        section?.footer = HeaderFooterView(title: "Music available in the cloud is also shown.")
                        section?.reload()
                    } else {
                        let section = row.section
                        section?.footer = HeaderFooterView(title: "Music available only on the device is shown.")
                        section?.reload()
                    }
                }
                .onChange { row in
                    userDefaults.set(row.value!, forKey: cloudMusicKey)
                    if row.value == true {
                        let section = row.section
                        section?.footer = HeaderFooterView(title: "Music available in the cloud is also shown.")
                        section?.reload()
                    } else {
                        let section = row.section
                        section?.footer = HeaderFooterView(title: "Music available only on the device is shown.")
                        section?.reload()
                    }
            }
            +++ Section()
            <<< PushRow<String>() {
                $0.tag = "AcknowledgementTag"
                $0.title = "Acknowledgements"
            }
            <<< TextRow() {
                $0.tag = "VersionTag"
                $0.title = "Version"
                $0.value = ("\(Bundle.applicationVersionNumber) (\(Bundle.applicationBuildNumber))")
                $0.disabled = true
                $0.cell.textLabel?.textColor = UIColor.black
        }

[shyam-athivarapu]

I would like to add, that the second footer is misaligned only on load. As and when, I change the value (UISwitch - On/Off), it aligns itself properly!!

And I would say the actual reason for this issue is resolved for me (Weird looking header and footer text).

But, I would like to add another weird behaviour, while the form is scrolled.

Is this due to section?.reload() ? Earlier mentioned, code snippet can be used to simulate this. My observation is, this happens only when a header or footer is added or, as I've mentioned probably related to section?.reload()!?

[mats-claassen]

Setting the height of the footer might help. Like:
section.footer.height = {...}

[shyam-athivarapu]

@mats-claassen , nope. It doesn't help. And any suggestions regarding the appearance/disapperance of the rows, while scrolling!? (as seen in the GIF)

I'm probably bothering you a bit. But, I've had a couple of other questions in the earlier screenshot as well.

1. Removal of extra space below the navigation bar.
2. Unhighlight of the row while segued back.

Thanks for your continued support. :)

[mats-claassen]

In fact you might be entering a loop in calling section.reload inside cellUpdate. You should avoid that.

To remove spaces you can try to visualize the view hierarchy in Xcode and see where that space comes from. You should then correctly set the frame of the tableView and the heights for its headers/footers.

[shyam-athivarapu]

@mats-claassen , how would the update of the cell happen immediately, if the section.reload isn't in cellUpdate?

[mats-claassen]

I do not think you need that code in the cellUpdate of those rows. It should be enough if you set up your section's header/footer initially and then update it just in the onChange.