Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Text Alignment Control made in SwiftUI
//
// AlignmentControl.swift
// MicroAnimations_Test
//
// Created by Jean-Marc Boullianne on 8/18/20.
//
import SwiftUI
struct AlignmentControl: View {
@Binding var textAlignment: TextAlignment
@State private var alignment: HorizontalAlignment
var tintColor: Color
var baseColor: Color
init(alignment: Binding<TextAlignment>, tintColor: Color = Color.blue, baseColor: Color = Color.gray) {
self._textAlignment = alignment
switch alignment.wrappedValue {
case .leading:
self._alignment = .init(initialValue: .leading)
case .center:
self._alignment = .init(initialValue: .center)
case .trailing:
self._alignment = .init(initialValue: .trailing)
}
self.tintColor = tintColor
self.baseColor = baseColor
}
var body: some View {
ZStack(alignment: Alignment(horizontal: alignment, vertical: .center)) {
HStack (spacing: 20) {
AlignmentButton(alignment: .leading) {
alignment = .leading
textAlignment = .leading
}
AlignmentButton(alignment: .center) {
alignment = .center
textAlignment = .center
}
AlignmentButton(alignment: .trailing) {
alignment = .trailing
textAlignment = .trailing
}
}
.foregroundColor(baseColor)
VStack(alignment: alignment, spacing: 4) {
AlignmentLine()
.animation(Animation.easeOut)
AlignmentLine()
.frame(width: 14, height: 3, alignment: .center)
.cornerRadius(1.5)
.animation(Animation.easeOut.delay(0.03))
AlignmentLine()
.animation(Animation.easeOut.delay(0.06))
AlignmentLine()
.frame(width: 14, height: 3, alignment: .center)
.cornerRadius(1.5)
.animation(Animation.easeOut.delay(0.09))
}.foregroundColor(tintColor)
}
}
}
struct AlignmentControl_Previews: PreviewProvider {
@State static var alignment: TextAlignment = .leading
static var previews: some View {
ZStack {
Color(red: 35/255, green: 45/255, blue: 50/255)
VStack(spacing: 200) {
AlignmentControl(alignment: $alignment)
AlignmentButton(alignment: .leading) {
}.foregroundColor(.white)
}
}
}
}
struct AlignmentLine: View {
var body: some View {
Rectangle()
.frame(width: 25, height: 3, alignment: .center)
.cornerRadius(1.5)
}
}
struct AlignmentButton : View {
var alignment: HorizontalAlignment
var action: ()->()
var body: some View {
Button(action: action, label: {
VStack(alignment: alignment, spacing: 4) {
AlignmentLine()
AlignmentLine()
.frame(width: 14, height: 3, alignment: .center)
.cornerRadius(1.5)
AlignmentLine()
AlignmentLine()
.frame(width: 14, height: 3, alignment: .center)
.cornerRadius(1.5)
}
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.