I'm developing an exercise app in which the bottom half (right half in landscape) of the screen is the "live" portion of the app. It runs a timer, along with a donut graph and counter showing elapsed time for each exercise. The upper half (or left half in landscape) shows instructions.
Having looked for similar questions there doesn't seem to be fit for a case where there's scrollable content (a table view) that only takes up part of the screen as in:
In this case, section C of the text directions isn't visible. A couple of solutions I've read about include:
- "Flashing" the scroll bar (typically upon loading the page). That seems unreliable. What if the person isn’t paying attention right then? Also, there are multiple exercises so this would have to occur over and over.
- A row of dots underneath (similar to the way the app pages are suggested on the Home screen. This isn’t quite what I want though because it’s linear along the wrong axis. And it is more for discrete views.
- Arrows. Typically above and below but I’m loathe to give up real estate. So perhaps something like one of these:
Out of curiosity I tried #1 and as I suspected, it is unsatisfactory. Also, attempting to turn the vertical scrollbar on permanently didn't even work for me (not that I'd want that anyway).
Using arrows seems easy to implement and is what I'm partial to. But I'm open to observations and suggestions. Thank you.
UPDATE: FYI, I chose to implement the fade-out at bottom. There are several ways to do this, but for apps targeting iOS 8.0+ this worked best. It avoids any need to resize or position the mask!
// Add gradient mask to view
func AddGradientMask(targetView: UIView)
{
let gradientMask = CAGradientLayer()
gradientMask.frame = targetView.bounds
gradientMask.colors = [UIColor.blackColor().CGColor, UIColor.clearColor().CGColor]
gradientMask.locations = [0.8, 1.0]
let maskView: UIView = UIView()
maskView.layer.addSublayer(gradientMask)
targetView.maskView = maskView
}
In my case, I want to remove the mask once the user starts scrolling. This is done with:
func scrollViewWillBeginDragging(scrollView: UIScrollView) {
exerDetailsTableView.maskView = nil
}
where the view is defined as an @IBOutlet:
@IBOutlet weak var exerDetailsTableView: UITableView!