Your First iOS and SwiftUI App · Running the App on Your Device | 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/47
2

The background images of the buttons don’t show up when running the app on my device (13.1.1):

02

It works on the simulator.

3

Ditto. Apparently it’s rendering those images as Templates instead of as Original by default, but not in the simulator or the Canvas. Weird. Here’s the fix:

4

The issue seems to be due to the NavigationView proprieties. The buttons will take the overlay colour while in the NavigationView but only on the device.

Adding .buttonStyle(PlainButtonStyle()) to the NavigationView in SceneDelegate will solve this issue.

5

If anyone’s seeing the issue with the buttons showing up as blue rather than using the background image, see the author notes / forum discussion on the video for the solution: Your First iOS and SwiftUI App · Styling the Buttons and Slider | raywenderlich.com - #14 by jcupak

6

I can build successfully on the simulator, but I’m getting a “build failed” when I attempt to deploy to my device. I can see my phone under Devices and Simulators, and it’s authenticated and trusted on my Mac.

8

If your phone isn’t trusting the developer, go to Settings > General > Profiles & Device Management and trust your Apple ID. It took me 30 minutes to figure that out so hopefully this helps you guys!

1 Like
9

@alexperse Do you still have issues with this?

10

@swivelio Thank you for sharing your solution - much appreciated! :]

11

I had the same issue. Maybe it’s just this version of Xcode that I’m using (Version 11.5 (11E608c)), but I’m not allowed to build to my device without having a Development Team set.

Which you fix by selecting your apple ID which should be available in the “Team” field on the Signing & Capabilities page (I only added my AppleID during this tutorial, so I was unable to select a team when first creating the App).

image

12

The app deployed and runs on my iPhone 7+ … Yay!

Problem: slider and buttons extend off the physical screen. The phone screenshot looks exactly like the 8+ Sim and Swift UI preview - not ideal. Catalina 10.15.5 & Xcode 11.5

I found an Apple Forum & Quora saying Xcode [still] can’t do landscape SwiftUI previews (Xcode 12 will perhaps?), and @rwenderlich mentioned this in an earlier lesson, but what needs to be done to fix the app to display correctly on an iPhone 6/7/8+?

Thx! -Tim
SwiftUI Preview versus Phones

13

@timcolson Do you still have issues with this?

14

@sarahwo Thank you for sharing this - much appreciated!

15

Thanks for the reply. (I was not notified of even these moderator replies. I’ll check forum settings.)

Yes, sadly, the same. No replies here, so no change. Is this situation unique to my system?

16

@timcolson

Hi Tim, I had the same issue. I resolved it by adding in .padding(.leading, 20) and .padding(.trailing, 20) to the HStack
Screenshot 2020-08-25 at 16.20.06

17

Just a quick followup. I was looking into this issue and it seems that the background image is not part of the button’s size. That’s why it seems like the button is going out of bounds.

I’m thinking of a couple of ways to fix this:

  1. Follow the suggestion that @joebe89 made in the comment above. It works for most cases, but in my phone (SE 1st generation), the problem persists.
  2. Set a fixed size for the button that would be the same as the background image with its size is 100x37. By using the .frame function in the button modifier struct.
  3. Is there a way to get the size of the background image for the button at runtime? That way it would scale consistently. I was googling around and found something about GeometryReader but it seems too complicated to give it a try for now.

By applying the second way of fixing this, it seems like all the buttons have a consistent size, which it’s what I’m looking for. But I wonder if it’s actually a solution for this because I’m concerned of how it would look for bigger display sizes.

Any thoughts from a more experienced developer?

18

@joebe89 - thx for the reply; apologies for my delay.
(I now have email notifications actually turned on!)

Seems the padding on the HStack does move thing inward, but seems like a kludge. The components on the right side (“top” of the phone) do not move as much as the left side (“bottom”).

Still feels like we’re missing something for the non-notch phones, yes?

19

@timcolson @joebe89 @frostra1n Please check out the latest version of the course when you get a chance:

https://www.raywenderlich.com/17493408-your-first-ios-and-swiftui-app-an-app-from-scratch

I hope it helps!

1 Like