How do I make Text auto animate with shuffling colors or using LinearGradient to animate text? Or animate borderline of text?
I can animate it on tap gesture but can't figure out a way for it to auto animate, in a ForEach.
.onAppear() {
withAnimation(Animation
.easeInOut(duration: 0.6)
.repeatForever(autoreverses: true)) {
print("ree: \(self.fadeInOut)")
self.fadeInOut.toggle()
}
}
.opacity(self.fadeInOut ? 0 : 1)
Thanks
Related
I've got a Text() in an overlay(). After applying .scaleEffect(), the text becomes blurry/aliased:
How can I make the text remain sharp? - I want the green Rectangle and Text to scale with the yellow Rectangle
(This is a simplified version of a complex UI element with nested overlays. Moving the overlay below scaleEffect is not an option.)
import SwiftUI
struct ZoomFontView: View {
var body: some View {
Rectangle()
.frame(maxWidth: 100, maxHeight: 100)
.foregroundColor(Color.yellow)
.overlay(sub_view)
.scaleEffect(6) // Placeholder for MagnificationGesture
}
var sub_view: some View {
ZStack {
Rectangle()
.frame(maxWidth: 70, maxHeight: 70)
.foregroundColor(Color.mint)
.overlay(Text("Hello"))
}
}
}
struct ZoomFontView_Previews: PreviewProvider {
static var previews: some View {
ZoomFontView()
}
}
The scaleEffect scale view like an image, instead you have to scale background and text separately, scaling font for Text so it is rendered properly.
Here is a demo of possible approach. Tested with Xcode 13.1 / iOS 15.1
left: scale = 1 right: scale = 8
struct ZoomFontView: View {
let scale: CGFloat = 8
var body: some View {
ZStack {
Rectangle()
.frame(maxWidth: 100, maxHeight: 100)
.foregroundColor(Color.mint)
.scaleEffect(1 * scale) // Placeholder for MagnificationGesture
Text("Hello").font(.system(size: 18 * scale))
.fixedSize()
}
}
}
Both text and Images are rendered in a low level CoreAnimation layer that relies on GPU rendering (aka Metal) to display as bitmap based graphics. So if you scale a layer where the text is being rendered, it will have the same effect of scale an Image, in other words, it will upscale pixels and make it try to "anti alias" the text to make the edges smoother.
So you should not have to scale the layer directly, instead, you should scale the font in order to archive the proper result.
Text("Hello")
// scale is the scale factor you're applying to the layer.
.font(.system(size: 16 * scale))
With the new XCode 13 and it‘s iOS 15 support the presentation of Lists have apparently changed.
Now a List has an additional gray background. Before, the background was plain white, just as I would like it to be. When I add other elements like texts, the default background color is still white.
Is there any way to get rid of the gray surrounding of the List without switching to a ForEach() solution?
I tried changing the background color from gray to white on various places and adding additional stacks in hope to override the default background color.
This I want be be all white without the gray surrounding:
struct ContentView: View {
var body: some View {
VStack {
Text("Test")
List {
ForEach(1..<20) { i in
Text(String(i))
}
}.frame(maxWidth: .infinity)
}
}
}
Change the listStyle to .plain. The default for iOS 14 is .plain, and .insetGrouped for iOS 15.
Code:
struct ContentView: View {
var body: some View {
VStack {
Text("Test")
List {
ForEach(1 ..< 20) { i in
Text(String(i))
}
}
.listStyle(.plain)
}
}
}
Result:
I thought contentShape() would affect the hover "area" the same way it affects the clickable area.
The following image is an example where the hover should not be triggered.
Full example code:
struct ContentView: View {
#State var hovering: Bool = false
var body: some View {
Rectangle()
.frame(width: 120, height: 120)
.foregroundColor(hovering ? Color.white : Color.red)
.clipShape(Circle())
.contentShape(Circle())
.onHover { hovering in
self.hovering = hovering
}
.onTapGesture {
print("Click")
}
.padding(24)
}
}
Is there a way to clip the hover area like the click area?
Add a clear background that cancels the hover value on hover. It’s not going to be perfect as mouse tracking in SwiftUI has lag errors.
I am creating a scrollView with a code like this:
ScrollView {
ForEach(items) { item in
VStack {
DisclosureGroup {
SubElements()
}
label: {
DisplayItem(item)
}
}
}
}
The result is something like this:
One thing I don't like about this is the chevron color. I want it black.
How do I change that?
Any ideas?
You can change the chevron color with adding .accentColor after your DisclosureGroup.
Accent color is a color that represents the system or application accent color. See the Apple docs
For your first issue it is probably down to padding that is stopping the indicator from being inset enough. As you haven't included all your code, it's difficult to tell where to put it but on your ScrollView should be enough.
For the color of the indicator, you can just use the accentColor modifier, and set the color that you want.
Here is a very simple example.
struct ContentView: View {
var body: some View {
ScrollView {
ForEach(0..<5) { _ in
DisclosureGroup(
content: { Text("Content") },
label: { Text("Label") }
)
.accentColor(.black)
}
}.padding(.horizontal, 30)
}
}
This is what it looks like
Change the color of content with foregroundColor and color of the arrow with accentColor:
DisclosureGroup {
HStack {
Text(faqElement.answer)
.adaptiveFont(size: 14, family: .app, style: .regular)
.foregroundColor(Color.App.Dynamic.Gray.value_900) // <-- Color of the text in content
Spacer()
}
.padding(.vertical)
} label: {
HStack {
Text(faqElement.question)
.adaptiveFont(size: 20, family: .app, style: .regular)
.foregroundColor(Color.App.Dynamic.Gray.value_900) // <-- Color of the label
Spacer()
}
.frame(height: 34)
}
.accentColor(Color.App.Static.Green.value_700) // <-- Color of the arrow
I am playing around with SwiftUI and I am stuck on this View. everything is working fine but this little bug is very frustrating.I am trying to display the images as a vertical view and it won't show on the view . I know the Images are loaded but the view is not showing it . Its covered in blue color.
import SwiftUI
struct PlanetHome : View {
var planets : [Planet]
var body : some View {
NavigationView {
ScrollView {
ZStack {
Color.black .edgesIgnoringSafeArea (.all)
VStack (alignment: .center)
{
ForEach (self.planets.identified(by: \.imageName))
{
planet in NavigationLink (destination: PlanetDetail(planets: planet))
{
PlanetsView (planets: planet)
.frame (width: 500, height: 500)
.padding (.vertical, 5)
}
}
}
}
}
.navigationBarTitle (Text("Planets"))
}
}
}
I tried to put the NavigationView under the ZStack but it did not work.I have no Idea what I did wrong on the code. No error message on the debugger. just doesn't show the images.
The NavigationLink applies a button style to the objects it holds. Button does the same. To remove the blue color, add the buttonStyle modifier:
NavigationLink(destination: ...) {
...
}
.buttonStyle(PlainButtonStyle())
You can create and apply your own button style as well.
Its covered in blue color.
You can change blue color to whatever you want with .foregroundColor(.YourColor) or just change Render as Default to Render as Original Image at Assets.xcassets -> Pick Any Image -> Show the Attribute inspector
To fix other problem you should include PlanetsView because when i put Image(systemName: "photo") instead your view it's shows correctly