Eliminate Distinctive Blur 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 the UINavigationBar. The effect that I want to achieve is somewhat similar to the effect of the segment of the App Store segment.

However, I noticed that at the border between the navigation bar and the UIVisualEffectView, a strange blur spot appears that makes the view incompatible, as shown in the figure below (highlighted in red):

Optimally, I would prefer the UIVisualEffectView to blend in perfectly with the blur of the UINavigationBar.

Thanks.

Answer 1

For your image, it seems that your problem is not with the UINavigationBar , but with the view where you added the UISegmentedControl . I don’t know your structure, but it could be tableHeaderView ( self.tableView.tableHeaderView ), so a reasonable way to solve this problem is to change the color of the header:

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 } 

Answer 2

Try using a UIToolBar instead of a UIVisualEffectView as the background of the segment. The navigation bar has a translucent background, not a blur effect. UIToolBar has the same translucent background as the navigation bar, so it will look no problem on the edge.