@@ -43,7 +43,7 @@ dependencies: [
|:-----------------------------:|:-----------------------------:|:-----------------------------:|
| **Notch Devices** | **Dynamic Island Devices** | **Standard Devices** |
| Automatically positions buttons around the notch | Adapts to the Dynamic Island's dimensions | Falls back to standard positioning |
-| Works with iPhone X → iPhone 14 Series, iPhone 16e | Supports iPhone 14 Pro and newer | Compatible with older iPhones |
+| Works with iPhone X → iPhone 14 Series, iPhone 16e | Supports iPhone 14 Pro and newer | Compatible with older iPhones and all iPads |
| Applies device-specific adjustments | Uses precise measurements | Maintains consistent UI across all devices |
NotchMyProblem automatically detects the device type and adjusts the UI accordingly, ensuring your buttons are perfectly positioned regardless of the device model.
@@ -86,9 +86,9 @@ struct MyView: View {
---
-## **Why Padding?**
+## **Padding**
-Modern iPhones have notches, Dynamic Islands, and heavily rounded corners. If you place buttons or other UI elements too close to these cutouts you risk:
+Modern iPhones have Notches, Dynamic Islands, and heavily rounded corners. If you place buttons or other UI elements too close to these cutouts you risk:
- Elements appearing cramped or uncomfortably close to the cutout
- Parts of your UI being clipped by the curved screen edges
@@ -100,13 +100,9 @@ By adding padding that *scales* with the actual cutout dimensions, NotchMyProble
2. Never collides with the device’s rounded corners
3. Maintains a consistent, polished look on every supported iPhone
----
-
-## **Padding Customization**
-
-You can control three kinds of padding:
+### Controlling Padding
-1. **Cutout padding** – extra space _around_ the notch/island itself
+1. **Cutout padding** – extra space _around_ the display cut out
2. **Content padding** – extra space on either side of your HStack content
3. **Vertical padding** – extra space above and below your content
@@ -114,7 +110,7 @@ Use the `padding` parameter when initializing `CutoutAccessoryView`:
```swift
CutoutAccessoryView(
- padding: .auto, // default: cutoutW/8, contentW/4, verticalH*0.05
+ padding: .auto,
leadingContent: { /* … */ },
trailingContent:{ /* … */ }
)
@@ -123,7 +119,10 @@ CutoutAccessoryView(
### Available Modes
- **`.auto`**
- Applies recommended defaults based on the actual cutout size
+ Uses intelligent curves that adapt to cutout size. **Smaller cutouts get more padding, larger cutouts get less padding** - the opposite of simple percentage-based approaches. This ensures optimal spacing across all device types:
+ - Dynamic Island (narrow): Gets generous padding for breathing room
+ - iPhone notch (wide): Gets minimal padding since the cutout already creates natural spacing
+ - Uses inverse relationship: `padding = base - (cutoutWidth × slope)` with min/max bounds
- **`.none`**
No extra padding; your views will hug the safe-area edges exactly.
@@ -145,13 +144,13 @@ CutoutAccessoryView(
---
-## **Advanced Usage**
+## **Overrides**
-
-
-
Custom Overrides for API Inaccuracies
-
Some devices report incorrect notch dimensions through the API. Overrides correct the reported values to match actual device dimensions, ensuring consistent UI across all devices.
-
+
+
+Some devices report incorrect notch dimensions through the API. Overrides correct the reported values to match actual device dimensions, ensuring consistent UI across all devices.
+
+NotchMyProblem has overrides by **default** already, devices like the iPhone 16e require this to correctly proportion elements, you do not need to figure these out for yourself, but you can create your own adjustments, or configure other devices
### 1. Global Overrides (App-wide)
@@ -199,48 +198,15 @@ let customRect = NotchMyProblem.shared.adjustedExclusionRect(using: myOverrides)
---
-## **How It Works**
-
-1. Uses Objective-C runtime to safely fetch the exclusion area
-2. Falls back gracefully if the API is unavailable
-3. Applies device-specific scale/height overrides
-4. Provides SwiftUI modifiers and environment overrides for fine-grained control
-5. Includes logging (iOS 14+ `Logger`, iOS 13 `os_log`)
-
----
-
-## **Compatibility**
-
-- iOS 13.0+
-- All notched iPhones (X → 14, 16e…)
-- Dynamic Island devices (14 Pro, newer)
-- Fallback for devices without cutouts
-
----
-
## **Logging**
Filter Console with subsystem `com.notchmyproblem` to see debug/info/error logs.
---
-## **License**
-
-MIT — see [LICENSE.md](LICENSE.md)
-
-## **Contributing**
-
-Please review [CONTRIBUTING.md](CONTRIBUTING.md) before opening PRs.
-
-## **Support**
-
-If you like it, please give a ⭐️
-
----
-
# Acknowledgments
-- Inspired by [TopNotch](https://github.com/samhenrigold/TopNotch)
+- [TopNotch](https://github.com/samhenrigold/TopNotch)
- Uses private APIs safely—use at your own risk
---
diff --git a/Sources/NotchMyProblem/CutoutAccessoryView.swift b/Sources/NotchMyProblem/CutoutAccessoryView.swift
index b27a281..b3ba4d2 100644
--- a/Sources/NotchMyProblem/CutoutAccessoryView.swift
+++ b/Sources/NotchMyProblem/CutoutAccessoryView.swift
@@ -46,6 +46,9 @@ public enum CutoutAccessoryPadding {
)
}
+
+
+
/// A view that positions content around the physical topology of the device's top area,
/// adapting to notches, Dynamic Islands, and other screen cutouts automatically.
///
@@ -89,18 +92,22 @@ public struct CutoutAccessoryView
:
public var body: some View {
GeometryReader { geometry in
- // Detect device topology based on safe area height
+ // MARK: - Device Detection
let statusBarHeight = geometry.safeAreaInsets.top
let hasTopCutout = statusBarHeight > 40
- let exclusionWidth = getAdjustedExclusionRect()?.width ?? geometry.size.width * 0.4
-
+ // MARK: - Cutout Dimensions
+ let exclusionWidth = getAdjustedExclusionRect()?.width ?? (geometry.size.width - 180) // Fallback for non-cutout devices (iPad, iPhone SE)
let exclusionHeight = notchMyProblem.exclusionRect?.height ?? 0
-
+
+ // MARK: - Padding Calculations
let (cutoutPadding, contentPadding, verticalPadding): (CGFloat, CGFloat, CGFloat) = {
switch padding {
case .auto:
- return (exclusionWidth / 6, exclusionWidth / (3), exclusionHeight * 0.1)
+ let cutoutPadding = max(5, min(20, 45 - (exclusionWidth * 0.18)))
+ let contentPadding = max(2, min(40, 85 - (exclusionWidth * 0.35)))
+ let verticalPadding = exclusionHeight * 0.1
+ return (cutoutPadding, contentPadding, verticalPadding)
case .none:
return (0, 0, 0)
case .custom(let cutout, let content, let vertical):
@@ -108,25 +115,39 @@ public struct CutoutAccessoryView:
}
}()
+ // MARK: - Top Positioning
+ let topPadding: CGFloat = {
+ let minY = notchMyProblem.exclusionRect?.minY ?? (hasTopCutout ? 0 : 5)
+
+ if minY == 0 {
+ // Notched device - cutout touches bezel, need spacing
+ return hasTopCutout ? (exclusionHeight / 3) : 5
+ } else {
+ // Island device - cutout floats, align to its Y position
+ return minY
+ }
+ }()
+
+ // MARK: - Layout
HStack(spacing: 0) {
- // Leading content, aligned appropriately
+ // Leading content
leadingContent
.frame(maxWidth: .infinity, alignment: hasTopCutout ? .center : .leading)
- // Space for the device's top cutout if present
+ // Space for the device's top cutout
if exclusionWidth > 0 {
Color.clear
.frame(width: exclusionWidth)
.padding(.horizontal, cutoutPadding)
}
- // Trailing content, aligned appropriately
+ // Trailing content
trailingContent
.frame(maxWidth: .infinity, alignment: hasTopCutout ? .center : .trailing)
}
.padding(.vertical, verticalPadding)
.frame(height: hasTopCutout ? notchMyProblem.exclusionRect?.height ?? statusBarHeight : 30)
- .padding(.top, notchMyProblem.exclusionRect?.minY ?? (hasTopCutout ? 0 : 5))
+ .padding(.top, topPadding)
.padding(.horizontal, hasTopCutout ? contentPadding : 5)
.edgesIgnoringSafeArea(.all)
}
@@ -151,7 +172,7 @@ public struct CutoutAccessoryView:
NavigationView {
ScrollView {
VStack(alignment: .leading) {
- Text("Recommended for most cases. Adds horizontal padding to both the cutout area and the overall content, and vertical padding based on the cutout height. Ensures content doesn't touch the notch, device corners, or crowd the top edge.")
+ Text("Recommended for most cases. Uses intelligent adaptive padding that gives smaller cutouts (Dynamic Island) more breathing room and larger cutouts (notches) less padding. Automatically handles positioning differences between notched and island devices.")
.font(.subheadline)
.padding(.horizontal)
}
@@ -161,14 +182,20 @@ public struct CutoutAccessoryView:
CutoutAccessoryView(
padding: .auto,
leadingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Leading").font(.footnote).foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Leading")
+ .notchMyProblem_Example_Button()
+ }
},
trailingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Trailing").font(.footnote).foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Trailing")
+ .notchMyProblem_Example_Button(highlighted: true)
+ }
}
)
}
@@ -189,14 +216,20 @@ public struct CutoutAccessoryView:
CutoutAccessoryView(
padding: .none,
leadingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Leading").foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Leading")
+ .notchMyProblem_Example_Button()
+ }
},
trailingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Trailing").foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Trailing")
+ .notchMyProblem_Example_Button(highlighted: true)
+ }
}
)
}
@@ -230,14 +263,20 @@ public struct CutoutAccessoryView:
vertical: { $0 * 0.2 }
),
leadingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Leading").foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Leading")
+ .notchMyProblem_Example_Button()
+ }
},
trailingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Trailing").foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Trailing")
+ .notchMyProblem_Example_Button(highlighted: true)
+ }
}
)
}
@@ -265,16 +304,36 @@ public struct CutoutAccessoryView:
}
CutoutAccessoryView(
leadingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Leading").foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Leading")
+ .notchMyProblem_Example_Button()
+ }
},
trailingContent: {
- Capsule()
- .fill(.red)
- .overlay(Text("Trailing").foregroundColor(.white))
+ Button{
+
+ } label: {
+ Text("Trailing")
+ .notchMyProblem_Example_Button(highlighted: true)
+ }
}
)
.notchOverride(.series(prefix: "iPhone14", scale: 0.6, heightFactor: 0.6))
}
}
+
+extension View{
+ // pls ignore shody code i have to make this display on iOS 13 too 💔
+ // i will make better examples later (like ones seen online)
+ func notchMyProblem_Example_Button(highlighted: Bool = false) -> some View{
+ self
+ .fixedSize(horizontal: true, vertical: false)
+ .frame(maxWidth: .infinity, maxHeight: .infinity)
+ .font(.footnote.weight(.semibold))
+ .foregroundColor(highlighted ? Color.white : Color.primary)
+ .background(highlighted ? Color(red: 5/255, green: 160/255, blue: 190/255) : Color.gray.opacity(0.3))
+ .clipShape(Capsule())
+ }
+}
diff --git a/Sources/NotchMyProblem/NotchMyProblem.swift b/Sources/NotchMyProblem/NotchMyProblem.swift
index 9cb971e..b91a351 100644
--- a/Sources/NotchMyProblem/NotchMyProblem.swift
+++ b/Sources/NotchMyProblem/NotchMyProblem.swift
@@ -227,7 +227,8 @@ public final class NotchMyProblem: Sendable, ObservableObject {
/// Global overrides that apply to all instances
public static var globalOverrides: [DeviceOverride] = [
.series(prefix: "iPhone13", scale: 0.95, heightFactor: 1.0, radius: 27), // iPhone 12 series
- .series(prefix: "iPhone14", scale: 0.75, heightFactor: 0.75, radius: 24) // iPhone 13/14 series
+ .series(prefix: "iPhone14", scale: 0.75, heightFactor: 0.75, radius: 24), // iPhone 13/14 series
+ .series(prefix: "iPhone17,5", scale: 0.75, heightFactor: 0.75, radius: 24) // iPhone 13/14 series
]
/// Instance-specific overrides that only apply to this instance
diff --git a/assets/Post.png b/assets/Post.png
deleted file mode 100644
index 2486901..0000000
Binary files a/assets/Post.png and /dev/null differ
diff --git a/assets/Post2x.jpeg b/assets/Post2x.jpeg
deleted file mode 100644
index b28c86a..0000000
Binary files a/assets/Post2x.jpeg and /dev/null differ
diff --git a/assets/icon.png b/assets/icon.png
index d6d61c2..77f06c6 100644
Binary files a/assets/icon.png and b/assets/icon.png differ
diff --git a/assets/none.png b/assets/none.png
index dfcf37b..74c5a56 100644
Binary files a/assets/none.png and b/assets/none.png differ
diff --git a/assets/notchError.png b/assets/notchError.png
index 0a82f49..6fd1464 100644
Binary files a/assets/notchError.png and b/assets/notchError.png differ
diff --git a/assets/withIsland.png b/assets/withIsland.png
index 3f6ac7f..4fcf212 100644
Binary files a/assets/withIsland.png and b/assets/withIsland.png differ
diff --git a/assets/withNotch.png b/assets/withNotch.png
index 769ed91..3b4bd99 100644
Binary files a/assets/withNotch.png and b/assets/withNotch.png differ
+