10

Currently, my view hierarchy consists of a UIViewController (NOT UITableViewController), a UITableView nested in the view controller and a UIVisualEffectView (set to Extra Light) in front of the UITableView, aligned to the bottom of a UINavigationBar. The effect I want to achieve is somewhat similar to that of the App Store's segmented view.

However, I noticed a weird blur edge occurring at the boundary between the navigation bar and the UIVisualEffectView that makes the view look inconsistent, as pictured below (highlighted by the red circle):

enter image description here

Optimally, I would prefer that the UIVisualEffectView blends perfectly with the UINavigationBar's blur.

Thanks.

Pan Ziyue
  • 2,287
  • 2
  • 16
  • 17
  • why don't you just have a plain colour background, that's what your screenshot looks like, you don't seem to have anything in the background? – Wain Jul 12 '16 at 16:34
  • If I add a background view to the navigation bar and the effect view, it will nullify the point of having the blur effect view in the first place. In iOS 7 and above, the table view is actually visible through the translucent navigation bar. – Pan Ziyue Jul 13 '16 at 11:45
  • 2
    I had to solve the same issue in an app I'm currently developing. For me, it was the tabBar and a blurView attached to its top and table section headers that pinned to the bottom of the navigationbar. The solution was to make the UITabBar transparent (NOT translucent -> NO background at all) and extending the blurView downwards to fill the space occupied by the tabBar. Please let me know if you need code samples on how to make the bar transparent. :) - I'm afraid there is no flag you can set on a UIBar to make it 'blend' with UIVisualEffectViews at the edges. Though, I'd love to be falsified. – CodingMeSwiftly Jul 14 '16 at 10:15
  • @Cabus do you mind adding your comment as an answer? This method worked quite well! – Pan Ziyue Jul 15 '16 at 00:03
  • Will do as soon as I've got time. Hopefully till tomorrow :) – CodingMeSwiftly Jul 15 '16 at 00:19
  • The bounty is expiring soon, please post your solution at your earliest convenience so I can award it to you. :) – Pan Ziyue Jul 17 '16 at 12:46
  • Im sorry but I cannot reproduce your issue, beyond the bounty it would be interesting to analyze it. – Alessandro Ornano Jul 19 '16 at 09:19

2 Answers2

2

Try to use a UIToolBar instead of a UIVisualEffectView as the background of the segment. The navigation bar has translucent background rather than blur effect. UIToolBar has the same translucent background as navigation bar, so it would look seamless at the edge.

Fujia
  • 1,232
  • 9
  • 14
  • I did try to use a UIToolBar when I was making this screen initially, but unfortunately I was unable to get the desired length of the `UISegmentedControl` to fit the `UIToolBar` (I want the segmented control to fit the toolbar with about 16pts left at the left and right edges). Therefore I ended up settling with a UIVisualEffectView. – Pan Ziyue Jul 14 '16 at 13:35
  • `UIVisualEffectView` will never satisfy your needs as it doesn't have the same visual look as a translucent navigation bar. You'd probably better consider putting effort on sizing the `UISegmentedControl` in a tool bar. One way would be using a flexible spacer at each side to center the control, then set the correct size for it in code. – Fujia Jul 15 '16 at 01:52
  • This is indeed the best solution, not a 'beautiful' one but it's simple enough and it works. Thank you. – Vin Gazoil Mar 24 '18 at 10:55
1

Looking to your picture it seems your issue is not attributable to UINavigationBar but to a view where you have added UISegmentedControl. I don't know your structure but it could be the tableHeaderView (self.tableView.tableHeaderView) so a reasonable way to solve this problem is to change the header color:

Code example:

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        var headerView: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
        header.contentView.backgroundColor = UIColor.clearColor()
        return header
}
Alessandro Ornano
  • 34,887
  • 11
  • 106
  • 133
  • I used a view hierarchy like this: `UINavigationController > UIViewController (not table view controller) > UITableView` On top of the table view (because I used a standard `UIViewController` as a base), I added a `UIVisualEffectView` set to Extra Light and nested a `UISegmentedControl` in there. – Pan Ziyue Jul 14 '16 at 13:32
  • I've try to do it, I cannot reproduce your issue, have you a GitHub o Gist or some example? – Alessandro Ornano Jul 14 '16 at 14:01