Marquee
A powerful implementation of Marquee(scrolling text or label) in SwiftUI, which supports any content view, including text(label), image, video, etc.
Blog SwiftUI: How to create a powerful Marquee?
Features
- Supports any content view powered by ViewBuilder.
- Supports autoreverses.
- Supports custom duration.
- Supports custom direction.
- left2right
- right2left
- Marquee when content view not fit.
Installation
Swift Package Manager
In Xcode go to File -> Swift Packages -> Add Package Dependency and paste in the repo's url: https://github.com/SwiftUIKit/Marquee.
Usage
Any Content View
Text（Label）
import SwiftUI
import Marquee
struct ContentView: View {
var body: some View {
Marquee {
Text("Hello World!")
.fontWeight(.bold)
.font(.system(size: 40))
}
}
}Image
import SwiftUI
import Marquee
struct ContentView: View {
var body: some View {
Marquee {
Image("test")
}
}
}AttributedText
import SwiftUI
import Marquee
struct ContentView: View {
var body: some View {
Marquee {
Text("Bold")
.fontWeight(.bold)
.font(.custom("SFUIDisplay-Light", size: 40))
+
Text(" Underlined")
.font(.system(size: 30))
.underline()
.foregroundColor(.red)
+ Text(" Color")
.foregroundColor(.blue)
}
}
}Animation Options
- duration
Specially, when
durationis equal to0orDouble.infinity, the animation will stop and the view stays at the initial position.
- autoreverses
- direction
- whenNotFit
import SwiftUI
import Marquee
struct ContentView: View {
@State var duration: Double = 3.0
@State var autoreverses: Bool = false
@State var direction: MarqueeDirection = .right2left
@State var whenNotFit: Bool = false
var body: some View {
VStack {
Marquee {
VStack {
Text("Bold")
.fontWeight(.bold)
.font(.custom("SFUIDisplay-Light", size: 40))
+
Text(" Underlined")
.font(.system(size: 30))
.underline()
.foregroundColor(.red)
+ Text(" Color cccccccccccccccc")
.foregroundColor(.blue)
}
}.background(Color.white)
.marqueeDuration(duration)
.marqueeAutoreverses(autoreverses)
.marqueeDirection(direction)
.marqueeWhenNotFit(whenNotFit)
.marqueeIdleAlignment(.leading)
Spacer()
HStack {
Button(action: {
self.duration = (duration == 3.0) ? 1.0 : 3.0
}, label: {
Text("duration")
})
Button(action: {
self.autoreverses.toggle()
}, label: {
Text("autoreverses")
})
Button(action: {
self.direction = (direction == .left2right) ? .right2left : .left2right
}, label: {
Text("direction")
})
Button(action: {
self.whenNotFit.toggle()
}, label: {
Text("whenNotFit")
})
}.frame(height: 100)
}.ignoresSafeArea()
}
}ChangeLog
v0.3.0
- add idle alignment.
v0.2.1
- fix vertical alignment.
v0.2.0
- add marquee when content view not fit.
v0.1.0
- add marquee.