231025_ 공유할 내용

[woozoobro]

1. 정리내용은 미디엄에

주간 Steve 뉴스 23.10.23. 1. d2 language | by woozoobro | Oct, 2023 | Medium

---

2. Creating a Design System with SwiftUI

https://www.youtube.com/watch?v=Z7rJKr6Jlho&t=5s

What is Design System?

• Process
• Documentation
• Common resources
• Functional libraries

버튼을 만들어달라는 요청이 왔다고 해보자.

struct PrimaryButton: View {
	let title: String
	let action: () -> Void
	
	var body: some View {
		Button(title, action: action)
			.font(.system(size: 60))
			.padding(32)
			.background(.blue, in: RoundedRectangle(cornerRadius: 16))
			.foregroundColor(.white)
	}
}

아 맞다!! 이미지도 넣어주세요

struct PrimaryImageButton: View {
	let image: Image
	let action: () -> Void
	
	var body: some View {
		Button {
			action()
		} label: {
			image
		}
		.font(.system(size: 60))
		.padding(32)
		.background(.blue, in: RoundedRectangle(cornerRadius: 16))
		.foregroundColor(.white)
	}
}

여기서 뭐가 문제인가?

• Multiple places to change for a single style change
• Isn't general for any type of content
• Buttons aren't easily discoverable

버튼 스타일을 활용해볼까요?

public protocol ButtonStyle {
	associatedtype Body: View
	typealias Configuration = ButtonStyleConfiguration
	@ViewBuilder func makeBody(configuration: Configuration) -> Body
}

struct PrimaryButtonStyle: ButtonStyle {
	func makeBody(configuration: Configuration) -> some View {
		configuration.label
			.font(.system(size: 60))
			.padding(32)
			.background(.blue, in: RoundedRectangle(cornerRadius: 16))
			.foregroundColor(.white)
	}
}

Button("Press me",
	  action: {
	  
	  })
	  .buttonStyle(PrimaryButtonStyle())

아참! 찾기도 쉬워야겠죠

extension ButtonStyle where Self == PrimaryButtonStyle {
	static var primary: Self { Self() }
}

Button("Press me",
	  action: {
	  
	  })
	  .buttonStyle(.primary)

요렇게 .primary로 넘겨줄 수 있게 됐네요

새로운 기획이 도달한다...! 이미지랑 버튼 사이에 spacing을 넣어야 한대요

struct TextImageButton: View {
	let title: String
	let image: Image
	let action: () -> Void
	var body: some View {
		Button {
			action()
		} label: {
			HStack(spacing: 100) {
				image
				Text(title)
			}
		}
	}
}

TextImageButton(title: "Text",
			   image: Image(systemName: "square.and.arrow.up"), action: { })
			   .buttonStyle(.primary)

Button의 initialiser는 뭐지?

Button은 label type을 사용합니다.

extension Button where Label == SwiftUI.Label<Text, Image> {
	public init(
		_ titleKey: LocalizedStringKey,
		systemImage: String,
		action: @escaping () -> Void
	)
}

What is a Label?

public struct Label<Title: View, Icon: View>: View {
	public init(
		@ViewBuilder title: () -> Title,
		@ViewBuilder icon: () -> Icon
	)
	
	public typealias Body = some View
	@MainActor public var body: some View { get }
}

Label has a short initialiser for Text and Image

extension Label where Title == Text, Icon == Image {
	public init(_ titleKey: LocalizedStringKey, systemImage name: String)
}

LabelStyle도 있다

public protocol LabelStyle {
	associatedtype Body: View
	typealias Configuration = LabelStyleConfiguration
	
	@ViewBuilder func makeBody(configuration: Configuration) -> Body
}

Creating a label style

struct PrimaryButtonLabelStyle: LabelStyle {
	func makeBody(configuration: Configuration) -> some View {
		HStack(spacing: 100) {
			configuration.icon
			configuration.title
		}
	}
}

Apply a label style

Label("Text", systemImage: "square.and.aroow.up")
	.labelStyle(PrimaryButtonLabelStyle())

Use the label style in our primary button style

struct PrimaryButtonStyle: ButtonStyle {
	func makeBody(configuration: Configuration) -> some View {
		configuration.label
			.font(.system(size: 60))
			.padding(32)
			.background(.blue, in: RoundedRectangle(cornerRadius: 16))
			.foregroundColor(.white)
			.labelStyle(PrimaryButtonLabelStyle())
	}
}

Can we have load of lines in our button?

struct VerticalTextButton: View {
	let title: String
	let subtitle: String
	let caption: String
	let action: () -> Void
	
	var body: some View {
		Button {
			action()
		} label: {
			VStack(alignment: .leading) {
				Text(title)
					.font(.system(size: 60))
				Text(subtitle)
					.font(.system(size: 45))
				Text(caption)
					.font(.system(size: 30))
			}
		}
	}
}

What if different button styles want to style the title and subtitle differently?

Create a semantic container

struct Detail<Title: View, Subtitle: View, Caption: View>: View {
	private let title: Title
	private let subtitle: Subtitle
	private let caption: Caption
	
	init(
		@ViewBuilder title: () -> Title,
		@ViewBuilder subtitle: () -> Subtitle,
		@ViewBuilder caption: () -> Caption
	) {
		self.title = title()
		self.subtitle = subtitle()
		self.caption = caption()
	}
	
	var body: some View {
		VStack {
			title
			subtitle
			caption
		}
	}
}

