CoachMark is getting out of the screen bounds when applied to table view

[M-I-N]

I've made coach marks for several components of my view controller (e.g. navigationBar, rightBarButtonItem, tableView, a custom UIButton). Other coach marks but the one for tableView are being shown appropriately inside the screen bounds. What's wrong when using it with tableView?

Screenshots:

I've followed your default style implementation.

Here are some code snippets:

func coachMarksController(_ coachMarksController: CoachMarksController, coachMarkAt index: Int) -> CoachMark {
    switch index {
    case 0:
        ....
        ....
    case 2:
        return coachMarksController.helper.makeCoachMark(for: self.tableView)
        ....
        ....
    }
}

func coachMarksController(_ coachMarksController: CoachMarksController, coachMarkViewsAt index: Int, madeFrom coachMark: CoachMark) -> (bodyView: CoachMarkBodyView, arrowView: CoachMarkArrowView?) {
    let coachViews = coachMarksController.helper.makeDefaultCoachViews(withArrow: true, arrowOrientation: coachMark.arrowOrientation)
    switch index {
    case 0:
        ....
        ....
    case 2:
        coachViews.bodyView.hintLabel.text = self.tableViewInstructionText
        coachViews.bodyView.nextLabel.text = self.okInstructionText
        ....
        ....
    }
    return (bodyView: coachViews.bodyView, arrowView: coachViews.arrowView)
}

[ephread]

Hello @M-I-N, the reason you're seeing this awkward behavior is because your tableview spans more than half the screen. (Meaning that the engine get confused as to where to put the coach mark and resort to the default position.)

It'll certainly be an improvement to check the space remaining and place the coachmark where there's the most of it.

In the meantime, since you've got more space on the top, you can try to force the orientation in coachMarksController(_:, coachMarkAt:) or coachMarksController(_:, coachMark:, at:) see here.

[M-I-N]

Hi @ephread , thanks for the quick reply from you.

I've tried the approach you suggested (force the orientation so that CoachMark is shown above the table view). But this isn't changing anything. The CoachMark is still on the bottom.

But it seems I could do it with

coachMark.arrowOrientation = .bottom

My TableView is top aligned with the Safe Area and I'm using Navigation Bar(long style with iOS 11 but traditional with less targets) with Navigation Controller. So basically it'll work on iOS 11+ but not with < iOS 11.

Any idea how to deal with < iOS 11?

[M-I-N]

Meanwhile, the documentation in the CoachMarkArrowOrientation enum should be changed to something like:

/// An arrow can either sit at the bottom of the given view with CoachMark on bottom of it and point upward (.Top) or
/// sit at the top of the given view with CoachMark on top of it and point downward. (.Bottom)

to reflect the actual behavior.

[tectonicpie]

I did it with coachMark.arrowOrientation = .bottom as well.

[tectonicpie]

Hi @ephread it would be very helpful if it were possible to place the coachmark above view it is highlighting. For example for a tableview or for any other view, that covers a large area of the screen, the ability to place the coach mark over the view itself would save a lot of trouble.

[ephread]

@tectonicpie That's a good idea, I'll put that on the roadmap.