Skip to content

Instantly share code, notes, and snippets.

@benbacardi
Last active February 2, 2023 14:36
Show Gist options
  • Save benbacardi/4df235736f03cd4cda5cc32d828a9298 to your computer and use it in GitHub Desktop.
Save benbacardi/4df235736f03cd4cda5cc32d828a9298 to your computer and use it in GitHub Desktop.
SwiftUI Equal Width Icons
//
// EqualWidthIcons.swift
// From https://bencardy.co.uk/2023/02/02/swiftui-equal-width-icons/
//
// Created by Ben Cardy on 02/02/2023.
//
import SwiftUI
struct WhatsNewSection: View {
let icon: String
let iconColor: Color
let title: String
let summary: String
@Binding var iconWidth: CGFloat
var body: some View {
HStack(alignment: .top) {
Image(systemName: icon)
.font(.title)
.foregroundColor(iconColor)
.background {
GeometryReader { geo in
Color.clear.preference(key: EqualWidthIcons.IconWidthPreferenceKey.self, value: geo.size.width)
}
}
.frame(width: iconWidth)
VStack(alignment: .leading) {
Text(title)
.font(.headline)
Text(summary)
}
.fullWidth()
}
}
}
struct EqualWidthIcons: View {
@State private var iconWidth: CGFloat = 10
var body: some View {
VStack(spacing: 20) {
VStack {
Text("What's New!")
.font(.largeTitle)
.bold()
Text("Version 2023.01")
}
.padding(.bottom)
WhatsNewSection(icon: "star.circle.fill", iconColor: .yellow, title: "Star Ratings Toggle", summary: "If you believe all your pens are your favourite, you can now turn off star ratings via Settings.", iconWidth: $iconWidth)
WhatsNewSection(icon: "square.and.arrow.up.fill", iconColor: .green, title: "Share Sheet Fix", summary: "Fixed an issue where the date in your Currently Ink'd shared image would not display correctly.", iconWidth: $iconWidth)
WhatsNewSection(icon: "scroll.fill", iconColor: .blue, title: "Brand List Fix", summary: "Fixed issues with duplicate brands populating your Brand List.", iconWidth: $iconWidth)
WhatsNewSection(icon: "ladybug.fill", iconColor: .red, title: "Misc. Bug Fixes", summary: "Plenty of other minor improvements.", iconWidth: $iconWidth)
Spacer()
}
.padding()
.onPreferenceChange(EqualWidthIcons.IconWidthPreferenceKey.self) { value in
self.iconWidth = value
}
}
}
private extension EqualWidthIcons {
struct IconWidthPreferenceKey: PreferenceKey {
static let defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}
}
struct EqualWidthIcons_Previews: PreviewProvider {
static var previews: some View {
EqualWidthIcons()
}
}
struct WhatsNewGridRow: View {
let icon: String
let iconColor: Color
let title: String
let summary: String
var body: some View {
GridRow(alignment: .top) {
Image(systemName: icon)
.font(.title)
.foregroundColor(iconColor)
VStack(alignment: .leading) {
Text(title)
.font(.headline)
Text(summary)
}
.fullWidth()
}
}
}
struct EqualWidthIconsGrid: View {
var body: some View {
VStack(spacing: 20) {
VStack {
Text("What's New!")
.font(.largeTitle)
.bold()
Text("Version 2023.01")
}
.padding(.bottom)
Grid(horizontalSpacing: 10, verticalSpacing: 10) {
WhatsNewGridRow(icon: "star.circle.fill", iconColor: .yellow, title: "Star Ratings Toggle", summary: "If you believe all your pens are your favourite, you can now turn off star ratings via Settings.")
WhatsNewGridRow(icon: "square.and.arrow.up.fill", iconColor: .green, title: "Share Sheet Fix", summary: "Fixed an issue where the date in your Currently Ink'd shared image would not display correctly.")
WhatsNewGridRow(icon: "scroll.fill", iconColor: .blue, title: "Brand List Fix", summary: "Fixed issues with duplicate brands populating your Brand List.")
WhatsNewGridRow(icon: "ladybug.fill", iconColor: .red, title: "Misc. Bug Fixes", summary: "Plenty of other minor improvements.")
}
Spacer()
}
.padding()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment