jasonnam / astack

The Missing SwiftUI Adaptive and Accessible Stacks Library.

Welcome to AStack, a library bringing you adaptive and accessible SwiftUI stacks.

Introduction

AStack introduces four new SwiftUI views:

• AHStack
• AVStack
• LazyAHStack
• LazyAVStack

Their behavior is based on the environment's ContentSizeCategory and/or UserInterfaceSizeClass:

• when the content size category is one that is not associated with accessibility, they are equivalent to SwiftUI's counterparts
• when the content size category is one that is associated with accessibility, the views switch alignment (e.g. from horizontal to vertical)
• when the associated class size is .regular, they are equivalent to SwiftUI's counterparts
• when the associated class size is .compact, the views switch alignment (e.g. from horizontal to vertical)

By default all views observe just ContentSizeCategory, however this can be changed to observing either ContentSizeCategory or UserInterfaceSizeClass, both, or none via the observing parameter.

Usage

Use any AStack view as any other stack view:

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AHStack {
      ...
    }
  }
}

@available(macOS 11, iOS 14, watchOS 7, tvOS 14, *)
struct ContentView2: View {
  var body: some View {
    LazyAVStack {
      ...
    }
  }
}

Properties such as alignment and spacing can be customized:

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AHStack(
      hAlignment: .top,    // HStack alignment
      vAlignment: .leading // VStack alignment
    ) {
      ...
    }
  }
}

Examples

AHStack

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AHStack {
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("1")
      }
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("2")
      }.foregroundColor(.purple)
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("3")
      }.foregroundColor(.blue)
    }
  }
}

AVStack

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AVStack {
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("1")
      }
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("2")
      }.foregroundColor(.purple)
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("3")
      }.foregroundColor(.blue)
    }
  }
}

Installation

AStack is distributed using the Swift Package Manager. To install it into a project, follow this tutorial and use this repository URL: https://github.com/zntfdr/AStack.git.

Credits

AStack was built by Federico Zanetello as a component of Bangkok Metro.

Contributions and Support

All users are welcome and encouraged to become active participants in the project continued development — by fixing any bug that they encounter, or by improving the documentation wherever it’s found to be lacking.

If you'd like to make a change, please open a Pull Request, even if it just contains a draft of the changes you’re planning, or a test that reproduces an issue.

Thank you and please enjoy using AStack!