Expose layout margins and readable content width to SwiftUI's Views

Overview

SwiftUI Layout Guides

This micro-library exposes UIKit's layout margins and readable content guides to SwiftUI.

Usage

Make a view fit the readable content width

Simply call the fitToReadableContentWidth() modifier:

List {
 ForEach() {
   Cell()
     .fitToReadableContentWidth()
 }
}

Expose the layout margins in a block

Wrap your view in the WithLayoutMargins view. The initializer supports two variants: one closure without argument and one closure with a EdgeInsets argument. In this last case, the insets correspond to the layout margins for the content:

WithLayoutMargins { layoutMarginsInsets in
 Text("ABC")
   .padding(.leading, layoutMarginsInsets.leading) 
}

Expose layout margins and readable content guides in a view

You need two wrap your view in WithLayoutMargins (you can use the argument-less closure). This will populate the content's Environment with the layout margins and readable content in the form of insets.

WithLayoutMargins {
 Content()
}

struct Content: View {
  @Environment(\.layoutMarginsInsets) var layoutMarginsInsets
  @Environment(\.readableContentInsets) var readableContentInsets
  var body: some View {
    Text("ABC")
      .padding(.leading, layoutMarginsInsets.leading)
      
  }
}

These insets are only valid for the bounds of the root content view. Using them deeper in the hierachy may lead to insconsitent results and you should use the measureLayoutMargins() modifier if you want to refresh the insets for the target view.

Installation

Add .package(url: "https://github.com/tgrapperon/swiftui-layout-guides", from: "0.0.1") to your Package dependencies, and then

.product(name: "SwiftUILayoutGuides", package: "swiftui-layout-guides")

to your target's dependencies.

You might also like...
AppStoreClone - Understanding the complex layout of app store using UICompositional layout in swift
AppStoreClone - Understanding the complex layout of app store using UICompositional layout in swift

AppStoreClone Understanding the complex layout of app store using UICompositiona

A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewFlowLayout.
A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewFlowLayout.

WrapLayout A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewF

Component containing supplementary content that are anchored to the bottom of the screen.
Component containing supplementary content that are anchored to the bottom of the screen.

BottomSheetController UIKit component containing supplementary content that are anchored to the bottom of the screen. Requirements Installation Swift

FlexiblePickerExample - Example of flexible picker that automatically layouts its own content

Flexible Picker The implementation of custom Flexible Picker. Thanks to that vie

✂ Easy to use and flexible library for manually laying out views and layers for iOS and tvOS. Supports AsyncDisplayKit.

ManualLayout Table of Contents Installation Usage API Cheat Sheet Installation Carthage Add the following line to your Cartfile. github "isair/ManualL

Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax. Supports iOS and OSX Auto Layout

Masonry Masonry is still actively maintained, we are committed to fixing bugs and merging good quality PRs from the wider community. However if you're

Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Not Apple Autolayout wrapper. Provides placeholders. Linux support.
Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Not Apple Autolayout wrapper. Provides placeholders. Linux support.

CGLayout Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Has cross-hierarchy coordinate space. Implemen

Compose is a library that helps you compose complex and dynamic views.

Compose is a data driven library that will help compose your complex and dynamic Views. It helps you create complex and dynamic Views using easy and s

An experiment creating a particle emitter using the new TimelineView and Canvas views in SwiftUI
An experiment creating a particle emitter using the new TimelineView and Canvas views in SwiftUI

Particle Emitter An experiment creating a particle emitter using the new Timelin

Comments
  • Fails to update with NavigationView sidebar toggling on iPad

    Fails to update with NavigationView sidebar toggling on iPad

    Using fitToReadableContentWidth, toggling the sidebar on iPad doesn't update padding until the screen is otherwise re-rendered after user interaction

    (Otherwise great lib!)

    opened by aehlke 2
  • Navigation title alignment

    Navigation title alignment

    Here's another one I'm working on via UINavigationBar.appearance(whenContainedInInstancesOf ...) and a hosting container - insetting large navigation titles to match the readable content guide. I may have a solution (just having issues with it updating after initial setting) but not integrated into this library.

    opened by aehlke 2
Releases(0.0.4)
Owner
Thomas Grapperon
Thomas Grapperon
Content Hugging Priority settings using Auto Layout

AutoLayoutContentHugging Swift 5 and Xcode 12. Content Hugging Priority settings using Auto Layout. Content Hugging Priority give you granular control

Camila Rodrigues 0 Jan 21, 2022
Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

IBRAHIM YILMAZ 2 Jan 31, 2022
A Swift utility to make updating table views/collection views trivially easy and reliable.

ArrayDiff An efficient Swift utility to compute the difference between two arrays. Get the removedIndexes and insertedIndexes and pass them directly a

Adlai Holler 100 Jun 5, 2022
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

layoutBox 2.1k Jan 2, 2023
Auto Layout (and manual layout) in one line.

Auto Layout (and manual layout) in one line. Quick Look view.bb.centerX().below(view2).size(100) It’s equivalent to iOS 9 API: view.centerXAnchor.cons

Javier Zhang 74 Oct 19, 2022
SwiftUI views that arrange their children in a flow layout.

SwiftUI Flow SwiftUI views that arrange their children in a flow layout. HFlow A view that arranges its children in a horizontal flow. Usage ScrollVie

Ciaran O'Brien 114 Jan 5, 2023
SwiftUI views that arrange their children in a Pinterest-like layout

SwiftUI Masonry SwiftUI views that arrange their children in a Pinterest-like layout. HMasonry A view that arranges its children in a horizontal mason

Ciaran O'Brien 88 Dec 27, 2022
Reframing SwiftUI Views. A collection of tools to help with layout.

Overview A Swift Package with a collection of SwiftUI framing views and tools to help with layout. Size readers like WidthReader, HeightReader, and on

Ryan Lintott 84 Dec 16, 2022
Arrange views in your app’s interface using layout tools that SwiftUI provides.

Composing custom layouts with SwiftUI Arrange views in your app's interface using layout tools that SwiftUI provides. Overview This sample app demonst

Apple Sample Code 0 Jun 9, 2022
Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

Malith Nadeeshan 1 Jan 16, 2022