├── .gitignore ├── LICENSE ├── Package.swift ├── README.md ├── Screenshots ├── ios.png ├── macos.png └── watchos.png └── Sources └── Expandable └── Expandable.swift /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /.build 3 | /Packages 4 | xcuserdata/ 5 | DerivedData/ 6 | .swiftpm/configuration/registries.json 7 | .swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata 8 | .netrc 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Ryan Ashcraft 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version: 6.0 2 | // The swift-tools-version declares the minimum version of Swift required to build this package. 3 | 4 | import PackageDescription 5 | 6 | let package = Package( 7 | name: "Expandable", 8 | platforms: [.iOS(.v16), .watchOS(.v9), .macOS(.v13)], 9 | products: [ 10 | .library( 11 | name: "Expandable", 12 | targets: ["Expandable"] 13 | ), 14 | ], 15 | targets: [ 16 | .target(name: "Expandable"), 17 | ] 18 | ) 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Expandable 2 | 3 | ## Overview 4 | 5 | This package provides a customizable, cross-platform SwiftUI view that mimics the expandable app description UI found in the App Store. 6 | 7 | ## Features 8 | 9 | - Cross platform: iOS 16, watchOS 9, macOS 13 10 | - No UIKit dependency 11 | - No external dependencies 12 | - Ergonomic, SwiftUI-y API 13 | - Customizable expand button 14 | - VoiceOver and Dynamic Type support 15 | - Right-to-left (RTL) layout support 16 | 17 | ## Installation 18 | 19 | Add this package to your project using Swift Package Manager: 20 | 21 | 1. In Xcode, go to **File > Add Packages...** 22 | 2. Enter the repository URL or path for this package. 23 | 3. Add the package to your project. 24 | 25 | Alternatively, add the following to your `Package.swift` dependencies: 26 | 27 | ```swift 28 | dependencies: [ 29 | .package(url: "https://github.com/ryanashcraft/Expandable.git", from: "1.0.0") 30 | ] 31 | ``` 32 | 33 | ## Screenshots 34 | 35 | ### iOS 36 | iOS 37 | 38 | ### macOS 39 | macOS 40 | 41 | ### watchOS 42 | watchOS 43 | 44 | ## Usage 45 | 46 | Below is an example of how to use the Expandable view in SwiftUI. 47 | 48 | ```swift 49 | import Expandable 50 | import SwiftUI 51 | 52 | struct ContentView: View { 53 | var body: some View { 54 | ScrollView { 55 | Expandable { 56 | Text("Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.") 57 | } buttonLabel: { 58 | Text("more") 59 | } 60 | .lineLimit(3) 61 | } 62 | } 63 | } 64 | ``` 65 | 66 | ## License 67 | 68 | This package is released under the MIT License. See [LICENSE](/LICENSE) for details. 69 | 70 | -------------------------------------------------------------------------------- /Screenshots/ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryanashcraft/Expandable/7d0b52343bf87430ced6f272daa93f2a2ff60e2d/Screenshots/ios.png -------------------------------------------------------------------------------- /Screenshots/macos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryanashcraft/Expandable/7d0b52343bf87430ced6f272daa93f2a2ff60e2d/Screenshots/macos.png -------------------------------------------------------------------------------- /Screenshots/watchos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryanashcraft/Expandable/7d0b52343bf87430ced6f272daa93f2a2ff60e2d/Screenshots/watchos.png -------------------------------------------------------------------------------- /Sources/Expandable/Expandable.swift: -------------------------------------------------------------------------------- 1 | import SwiftUI 2 | 3 | public struct Expandable: View { 4 | @Environment(\.lineLimit) var lineLimit 5 | 6 | /// Wrapped contents. 7 | private let contents: () -> Contents 8 | 9 | /// Label for the expand button. 10 | private let buttonLabel: () -> ButtonLabel 11 | 12 | /// Width of the gradient placed on the leading edge of the expand button. 13 | private let gradientWidth: Double = 60 14 | 15 | @State private var isExpanded: Bool = false 16 | 17 | /// Measured height of the contents when truncated. 18 | @State private var truncatedHeight: CGFloat = 0 19 | 20 | /// Measured height of the contents when untruncated. 21 | @State private var fullHeight: CGFloat = 0 22 | 23 | var isTruncated: Bool { 24 | truncatedHeight < fullHeight 25 | } 26 | 27 | public init(@ViewBuilder _ contents: @escaping () -> Contents, @ViewBuilder buttonLabel: @escaping () -> ButtonLabel) { 28 | self.contents = contents 29 | self.buttonLabel = buttonLabel 30 | } 31 | 32 | var expandButtonContents: some View { 33 | ZStack { 34 | // Use space for vertical alignment when the `expandButtonLabel` is shorter than the line height 35 | Text(" ") 36 | .hidden() 37 | 38 | buttonLabel() 39 | } 40 | } 41 | 42 | var expandButton: some View { 43 | Button { 44 | withAnimation { 45 | self.isExpanded = true 46 | } 47 | } label: { 48 | expandButtonContents 49 | } 50 | .buttonStyle(.borderless) 51 | .tint(.accentColor) 52 | .accessibilityHidden(true) 53 | } 54 | 55 | var expandButtonCutout: some View { 56 | Color.clear 57 | .overlay(alignment: .bottomTrailing) { 58 | expandButtonContents 59 | .opacity(0) 60 | .overlay(Color.black) 61 | .overlay(alignment: .leading) { 62 | LinearGradient( 63 | gradient: Gradient( 64 | stops: [ 65 | .init(color: Color.clear, location: 0), 66 | .init(color: Color.black, location: 1), 67 | ] 68 | ), 69 | startPoint: .leading, 70 | endPoint: .trailing 71 | ) 72 | .frame(width: gradientWidth) 73 | .offset(x: -gradientWidth) 74 | .flipsForRightToLeftLayoutDirection(true) 75 | } 76 | } 77 | } 78 | 79 | var measuredContents: some View { 80 | ZStack(alignment: .top) { 81 | // Measure the truncated height 82 | contents() 83 | .lineLimit(lineLimit) 84 | .frame(maxWidth: .infinity, alignment: .leading) 85 | .fixedSize(horizontal: false, vertical: true) 86 | .onGeometryChange(for: CGFloat.self) { proxy in 87 | proxy.frame(in: .local).size.height 88 | } action: { newValue in 89 | self.truncatedHeight = newValue 90 | } 91 | .hidden() 92 | 93 | // Measure the untruncated height 94 | contents() 95 | .lineLimit(nil) 96 | .frame(maxWidth: .infinity, alignment: .leading) 97 | .fixedSize(horizontal: false, vertical: true) 98 | .onGeometryChange(for: CGFloat.self) { proxy in 99 | proxy.frame(in: .local).size.height 100 | } action: { newValue in 101 | self.fullHeight = newValue 102 | } 103 | .hidden() 104 | } 105 | } 106 | 107 | public var body: some View { 108 | ZStack(alignment: .bottomTrailing) { 109 | contents() 110 | .lineLimit(isExpanded ? nil : lineLimit) 111 | .transaction { $0.animation = nil } 112 | .frame(maxWidth: .infinity, alignment: .leading) 113 | .invertedMask { 114 | if !isExpanded && isTruncated { 115 | expandButtonCutout 116 | } 117 | } 118 | 119 | if isTruncated, !isExpanded { 120 | expandButton 121 | } 122 | } 123 | .accessibilityAction { 124 | if isTruncated, !isExpanded { 125 | withAnimation { 126 | self.isExpanded.toggle() 127 | } 128 | } 129 | } 130 | .background { 131 | measuredContents 132 | } 133 | } 134 | } 135 | 136 | extension View { 137 | @inlinable 138 | func invertedMask( 139 | alignment: Alignment = .center, 140 | @ViewBuilder _ mask: () -> Mask 141 | ) -> some View { 142 | self.mask { 143 | Rectangle() 144 | .overlay(alignment: alignment) { 145 | mask() 146 | .blendMode(.destinationOut) 147 | } 148 | } 149 | } 150 | } 151 | 152 | #Preview { 153 | ScrollView { 154 | Expandable { 155 | Text("Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.") 156 | } buttonLabel: { 157 | Text("more") 158 | } 159 | .lineLimit(3) 160 | .padding() 161 | 162 | Expandable { 163 | Text("هذه فقرة نصية طويلة تستخدم لاختبار عرض النصوص في التطبيقات التي تدعم اللغات من اليمين إلى اليسار. من المهم أن يتم التعامل مع الأحرف والمسافات والتنسيقات بشكل صحيح. يجب أن تكون الواجهة قادرة على التعامل مع نصوص متعددة الأسطر بشكل جيد، بما في ذلك الحالات التي يكون فيها النص طويلاً جدًا ويحتاج إلى قطع أو تقليم.") 164 | } buttonLabel: { 165 | Image(systemName: "ellipsis") 166 | } 167 | .lineLimit(3) 168 | .padding() 169 | .environment(\.layoutDirection, .rightToLeft) 170 | } 171 | } 172 | --------------------------------------------------------------------------------