Your First iOS and SwiftUI App · Styling the Buttons and Slider | raywenderlich.com

🎓 Courses & Articles
1
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/4919757-your-first-ios-and-swiftui-app/lessons/43
2

Hi, I am using XCODE 11.1 and macOS Catalina and I found a bug in the button image background. Instead of rendering the image as the background, it rendered the accent color.

3

I can confirm, I get the same bug.

4

Same(
How i can fix it?

5

Is there a fix or workaround? When I set the button’s image background, I just see the a blue button. Adding the shadow modifier allows the text to bleed through. The Inspector also stops working. Back to the UIKit tutorial I guess.

6

@gariyanto I have the same problem with you.
And I find that I can’t override the style, so the text in button still has shadow style. The text shadow is inherited from button style, and I can not override this style. I am very confusing

7

Getting the same. Anything in docs?

9

Image(“InfoIcon”).accentColor(midnightBlue)
Text(“Info”).modifier(ButtonSmallTextStyle())

I’ve done it like this and everything works

10

Solution: .background(Image(“Button”).renderingMode(.original))

1 Like
12

I found the solution
Go to Assets.xcassets then choose → Button
Then choose image set → render As choose Orginal Image
solution

1 Like
13

This was the solution! thanks.

1 Like
14

After creating the buttons, I found that adding **.background(Image("Button"))** displays the button in blue. The fix is to use **.background(Image("Button").renderingMode(.original))** to render the background image as original, not as the blue accent color.

15

Hi all! I have confirmed the issue you guys are seeing in Xcode 11.1. Both of the workarounds you guys mentioned work:

  1. In Assets.xcassets, select Button and change the Render As to Original Image.
  2. Or you can do it via code by setting the rendering mode on the image in each button, like background(Image("Button").renderingMode(.original))

Personally I think option #1 is a bit simpler as it’s less code, but either one works. I’ve updated the author notes on the video with a note on this for anyone else who comes across this.

16

Just after the 1 minute mark, Ray runs the app in the simulator to show that the buttons are not actually cut off. This is true for iPhone X but not true for iPhone’s without the notch. I tried for iPhone 8 simulator and iPhone 7 Plus, actual device, and the buttons are cut off. Any suggestions on how to fix on these older phones?

1 Like
17

@carl.usa Do you still have issues with this?

1 Like
19

@rwenderlich It appears that the buttons in the hstack are align by their text in the hstack, making button spacing uneven.

How should we fix this?

20

I have the same question as @carl.usa. How should we fix the view going out of screen width in devices without notches?

21

I ran the original code in xCode12 and the color of the button icons doesn’t change, even if I put the color directly over the image, it doesn’t change. If I do
Image(“StartOverIcon”)
.renderingMode(.template)
.foregroundColor(.white)
It changes to white but it doesn’t work with the custom color.
Any idea on how to fix it?

22

same problem here… any solution?

23

Go to Assetx.xcassets and change the “Render as” to template, this solves it :slight_smile: