Skip to content

Improvement: Use frosted glass effect for Navigationbar and Toolbar #1290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

wutschel
Copy link
Collaborator

@wutschel wutschel commented Jun 21, 2025

Description

Frosted Glass Effect

Use frosted glass effect ([UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]) for navbar and toolbar. Let the table views extend underneath the frosted glass and adapt contentInset accordingly.

Special care is needed for the following areas:

  • To have SVPullToRefresh working as expected it is important to explicitly set contentInset instead of automatic adjustment.
  • For iPad it is important to hide the toolbar's effect view buttonsViewEffect while being in fullscreen library view.

Glitch with Sticky Headers for collection view

When changing the layout for the table and collection view to extend underneath the navbar, an issue became visible on some devices (in my case the glitch shows on iPhone 14 Pro iOS 18.5 sim, but not on iPod Touch 7G iOS 15.5 sim). The issue is caused by how the app retrieves contentInset.top, it follows the approach

UIApplication.sharedApplication.statusBarFrame.size.height + navCtrl.navigationBar.frame.size.height

But in fact, the navigation bar ends 1/3 px above, as it is also reported when using

CGRectGetMaxY(navCtrl.navigationBar.frame

Issue (see small visible area between section header and navbar):
Bildschirmfoto-2025-06-22-um-10-32-52

Solutions are either to use the CGRectGetMaxY equation, or to increase contentInset.top to slightly overlap with the navigation bar.

Other

In addition, some smaller refactoring, more comments and coding style changes were added.

Screenshots

Screenshots (left = current, right = dark blur): https://ibb.co/zW9r4NRv
Video: link to video

Summary for release notes

Improvement: Use frosted glass effect for Navigationbar and Toolbar

@wutschel wutschel marked this pull request as draft June 21, 2025 16:11
@wutschel wutschel force-pushed the improve_layout branch 2 times, most recently from 54bab06 to 3b76f42 Compare June 22, 2025 08:31
@wutschel
Copy link
Collaborator Author

wutschel commented Jun 23, 2025

The solution around CGRectGetMaxY does not have the correct result on e.g. iPod Touch iOS 15.5 simulator. Neverending story...

@wutschel
Copy link
Collaborator Author

While testing I now saw the the bottom inset behaves different (related to UIScrollViewContentInsetAdjustmentNever?). At the same time the impact of scrollIndicatorInsets changed as well. I am a bit lost on how the scroll indicators need to be configured. Until now I thought I set the same insets for them as for the content insets. But this does not seem to be correct.

@wutschel
Copy link
Collaborator Author

wutschel commented Jun 24, 2025

Best overall results I achieve when

  • Not using UIScrollViewContentInsetAdjustmentNever
  • Keep using self.edgesForExtendedLayout = UIRectEdgeNone.
  • Programmatically extending maskView (child view of DetailViewController's view) underneath the navbar and status bar. The table view and collection view are child views of maskView and autoscale accordingly.
  • Use CGRectGetMaxY(navCtrl.navigationBar.frame) for the extension of maskView and for contentInset.top. But this will result in the table view not extending underneath the status bar in some cases (e.g. iPod Touch 7G, iOS 15.5).
  • Keep using the own implementation of sticky headers for collection view (layoutAttributesForElementsInRect). Otherwise keeping support for the sticky section header while active search ("25 results") needs not yet understood changes to maintain visibility.

With above I have

  • Proper content inset handling (top and bottom)
  • Proper scroll indicators
  • Pull-To-Sync works as expected
  • Table/collection view not using full screen height in some occasions

Overall, it became difficult as soon as the tables should extend underneath the navigation / status bar. I am quite sure the current path is not correct or desired. This will end up in more trouble, quite unsatisfying.

Force pushed the code now, I hope you have a better idea how this should be done properly.

@kambala-decapitator
Copy link
Collaborator

tbh it's rather difficult to track the issue you're facing. Would it be possible to create a minimal reproducible example (a test app I mean)? It'd also be easier to investigate and find solution there.

maybe it's time to start using AutoLayout, it may get the things right automatically.

About the 1/3 px: maybe using value from safe area inset could help?

@wutschel
Copy link
Collaborator Author

With latest rebase this PR only changes behaviour of the navigation bar. All other changes related to coding styles, sticky header implementation and frosted glass toolbars were already merged via dedicated PRs.

@wutschel
Copy link
Collaborator Author

The 1/3 px issue seems to be yet another viewDidLoad vs willLayoutSubviews topic. Currently it is called from viewDidLoad which doesn't result in correct numbers for CGRectGetMaxY(navCtrl.navigationBar.frame) for some simulators and view controllers. Calling it in willLayoutSubviews works, but will require quite some rework and fixing regressions. Might still be the way to go on the long run though ...

Some examples for the 1/3 px issue on iPhone 14 Pro iOS18 simulator:
CGRectGetMaxY(navCtrl.navigationBar.frame) = 97.667 (correct)
UIApplication.sharedApplication.statusBarFrame.size.height + navCtrl.navigationBar.frame.size.height = 98
UIApplication.sharedApplication.keyWindow.safeAreaInsets.top + navCtrl.navigationBar.frame.size.height = 103
navCtrl.navigationBar.frame.size.height = 44

@wutschel wutschel force-pushed the improve_layout branch 2 times, most recently from 8e48691 to f967c34 Compare August 15, 2025 21:37
Using CGRectGetMaxY resolves a layout issue where otherwise the inset ends below the navbar (e.g. Phone 14 Pro iOS18), but at the same time it causes an issue with the inset not taking into account the status bar (e.g. iPod Touch iOS15.5). This seems to be caused by calling this method from viewDidLoad instead of willLayoutSubviews. This workaround avoids rework of DetailVC's delicate layout.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants