Skip to content
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.

Sign up for GitHub

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

docs(statusbar): Overlays webview property on Android 15 #2229

Merged
merged 2 commits into from
Nov 6, 2024
Merged

docs(statusbar): Overlays webview property on Android 15 #2229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56350cd
docs: status bar on android 15
andredestro Oct 30, 2024
ab74381
fmt
andredestro Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions status-bar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@ const showStatusBar = async () => {

These config values are available:

| Prop | Type | Description | Default | Since |
| --------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------- | ----- |
| **`overlaysWebView`** | <code>boolean</code> | Whether the statusbar is overlaid or not. | <code>true</code> | 1.0.0 |
| **`style`** | <code>string</code> | <a href="#style">Style</a> of the text of the status bar. | <code>default</code> | 1.0.0 |
| **`backgroundColor`** | <code>string</code> | Color of the background of the statusbar in hex format, #RRGGBB. Doesn't work if `overlaysWebView` is true. | <code>#000000</code> | 1.0.0 |
| Prop | Type | Description | Default | Since |
| --------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----- |
| **`overlaysWebView`** | <code>boolean</code> | Whether the statusbar is overlaid or not. For applications targeting Android 15, this property has no effect unless the property windowOptOutEdgeToEdgeEnforcement is added to the application layout file. Otherwise, the application assumes always overlays as true. More details in https://developer.android.com/reference/android/R.attr#windowOptOutEdgeToEdgeEnforcement | <code>true</code> | 1.0.0 |
| **`style`** | <code>string</code> | <a href="#style">Style</a> of the text of the status bar. | <code>default</code> | 1.0.0 |
| **`backgroundColor`** | <code>string</code> | Color of the background of the statusbar in hex format, #RRGGBB. Doesn't work if `overlaysWebView` is true. | <code>#000000</code> | 1.0.0 |

### Examples

Expand Down
6 changes: 3 additions & 3 deletions status-bar/ios/Sources/StatusBarPlugin/CAPBridgeViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import Capacitor

extension CAPBridgeViewController {

open override func viewDidAppear(_ animated: Bool) {
override open func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
NotificationCenter.default.post(Notification(name: .capacitorViewDidAppear))
}
open override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {

override open func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
NotificationCenter.default.post(Notification(name: .capacitorViewWillTransition))
}
Expand Down
40 changes: 20 additions & 20 deletions status-bar/ios/Sources/StatusBarPlugin/StatusBar.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Foundation
import Capacitor

public class StatusBar {

private var bridge: CAPBridgeProtocol
private var isOverlayingWebview = true
private var backgroundColor = UIColor.black
Expand All @@ -13,11 +13,11 @@ public class StatusBar {
self.bridge = bridge
setupObservers(with: config)
}

deinit {
observers.forEach { NotificationCenter.default.removeObserver($0) }
}

private func setupObservers(with config: StatusBarConfig) {
observers.append(NotificationCenter.default.addObserver(forName: .capacitorViewDidAppear, object: .none, queue: .none) { [weak self] _ in
self?.handleViewDidAppear(config: config)
Expand All @@ -29,29 +29,29 @@ public class StatusBar {
self?.handleViewWillTransition()
})
}

private func handleViewDidAppear(config: StatusBarConfig) {
setStyle(config.style)
setBackgroundColor(config.backgroundColor)
setOverlaysWebView(config.overlaysWebView)
}

private func handleViewWillTransition() {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
self?.resizeStatusBarBackgroundView()
self?.resizeWebView()
}
}

func setStyle(_ style: UIStatusBarStyle) {
bridge.statusBarStyle = style
}
func setBackgroundColor(_ color : UIColor) {

func setBackgroundColor(_ color: UIColor) {
backgroundColor = color
backgroundView?.backgroundColor = color
}

func setAnimation(_ animation: String) {
if animation == "SLIDE" {
bridge.statusBarAnimation = .slide
Expand Down Expand Up @@ -110,7 +110,7 @@ public class StatusBar {
height: getStatusBarFrame().size.height
)
}

func setOverlaysWebView(_ overlay: Bool) {
if overlay == isOverlayingWebview { return }
isOverlayingWebview = overlay
Expand All @@ -122,39 +122,39 @@ public class StatusBar {
}
resizeWebView()
}

private func resizeWebView() {
guard
let webView = bridge.webView,
let bounds = bridge.viewController?.view.window?.windowScene?.screen.bounds
else { return }
bridge.viewController?.view.frame = bounds
webView.frame = bounds
let statusBarHeight = getStatusBarFrame().size.height;
var webViewFrame = webView.frame;
let statusBarHeight = getStatusBarFrame().size.height
var webViewFrame = webView.frame

if isOverlayingWebview {
let safeAreaTop = webView.safeAreaInsets.top;
if (statusBarHeight >= safeAreaTop && safeAreaTop > 0) {
let safeAreaTop = webView.safeAreaInsets.top
if statusBarHeight >= safeAreaTop && safeAreaTop > 0 {
webViewFrame.origin.y = safeAreaTop == 40 ? 20 : statusBarHeight - safeAreaTop
} else {
webViewFrame.origin.y = 0
}
} else {
webViewFrame.origin.y = statusBarHeight;
webViewFrame.origin.y = statusBarHeight
}
webViewFrame.size.height -= webViewFrame.origin.y
webView.frame = webViewFrame
}

private func resizeStatusBarBackgroundView() {
backgroundView?.frame = getStatusBarFrame()
}

private func getStatusBarFrame() -> CGRect {
return UIApplication.shared.windows.first(where: { $0.isKeyWindow })?.windowScene?.statusBarManager?.statusBarFrame ?? .zero
}

private func initializeBackgroundViewIfNeeded() {
if backgroundView == nil {
backgroundView = UIView(frame: getStatusBarFrame())
Expand Down
23 changes: 11 additions & 12 deletions status-bar/ios/Sources/StatusBarPlugin/StatusBarPlugin.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,29 @@ public class StatusBarPlugin: CAPPlugin, CAPBridgedPlugin {
CAPPluginMethod(name: "show", returnType: CAPPluginReturnPromise),
CAPPluginMethod(name: "hide", returnType: CAPPluginReturnPromise),
CAPPluginMethod(name: "getInfo", returnType: CAPPluginReturnPromise),
CAPPluginMethod(name: "setOverlaysWebView", returnType: CAPPluginReturnPromise),
CAPPluginMethod(name: "setOverlaysWebView", returnType: CAPPluginReturnPromise)
]
private var statusBar: StatusBar?
private let statusBarVisibilityChanged = "statusBarVisibilityChanged"
private let statusBarOverlayChanged = "statusBarOverlayChanged"

override public func load() {
guard let bridge = bridge else { return }
statusBar = StatusBar(bridge: bridge, config: statusBarConfig())
}

private func statusBarConfig() -> StatusBarConfig {
var config = StatusBarConfig()
config.overlaysWebView = getConfig().getBoolean("overlaysWebView", config.overlaysWebView)
if let colorConfig = getConfig().getString("backgroundColor"), let color = UIColor.capacitor.color(fromHex: colorConfig)
{
if let colorConfig = getConfig().getString("backgroundColor"), let color = UIColor.capacitor.color(fromHex: colorConfig) {
config.backgroundColor = color
}
if let configStyle = getConfig().getString("style") {
config.style = style(fromString: configStyle)
}
return config
}

private func style(fromString: String) -> UIStatusBarStyle {
switch fromString.lowercased() {
case "dark", "lightcontent":
Expand Down Expand Up @@ -70,7 +69,7 @@ public class StatusBarPlugin: CAPPlugin, CAPBridgedPlugin {
}
call.resolve()
}

@objc func hide(_ call: CAPPluginCall) {
let animation = call.getString("animation", "FADE")
DispatchQueue.main.async { [weak self] in
Expand All @@ -80,7 +79,7 @@ public class StatusBarPlugin: CAPPlugin, CAPBridgedPlugin {
let dict = self?.toDict(info),
let event = self?.statusBarVisibilityChanged
else { return }
self?.notifyListeners(event, data: dict);
self?.notifyListeners(event, data: dict)
}
call.resolve()
}
Expand All @@ -94,11 +93,11 @@ public class StatusBarPlugin: CAPPlugin, CAPBridgedPlugin {
let dict = self?.toDict(info),
let event = self?.statusBarVisibilityChanged
else { return }
self?.notifyListeners(event, data: dict);
self?.notifyListeners(event, data: dict)
}
call.resolve()
}

@objc func getInfo(_ call: CAPPluginCall) {
DispatchQueue.main.async { [weak self] in
guard
Expand All @@ -118,11 +117,11 @@ public class StatusBarPlugin: CAPPlugin, CAPBridgedPlugin {
let dict = self?.toDict(info),
let event = self?.statusBarOverlayChanged
else { return }
self?.notifyListeners(event, data: dict);
self?.notifyListeners(event, data: dict)
}
call.resolve()
}

private func toDict(_ info: StatusBarInfo) -> [String: Any] {
return [
"visible": info.visible!,
Expand Down
2 changes: 1 addition & 1 deletion status-bar/ios/Sources/StatusBarPlugin/UIColor.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Capacitor

public extension CapacitorExtensionTypeWrapper where T: UIColor {

static func hex(fromColor: UIColor) -> String? {
var red: CGFloat = 0
var green: CGFloat = 0
Expand Down
4 changes: 4 additions & 0 deletions status-bar/src/definitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ declare module '@capacitor/cli' {
StatusBar?: {
/**
* Whether the statusbar is overlaid or not.
* For applications targeting Android 15, this property has no effect unless
* the property windowOptOutEdgeToEdgeEnforcement is added to the application layout file.
* Otherwise, the application assumes always overlays as true.
* More details in https://developer.android.com/reference/android/R.attr#windowOptOutEdgeToEdgeEnforcement
*
* @since 1.0.0
* @default true
Expand Down
Loading