Eliminating a distinctive blur edge between UINavigationBar and UIVisualEffectView

Question

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):

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

Thanks.

Answer 1

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.

Answer 2

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
}