Style the semantic container

protocol DetailStyle: DynamicProperty {
	typealias Configuration = DetailStyleConfiguration
	associatedtype Body: View
	
	@Viewbuilder func makeBody(configuration: Configuration) -> Body
}

DynmaicProperty가 뷰 업뎃해줌

What's in a configuaration anyway?

struct DetailStyleConfiguartion {
	struct Title: View {
		let body: AnyView
	}
	
	struct Subtitle: View {
		let body: AnyView
	}
	
	struct Caption: View {
		let body: AnyView
	}
	
	let title: Title
	let subtitle: Subtitle
	let caption: Caption
	
	fileprivate init(title: some View, subtitle: some View, caption: some View) {
		self.title = Title(body: AnyView(title))
		self.subtitle = Subtitle(body: AnyView(subtitle))
		self.caption = Caption(body: AnyView(caption))
	}
}

Set the style in the environment

struct DetailStyleKey: EnvironmentKey {
	static var defaultValue: any DetailStyle = PlainDetailStyle()
}

extension EnvironmentValues {
	fileprivate var detailStyle: any DetailStyle {
		get { self[DetailStyleKey.self] }
		set { self[DetailStyleKey.self] = newValue }
	}
}

extension View {
	func detailStyle(_ style: some DetailStyle) -> some View {
		environment(\.detailStyle, style)
	}
}

Provide a default style

struct PlainDetailStyle: DetailStyle {
	func makeBody(configuration: Configuration) -> some View {
		VStack {
			configuration.title
				.font(.system(size: 60, weight: .bold))
			configuration.subtitle
				.font(.system(size: 45))
			configuration.caption
				.font(.system(size:30, weight: .light))
		}
	}
}

Resolve the style

extension DetailStyle {
	fileprivate func resolve(configuration: Configuration) -> some View {
		ResolveDetailStyle(style: self, configuration: configuration)
	}
}

private struct ResolvedDetailStyle<Style: DetailStyle>: View {
	let style: Style
	let configuration: Style.Configuration
	
	var body: some View {
		style.makeBody(configuration: configuration)
	}
}

Use the style in the Detail View

struct Detail<Title: View, Subtitle: View, Caption: View>: View {
	@Environment(\.detailStyle) private var style
	private let title: Title
	private let subtitle: Subtitle
	private let caption: Caption
	
	init(
		@ViewBuilder title: () -> Title,
		@ViewBuilder subtitle: () -> Subtitle,
		@ViewBuilder caption: () -> Caption
	) {
		self.title = title()
		self.subtitle = subtitle()
		self.caption = caption()
	}
	
	var body: some View {
		let configuration = DetailStyleConfiguration(
			title: title,
			subtitle: subtitle
			caption: caption)
		AnyView(style: resolve(configuration: configuration))
	}
}

DetailStyle with its default style

Detail {
	Text("Title")
} subtitle: {
	Text("Subtitle")
} caption: {
	Text("Caption")
}

Style Detail inside PrimaryButtonStyle

struct PrimaryButtonDetailStyle: DetailStyle {
	func makeBody(configuration: Configuration) -> some View {
		VStack(alignment: .leading) {
			configuration.title
				.font(.system(size: 60, weight: .bold))
			
			configuration.subtitle
				.font(.system(size: 45))
			
			configuration.title
				.font(.system(size: 30, weight: .light))
		}
	}
}

Style Detail inside PrimaryButtonStyle

struct PrimaryButtonStyle: ButtonStyle {
	func makeBody(configuration: Configuration) -> some View {
		configuration.label
			.font(.system(size: 60))
			.padding(32)
			.background(.blue, in: RoundedRectangle(cornerRadius: 16))
			.foregroundColor(.white)
			.labelStyle(PrimaryButtonLabelStyle())
			.detailStyle(PrimaryButtonDetailStyle())
	}
}

Button with the detail style

Button {
		
} label: {
	Detail {
		Text("Title")
	} subtitle: {
		Text("Subtitle")
	} caption: {
		Text("Caption")
	}
}
.buttonStyle(.primary)

Create a Button convenience initialiser

extension Button where Label == Detail<Text, Text, Text> {
	init(
		title: LocalizedStringKey,
		subtitle: LocalizedStringKey,
		caption: LocalizedStringKey,
		action: @escaping () -> Void
	) {
		self.init(action: action) {
			Detail {
				Text(title)
			} subtitle: {
				Text(subtitle)
			} caption: {
				Text(caption)
			}
		}
	}
}

Button(
	title: "Title",
	subtitle: "Subtitle",
	caption: "Caption",
	action: {
	}
)
.buttonStyle(.primary)

Nested 된 Button의 간편한 initialiser

extension Button where Label == SwiftUI.Label<Detail<Text, Text, Text>, Image> {
	init(
		title: LocalizedStringKey,
		subtitle: LocalizedStringKey,
		caption: LocalizedStringKey,
		systemImage: String,
		action: @escaping () -> Void
	) {
		self.init(action: action) {
			Label {
				Detail {
					Text(title)
				} subtitle: {
					Text(subtitle)
				} caption: {
					Text(caption)
				}
			} icon: {
				Image(systemName: systemImage)
			}
		}
	}
}

What if we don't want a caption

just put EmptyView()

Summary

• Prefer providing custom styles over views
• Nest style to customise for different contexts
• Create your own stylable semantic containers
• Add initialisers to extend standard types